/* ==========================================================================
   Trang chủ kiểu Wolf Yoga: tiêu đề serif, thanh "vì sao chọn", Flash Sale nền be, hàng banner,
   khối chữ+ảnh+sản phẩm, lưới thẻ danh mục. Màu lấy từ --bed-primary / --bed-secondary.
   ========================================================================== */
:root { --bed-yoga-border: #EAF0EC; --bed-yoga-text: var(--bed-fg); }

/* ---------- Tiêu đề khối (bed_y_head) ---------- */
.bed-yh { margin: 0 0 24px; }
.bed-yh.text-center { text-align: center; }
.bed-yh__eyebrow { margin: 0 0 4px; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; color: var(--bed-primary); }
@media (min-width: 992px) { .bed-yh__eyebrow { font-size: 16px; } }
.bed-yh__title {
	margin: 0 0 8px; font-family: var(--bed-font-heading); font-weight: 500; font-size: 30px; line-height: 1.15; letter-spacing: 1px;
	color: var(--bed-primary); text-transform: none; width: auto;
}
@media (min-width: 992px) { .bed-yh__title { font-size: 45px; } }
@media (min-width: 1025px) { .bed-yh__title { font-size: 50px; } }
.bed-yh__title span { color: var(--bed-secondary); }
.bed-yh__orn { margin: 8px 0; }
.bed-yh__orn img { display: inline-block; max-width: 110px; height: auto; }
@media (min-width: 992px) { .bed-yh__orn img { max-width: 150px; } }
.bed-yh__desc { margin: 8px 0; max-width: 600px; color: #333; }
.bed-yh.text-center .bed-yh__desc { margin-left: auto; margin-right: auto; }
.bed-yh--showcase { margin-bottom: 16px; }
.bed-sc.is-stack .bed-yh--showcase .bed-yh__title span { display: block; font-size: 30px; line-height: 1.1; }
@media (min-width: 992px) { .bed-sc.is-stack .bed-yh--showcase .bed-yh__title span { font-size: 60px; } }
@media (min-width: 1025px) { .bed-sc.is-stack .bed-yh--showcase .bed-yh__title span { font-size: 80px; } }

/* ---------- Nút ---------- */
.bed-ybtn {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 20px; border: 1px solid var(--bed-primary); border-radius: 50px;
	background: var(--bed-primary); color: #fff !important; font-size: 14px; font-weight: 500; text-transform: uppercase; text-decoration: none;
	transition: background-color .3s, color .3s;
}
.bed-ybtn:hover, .bed-ybtn:focus { background: #fff; color: var(--bed-primary) !important; }

/* ---------- Thanh "Vì sao chọn" ---------- */
.bed-why.is-overlap { position: relative; z-index: 2; }
.bed-why__panel {
	display: flex; gap: 0; padding: 8px; overflow-x: auto; scrollbar-width: none;
	background: var(--bed-why-bg, #fff); border-radius: 16px; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}
.bed-why__panel::-webkit-scrollbar { display: none; }
@media (max-width: 767px) { .bed-why__panel { box-shadow: none; background: transparent; padding: 0; gap: 12px; } .bed-why__item { background: #fff; border-radius: 12px; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); } }
.bed-why__item { flex: 0 0 25%; display: flex; align-items: center; gap: 12px; padding: 8px 16px; color: inherit !important; text-decoration: none; min-width: 0; box-sizing: border-box; }
@media (max-width: 991px) { .bed-why__item { flex-basis: 45%; } }
@media (max-width: 767px) { .bed-why__item { flex-basis: 75%; } }
.bed-why__icon { flex: none; display: block; width: 70px; height: 70px; }
.bed-why__icon img { display: block; width: 70px; height: 70px; object-fit: contain; }
.bed-why__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bed-why__title { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--bed-why-title, var(--bed-yoga-text)); }
.bed-why__desc { font-size: 14px; line-height: 1.4; color: var(--bed-why-desc, #333); }

/* ---------- Flash Sale nền be ---------- */
.bed-deal__panel { padding: 12px; background: var(--bed-deal-bg, var(--bed-accent)); border-radius: 12px; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); }
@media (min-width: 992px) { .bed-deal__panel { padding: 16px; } }
.bed-deal__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 16px; }
.bed-deal__titleblock { display: flex; align-items: center; gap: 8px; }
.bed-deal__logo img { display: block; max-width: 100px; height: auto; }
@media (min-width: 992px) { .bed-deal__logo img { max-width: 130px; } }
.bed-deal__text { text-align: center; }
.bed-deal__title {
	margin: 0; font-family: var(--bed-font-heading); font-weight: 500; font-size: 30px; line-height: 1.1; letter-spacing: 1px; text-transform: uppercase;
	color: var(--bed-deal-title, var(--bed-primary)); width: auto;
}
@media (min-width: 992px) { .bed-deal__title { font-size: 45px; } }
@media (min-width: 1025px) { .bed-deal__title { font-size: 50px; } }
.bed-deal__title a { color: inherit !important; }
.bed-deal__sub { margin: 4px 0 0; font-size: 14px; color: var(--bed-deal-title, var(--bed-primary)); }
@media (min-width: 1025px) { .bed-deal__sub { font-size: 16px; } }
.bed-deal__sub span { color: var(--bed-deal-accent, var(--bed-secondary)); }
.bed-deal__orn { margin-top: 6px; }
.bed-deal__orn img { display: inline-block; max-width: 110px; height: auto; }
@media (min-width: 992px) { .bed-deal__orn img { max-width: 150px; } }
.bed-deal__time { margin: 20px 0 0; }
@media (max-width: 767px) { .bed-deal__time { width: 100%; } }
.bed-deal__slider { margin-top: 16px; }

/* đồng hồ kiểu hộp có viền, nhãn nổi phía trên */
.bed-countdown--yoga .bed-countdown__row { position: relative; display: block; padding: 15px; border: 4px solid #dbd9d2; background: #fefbf6; width: auto; }
@media (min-width: 992px) { .bed-countdown--yoga .bed-countdown__row { padding: 25px; } }
.bed-countdown--yoga .bed-countdown__label {
	position: absolute; top: -20px; left: 50%; transform: translateX(-50%); margin: 0; padding: 7px 25px; background: var(--bed-primary); color: #fff;
	font-size: 14px; line-height: 1.3; white-space: nowrap; font-weight: 500;
}
@media (max-width: 991px) { .bed-countdown--yoga .bed-countdown__label { top: -15px; padding: 5px 10px; } }
.bed-countdown--yoga .bed-ctd { justify-content: center; gap: 4px; }
.bed-countdown--yoga .bed-ctd__item { width: 55px; padding: 0; background: transparent; color: var(--bed-deal-accent, var(--bed-secondary)); }
@media (min-width: 768px) { .bed-countdown--yoga .bed-ctd__item { width: 70px; } }
@media (min-width: 992px) { .bed-countdown--yoga .bed-ctd__item { width: 90px; } }
.bed-countdown--yoga .bed-ctd__num { height: 1em; font-family: var(--bed-font-heading); font-weight: 500; font-size: 30px; }
@media (min-width: 768px) and (max-width: 991px) { .bed-countdown--yoga .bed-ctd__num { font-size: 40px; } }
@media (min-width: 992px) { .bed-countdown--yoga .bed-ctd__num { font-size: 50px; } }
.bed-countdown--yoga .bed-ctd__item > span { margin-top: 8px; font-size: 14px; color: var(--bed-yoga-text); font-family: var(--bed-font-body); }
.bed-countdown--yoga .bed-ctd__dot { font-family: var(--bed-font-heading); font-size: 30px; color: var(--bed-deal-accent, var(--bed-secondary)); align-self: flex-start; }
@media (min-width: 992px) { .bed-countdown--yoga .bed-ctd__dot { font-size: 50px; line-height: 1; } }
.bed-countdown--yoga.show-days .bed-ctd__item[hidden], .bed-countdown--yoga.show-days .bed-ctd__dot[hidden] { display: block !important; }
.bed-countdown--yoga.show-days .bed-ctd__dot[hidden] { display: block !important; }

/* ---------- Hàng banner ---------- */
.bed-ybanners { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--bed-ban-gap, 16px); }
.bed-ybanners__cell { grid-column: span 12; min-width: 0; }
@media (min-width: 768px) { .bed-ybanners__cell { grid-column: span var(--span, 6); } }
.bed-ybanners__cell a { display: block; }
.bed-ybanners__img, .bed-ybanners__cell img { display: block; width: 100%; height: auto; border-radius: var(--bed-ban-radius, 12px); transition: all .3s; }
.bed-ybanners.has-hover img:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, .1); }

/* ---------- Khối chữ + ảnh + sản phẩm ---------- */
.bed-sc__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 24px; align-items: center; }
.bed-sc__text { grid-column: 1 / -1; text-align: center; }
.bed-sc__media { grid-column: 1 / -1; }
@media (min-width: 992px) {
	.bed-sc__text { grid-column: span var(--bed-sc-text, 5); text-align: left; }
	.bed-sc__media { grid-column: span calc(12 - var(--bed-sc-text, 5)); }
	.bed-sc.is-reverse .bed-sc__text { order: 2; }
	.bed-sc.is-reverse .bed-sc__media { order: 1; }
}
.bed-sc__text .bed-yh.text-left .bed-yh__desc { margin-left: 0; }
@media (max-width: 991px) { .bed-sc__text .bed-yh__desc { margin-left: auto; margin-right: auto; } }
.bed-sc__img { display: block; width: 100%; height: auto; border-radius: 12px; transition: all .3s; }
.bed-sc__img:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, .1); }
.bed-sc__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .bed-sc__chips { gap: 12px; } }
@media (max-width: 991px) { .bed-sc__chips { justify-content: center; } }
.bed-sc__chips li { margin: 0; }
.bed-sc__chips a { display: flex; align-items: center; padding: 10px 25px; border: 1px solid var(--bed-yoga-border); border-radius: 12px; color: var(--bed-yoga-text) !important; font-weight: 500; text-decoration: none; background: #fff; transition: all .2s; }
@media (max-width: 569px) { .bed-sc__chips a { padding: 8px 10px; } }
.bed-sc__chips a:hover { color: #fff !important; background: var(--bed-primary); border-color: var(--bed-primary); }
.bed-sc .bed-sc__grid { margin-top: 16px; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .bed-sc .bed-sc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .bed-sc .bed-sc__grid { gap: 16px; grid-template-columns: repeat(var(--bed-sc-cols, 5), minmax(0, 1fr)); } }
.bed-sc__cell { min-width: 0; }

/* ---------- Lưới thẻ danh mục ---------- */
.bed-cc__grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 991px) { .bed-cc__grid { display: flex; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; } .bed-cc__grid::-webkit-scrollbar { display: none; } .bed-cc__card { flex: 0 0 66%; } }
@media (min-width: 768px) and (max-width: 991px) { .bed-cc__card { flex-basis: 41.66%; } }
@media (min-width: 992px) { .bed-cc__grid { gap: 16px; grid-template-columns: repeat(var(--bed-cc-cols, 4), minmax(0, 1fr)); } }
.bed-cc__card {
	display: flex; flex-direction: column; box-sizing: border-box; padding: 16px; min-height: 100%;
	background: #fff center / cover no-repeat; background-position: calc(100% + 70px) center; border: 1px solid #f1f2f4; border-radius: 12px;
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); color: inherit !important; text-decoration: none; transition: box-shadow .3s ease, transform .3s ease;
}
.bed-cc__card:hover { box-shadow: 0 12px 24px rgba(0, 0, 0, .06); transform: translateY(-5px); }
.bed-cc__icon { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; margin-bottom: 16px; border: 2px solid #e9f3eb; border-radius: 50%; background: #fff; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); }
.bed-cc__icon img { width: 30px; height: 30px; object-fit: contain; }
.bed-cc__name { margin-bottom: 16px; font-size: 16px; font-weight: 700; text-transform: uppercase; color: var(--bed-primary); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.bed-cc__desc { margin-bottom: 24px; max-width: 120px; font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.bed-cc__more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; text-transform: uppercase; color: var(--bed-secondary); transition: all .3s; }
.bed-cc__card:hover .bed-cc__more { gap: 15px; color: var(--bed-primary); }

/* ---------- Hero: chữ phủ kiểu biên tập (tiêu đề serif nhiều dòng, họa tiết, mô tả, 2 nút) ---------- */
.bed-hero__cap--ed .bed-hero__cap-in { max-width: 560px; gap: 10px; }
.bed-hero__title--ed {
	display: flex; flex-direction: column; margin: 0; font-family: var(--bed-font-heading); font-weight: 500; font-size: 35px; line-height: 1.2; letter-spacing: 0;
	color: var(--bed-primary); text-shadow: none; text-transform: none; text-wrap: initial;
}
@media (min-width: 992px) { .bed-hero__title--ed { font-size: 45px; } }
@media (min-width: 1025px) { .bed-hero__title--ed { font-size: 57px; } }
.bed-hero__line { display: block; }
.bed-hero__orn img { display: block; max-width: 100px; height: auto; }
@media (min-width: 992px) { .bed-hero__orn img { max-width: 120px; } }
.bed-hero__text { margin: 0 0 12px; max-width: 500px; font-size: 16px; line-height: 1.5; color: var(--bed-yoga-text, #000000); }
@media (min-width: 992px) { .bed-hero__text { font-size: 18px; margin-bottom: 20px; } }
.bed-hero__btns { display: flex; flex-wrap: wrap; gap: 10px; }
body.bed-theme .bed-hero__cap--ed .bed-hero__btn { margin-top: 0; padding: 10px 30px; border-radius: 6px; font-size: 14px; text-transform: uppercase; }
body.bed-theme .bed-hero__cap--ed .bed-hero__btn2 { background: transparent; color: var(--bed-primary) !important; }
body.bed-theme .bed-hero__cap--ed .bed-hero__btn2:hover { background: var(--bed-primary); color: #fff !important; }
@media (max-width: 767px) {
	.bed-hero__cap--ed { align-items: flex-end; padding-bottom: 28px; }
	.bed-hero__cap--ed .bed-hero__btn { padding: 7px 14px; font-size: 13px; }
}
.bed-hero__title--ed .bed-hero__line { color: inherit; }

/* ---------- Hero (đo theo mẫu 1440): khối chữ rộng 80% căn giữa, gap/cỡ chữ/nút ---------- */
.bed-hero__cap--ed .bed-container { width: 80%; max-width: none; padding: 0 30px; }
.bed-hero__cap--ed .bed-hero__cap-in { gap: 0; max-width: none; }
.bed-hero__title--ed { line-height: 1.25; }
.bed-hero__title--ed .bed-hero__line + .bed-hero__line { margin-top: 5px; }
.bed-hero__cap--ed .bed-hero__orn { margin: 40px 0 24px; display: block; }
.bed-hero__cap--ed .bed-hero__orn img { max-width: 120px; }
.bed-hero__cap--ed .bed-hero__text { margin: 0 0 30px; font-weight: 500; line-height: 1.5; }
.bed-hero__cap--ed .bed-hero__btns { gap: 16px; }
body.bed-theme .bed-hero__cap--ed .bed-hero__btn { padding: 10px 30px; border-radius: 8px; font-weight: 500; line-height: 21px; letter-spacing: normal; }
@media (max-width: 991px) { .bed-hero__cap--ed .bed-hero__text { font-size: 14px; max-width: 350px; margin-bottom: 20px; } .bed-hero__cap--ed .bed-hero__orn img { max-width: 100px; } }
@media (max-width: 767px) {
	.bed-hero__cap--ed { align-items: flex-end; padding-bottom: 40px; }
	.bed-hero__cap--ed .bed-container { width: calc(100% - 40px); padding: 0; margin-left: 20px; margin-right: 20px; }
	.bed-hero__cap--ed .bed-hero__text { font-size: 16px; margin-bottom: 15px; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); }
	.bed-hero__title--ed { text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); }
}
/* chấm tròn hero: viên thuốc tối mờ ở đáy; mũi tên 50px */
.bed-hero__wrap.has-dots .flickity-page-dots {
	bottom: 15px; left: 50%; right: auto; transform: translateX(-50%); width: auto; display: flex; align-items: center; gap: 8px;
	padding: 10px; border-radius: 50px; background: rgba(9, 13, 20, .5);
}
.bed-hero__wrap .flickity-page-dots .dot { width: 8px; height: 8px; margin: 0; border-radius: 50%; background: rgba(255, 255, 255, .8); opacity: 1; }
.bed-hero__wrap .flickity-page-dots .dot.is-selected { background: #fff; }
.bed-hero__slider .flickity-prev-next-button { width: 50px; height: 50px; box-shadow: 0 .125rem .625rem rgba(28, 28, 28, .15); }