/* ==========================================================================
   Bed — nhóm element A: [bed_hero] [bed_policies] [bed_flashsale] + .bed-countdown
   Nguồn: docs/ega-bed/reference/css-js/custom.css (rem → px ×10)
   ========================================================================== */

/* ---------- Tiện ích dùng chung ---------- */
.bed-hero [hidden], .bed-countdown [hidden] { display: none !important; }

/* Flickity: ô con kéo giãn bằng chiều cao ô cao nhất (thẻ sản phẩm đều nhau) */
.bed-fs__slider .flickity-slider > .bed-slide { height: auto; }

/* ==========================================================================
   1. HERO — banner slider full-width (section-home-banner)
   ========================================================================== */
.bed-hero { padding: 0; }
.bed-hero__wrap { position: relative; width: 100%; }
.bed-hero .bed-hero__slider { margin: 0; }
.bed-hero .bed-hero__slide { width: 100%; overflow: hidden; display: block; }
.bed-hero .bed-hero__link { display: block; }
.bed-hero .bed-hero__img { display: block; margin: 0 auto; width: 100%; height: auto; max-width: 100%; }
.bed-hero picture { display: block; }
.bed-hero .bed-hero__slide { position: relative; }
.bed-hero__cap { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; }
.bed-hero__cap .bed-container { width: 100%; }
.bed-hero__cap-in { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 520px; pointer-events: auto; }
.bed-hero__pill { padding: 7px 16px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 9999px; background: rgba(0, 0, 0, .18); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #fff; font-size: 14px; line-height: 20px; font-weight: 500; }
.bed-hero__title { margin: 0; font-family: var(--bed-font-heading); font-size: 24px; line-height: 1.2; font-weight: 700; color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .35); text-wrap: balance; }
.bed-hero__title span { color: #e3c487; }
@media (min-width: 768px) { .bed-hero__cap-in { gap: 16px; } .bed-hero__title { font-size: 44px; } }
@media (min-width: 1200px) { .bed-hero__title { font-size: 54px; } }
body.bed-theme .bed-hero__btn { margin-top: 4px; background: var(--bed-primary); border-color: var(--bed-primary); }
@media (max-width: 767px) { .bed-hero__slide.has-cap { min-height: 260px; } .bed-hero__slide.has-cap .bed-hero__img { min-height: 260px; object-fit: cover; } }
/* mũi tên: bộ chung (bed-base.css → SLIDER): hiện khi rê chuột vào banner, chỉ ≥768px.
   chấm: ≥768px đè giữa-dưới ảnh (bottom 8px); <768px nằm dưới ảnh, cách 12px — chỗ này được chừa sẵn bằng
   padding-bottom của wrap (4px chấm + 12px) và chấm đặt absolute → Flickity khởi tạo xong không làm trang nhảy. */
.bed-hero__wrap.has-dots { padding-bottom: 12px; }
body.bed-theme .bed-hero .bed-slider .flickity-page-dots {
	position: absolute; top: 100%; bottom: auto; left: 50%; right: auto; width: auto; margin: 12px 0 0; transform: translateX(-50%);
}
@media (min-width: 768px) {
	.bed-hero__wrap.has-dots { padding-bottom: 0; }
	body.bed-theme .bed-hero .bed-slider .flickity-page-dots { top: auto; bottom: 8px; margin: 0; }
}

/* ==========================================================================
   2. POLICIES — Cam kết dịch vụ (section-polices-v2)
   ========================================================================== */
.bed-policies { overflow: hidden; }
.bed-policies__grid {
	display: grid; gap: 16px;
	grid-template-columns: repeat(var(--bed-pol-cols-sm, 2), minmax(0, 1fr));
}
@media (min-width: 768px) {
	.bed-policies__grid { gap: 24px; grid-template-columns: repeat(var(--bed-pol-cols-md, 2), minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.bed-policies__grid { grid-template-columns: repeat(var(--bed-pol-cols, 4), minmax(0, 1fr)); }
}
.bed-policies .bed-pcard {
	display: flex; align-items: flex-start; flex-direction: column; gap: 10px;
	margin: 0; /* bed-shop-d2.css có .bed-policy{margin-top:24px} (khối chính sách trang sản phẩm) — không được kế thừa */
	padding: 16px;
	background: var(--bed-pol-card-bg, #fff);
	border: 1px solid rgba(var(--bed-primary-rgb), .04);
	border-radius: var(--bed-pol-radius, 16px);
	box-shadow: 0 2px 10px rgba(var(--bed-primary-rgb), .06);
	transition: box-shadow .25s ease, transform .25s ease;
	text-decoration: none; color: inherit;
	min-width: 0;
}
@media (min-width: 768px) {
	.bed-policies .bed-pcard { flex-direction: row; align-items: center; gap: 16px; padding: 20px; }
}
.bed-policies .bed-pcard:hover { box-shadow: 0 8px 28px rgba(var(--bed-primary-rgb), .1); transform: translateY(-3px); }
.bed-pcard__icon {
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 40px; height: 40px; border-radius: 12px;
	background: var(--bed-pol-icon-bg, rgba(var(--bed-primary-rgb), .05));
}
@media (min-width: 768px) { .bed-pcard__icon { width: 48px; height: 48px; } }
.bed-pcard__icon .bed-pcard__img { width: 36px; height: 36px; object-fit: contain; display: block; }
.bed-pcard__body { min-width: 0; }
.bed-policies .bed-pcard__title {
	margin: 0 0 4px; font-size: 15px; font-weight: 700; line-height: 1.4;
	color: var(--bed-pol-title, var(--bed-fg));
}
.bed-policies .bed-pcard__desc {
	margin: 0; font-size: 13px; line-height: 1.6;
	color: var(--bed-pol-desc, #6b7280);
}

/* ==========================================================================
   3. COLLECTIONS — Khám phá các bộ sưu tập (section-collection-list)
   ========================================================================== */

/* cụm nút trước/sau cạnh tiêu đề = .bed-slider__nav + button[data-bed-slider] (bed-base.css → SLIDER) */

/* ==========================================================================
   4. COUNTDOWN dùng chung (.bed-countdown) — mặc định kiểu thẻ sáng
   ========================================================================== */
.bed-countdown { font-family: var(--bed-font-body); }
.bed-countdown__row { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
@media (min-width: 768px) { .bed-countdown__row { gap: 20px; } }
.bed-countdown__label { font-size: 14px; line-height: 1.4; text-align: center; }
.bed-countdown:not(.is-ready) .bed-countdown__timer { visibility: hidden; }
.bed-ctd { display: flex; align-items: center; gap: 8px; }
.bed-ctd__item {
	box-sizing: border-box; width: 54px; padding: 4px; text-align: center;
	border-radius: 2px;
	background: var(--bed-ctd-bg, #fff); color: var(--bed-ctd-color, var(--bed-addtocart-bg));
}
@media (min-width: 768px) { .bed-ctd__item { width: 62px; padding: 6px 4px; } }
.bed-ctd__num {
	position: relative; height: 1em; overflow: hidden; line-height: 1;
	font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center;
}
@media (min-width: 768px) { .bed-ctd__num { font-size: 28px; } }
.bed-ctd__item > span { display: block; margin-top: 4px; font-size: 12px; line-height: 1; }
.bed-ctd__dot { font-size: 20px; font-weight: 600; line-height: 1; }
/* chữ số "cuộn" (phút/giây) */
.bed-ctd__num.is-roll::before {
	content: "00\a 01\a 02\a 03\a 04\a 05\a 06\a 07\a 08\a 09\a 10\a 11\a 12\a 13\a 14\a 15\a 16\a 17\a 18\a 19\a 20\a 21\a 22\a 23\a 24\a 25\a 26\a 27\a 28\a 29\a 30\a 31\a 32\a 33\a 34\a 35\a 36\a 37\a 38\a 39\a 40\a 41\a 42\a 43\a 44\a 45\a 46\a 47\a 48\a 49\a 50\a 51\a 52\a 53\a 54\a 55\a 56\a 57\a 58\a 59";
	display: block; position: relative; white-space: pre; text-align: center;
	top: calc(var(--value, 0) * -1em);
	transition: top 1s cubic-bezier(.39, .575, .565, 1);
}
.bed-ctd__num.is-roll.is-instant::before { transition: none; }
.bed-countdown.is-ended .bed-countdown__timer, .bed-countdown.is-notimer .bed-countdown__timer { display: none; }

/* biến thể gọn (trang sản phẩm): ô nhỏ, không nhãn đơn vị */
.bed-countdown--compact .bed-countdown__label { display: none; }
.bed-countdown--compact .bed-countdown__row { justify-content: flex-start; gap: 8px; }
.bed-countdown--compact .bed-ctd__item { width: 32px; padding: 4px 2px; }
.bed-countdown--compact .bed-ctd__num { font-size: 16px; }
.bed-countdown--compact .bed-ctd__item > span { display: none; }
.bed-countdown--compact .bed-ctd__dot { display: block; font-size: 16px; }

/* ==========================================================================
   5. FLASH SALE — fs-luxury
   ========================================================================== */
.bed-flashsale.is-hidden, .bed-flashsale .bed-fs__wrap.is-hidden { display: none !important; }
.bed-flashsale { width: 100%; overflow: hidden; }
.bed-fs {
	position: relative; margin: 0 auto; overflow: hidden;
	background: var(--bed-fs-bg, var(--bed-primary));
	border-radius: var(--bed-fs-radius, 24px);
	color: var(--bed-fs-title, #fff);
}
@media (max-width: 1023px) { .bed-fs { border-radius: min(16px, var(--bed-fs-radius, 24px)); } }
.bed-fs::before {
	content: ''; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px;
	border-radius: 50%; pointer-events: none; z-index: 0;
	background: radial-gradient(circle, rgba(232, 93, 74, .18) 0%, transparent 70%);
}

/* header */
.bed-fs__header {
	position: relative; z-index: 1;
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
	padding: 28px 32px 16px;
}
.bed-fs__title-block { display: flex; flex-direction: column; gap: 4px; }
.bed-fs__eyebrow {
	font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase;
	color: var(--bed-fs-title, #fff); opacity: .7;
}
.bed-fs .bed-fs__title {
	display: flex; align-items: center; gap: 10px; margin: 0;
	font-family: var(--bed-font-heading); font-size: 40px; font-weight: 900; font-style: italic;
	letter-spacing: -.02em; line-height: 1; text-transform: none;
	color: var(--bed-fs-title, #fff);
}
.bed-fs .bed-fs__title a { color: inherit; text-decoration: none; }
.bed-fs .bed-fs__title a:hover { opacity: .85; color: inherit !important; }
.bed-fs__bolt {
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 32px; height: 32px; border-radius: 8px; font-size: 18px; font-style: normal; line-height: 1;
	background: var(--bed-flash-process, var(--bed-secondary));
}
.bed-fs__timer-block { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* countdown trong khối: ô kính mờ */
.bed-fs { --bed-ctd-bg: rgba(255, 255, 255, .1); --bed-ctd-color: #fff; }
.bed-fs .bed-countdown { width: auto; }
@media (max-width: 767px) { .bed-fs .bed-countdown { width: 100%; } }
.bed-fs .bed-countdown__label { color: var(--bed-fs-title, #fff); opacity: .7; font-size: 14px; line-height: inherit; }
.bed-fs .bed-ctd { gap: 8px; }
.bed-fs .bed-ctd__item {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	box-sizing: border-box; width: 54px; min-width: 52px; height: 52px; padding: 0;
	border-radius: 10px; border: 1px solid rgba(255, 255, 255, .15);
	background: var(--bed-ctd-bg); color: var(--bed-ctd-color);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@media (min-width: 768px) { .bed-fs .bed-ctd__item { width: 62px; min-width: 56px; height: 56px; } }
.bed-fs .bed-ctd__num { margin-top: 2px; font-size: 20px; }
@media (min-width: 768px) { .bed-fs .bed-ctd__num { font-size: 24px; } }
.bed-fs .bed-ctd__item > span {
	display: block; margin-top: 2px; font-size: 11px; font-weight: 500; line-height: 1;
	color: var(--bed-ctd-color); opacity: .6; text-transform: capitalize;
}
.bed-fs .bed-ctd__dot { font-size: 20px; font-weight: 600; color: var(--bed-fs-title, #fff); opacity: .85; }

.bed-fs__divider {
	position: relative; z-index: 1; height: 1px; margin: 0 32px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08) 30%, rgba(255, 255, 255, .08) 70%, transparent);
}

/* sản phẩm */
.bed-fs__products { position: relative; z-index: 1; padding: 20px 24px 28px; }
.bed-fs__track { margin: 0; overflow-x: clip; } /* khung cắt (= .embla__viewport) */
.bed-fs__slider { margin-left: -8px; --bed-slider-bleed: 8px; } /* như mẫu: container Embla lệch -8px ở mọi cỡ → thẻ đầu cách mép khung 8px, thẻ cuối sát mép phải */
.bed-fs .bed-fs__item { box-sizing: border-box; width: 57%; padding-left: 8px; }
@media (min-width: 768px)  { .bed-fs .bed-fs__item { width: 33.3333%; padding-left: 16px; } }
@media (min-width: 1024px) { .bed-fs .bed-fs__item { width: 25%; } }
.bed-fs__item .bed-card { height: 100%; color: var(--bed-fg); }
/* mũi tên/chấm: bộ chung (bed-base.css → SLIDER); chỉ đổi màu chấm cho hợp nền xanh đậm (như mẫu .section-flashsale .embla__dot) */
body.bed-theme .bed-fs .bed-slider .flickity-page-dots .dot { background: rgba(255, 255, 255, .45); }
body.bed-theme .bed-fs .bed-slider .flickity-page-dots .dot.is-selected { background: var(--bed-fs-title, #fff); }
/* trạng thái chương trình */
.bed-flashsale.is-not-started .bed-stock, .bed-flashsale.is-ended .bed-stock { display: none; }

/* tablet */
@media (max-width: 1023px) {
	.bed-fs__header { padding: 24px 20px 16px; flex-direction: row; justify-content: space-between; align-items: center; }
	.bed-fs .bed-fs__title { font-size: 40px; }
	.bed-fs__timer-block {
		width: 100%; margin-top: 12px; padding-top: 16px;
		border-top: 1px solid rgba(255, 255, 255, .1);
		flex-direction: row; align-items: center; justify-content: space-between;
	}
	.bed-fs .bed-countdown__row { justify-content: flex-end; gap: 8px; }
	.bed-fs .bed-countdown__label { text-align: left; font-size: 11px; line-height: 1.3; max-width: 120px; }
}
/* mobile */
@media (max-width: 767px) {
	.bed-fs__header { padding: 20px 16px 12px; flex-direction: column; align-items: center; text-align: center; }
	.bed-fs .bed-fs__title { font-size: 28px; justify-content: center; }
	.bed-fs__timer-block { align-items: center; justify-content: center; gap: 12px; }
	.bed-fs .bed-countdown__row { flex-direction: column; justify-content: center; gap: 12px; width: 100%; }
	.bed-fs .bed-countdown__label { text-align: center; font-size: 12px; max-width: none; margin-bottom: 4px; }
	.bed-fs__products { padding: 12px 12px 20px; }
	.bed-fs .bed-ctd__item { min-width: 52px; height: 52px; }
}