/* ==========================================================================
   TOSHIKO UI · CSS dùng chung (mobile-first, không cần build)
   1. Token  2. Nền tảng  3. Tiện ích  4. Nút, nhãn, form  5. Khung trang
   6. Thành phần  7. Trang chủ  8. Danh mục  9. Sản phẩm  10. Tin tức
   11. Giỏ hàng  12. Showroom
   Breakpoint: 768px (tablet), 1080px (desktop)
   ========================================================================== */

/* 1. TOKEN ---------------------------------------------------------------- */
:root {
  --ink: #2A1657;          /* chữ chính, nền đậm */
  --ink-2: #3D3654;        /* chữ phụ đậm */
  --muted: #5B5670;        /* chữ phụ (đạt tương phản 4.5:1 trên nền trắng) */
  --purple: #4C2A92;       /* màu thương hiệu */
  --purple-dark: #1E1140;  /* footer */
  --lav: #F1ECFC;          /* nền tím nhạt */
  --lav-2: #F3F1F8;
  --line: #E3DCF3;
  --line-2: #D9CFF2;
  --ground: #F7F6FA;
  --white: #ffffff;
  --cta: #FFC629;          /* nút hành động chính */
  --red: #C8102E;          /* giá, % giảm */
  --green: #1B6B3A;        /* đã xác thực, tiết kiệm */
  --star: #E8A100;
  --font-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Bricolage Grotesque', 'Be Vietnam Pro', system-ui, sans-serif;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --container: 1320px;      /* bề rộng khung nội dung trên desktop (trước là 1200px) */
  --gutter: 16px;
}

/* 2. NỀN TẢNG -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--ink); background: var(--ground); }
img { max-width: 100%; height: auto; display: block; }
@media (min-width: 1080px) { body { font-size: 16px; } }
a { color: var(--purple); text-decoration: none; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
address { font-style: normal; }
table { border-collapse: collapse; }

/* 3. TIỆN ÍCH -------------------------------------------------------------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--ink); color: #fff; border-radius: 8px; }
.skip-link:focus { top: 8px; color: #fff; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.accent { color: var(--purple); font-weight: 600; }
.h-display { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
.h1 { font-size: clamp(23px, 4vw, 40px); font-weight: 800; }
.h2 { font-size: clamp(19px, 3vw, 32px); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--purple); }
.icon { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon--fill { fill: var(--star); stroke: none; }
.verified { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-weight: 600; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; min-height: 44px; white-space: nowrap; }
.only-desktop { display: none; }
@media (min-width: 1080px) { .link-arrow { gap: 8px; font-size: 15px; } .only-desktop { display: inline; } .only-mobile { display: none; } }
.ph { display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; min-height: 120px; border-radius: var(--radius-sm); background: var(--lav-2); border: 1px dashed #B9AEDA; font-size: 12px; font-weight: 600; color: var(--muted); }

/* Khung lưới 1 cột trên mobile: cột co được (minmax(0,1fr)) để nội dung dài không đẩy tràn ngang màn hình 360px */
.cart, .stores, .listing, .finder__in, .pdp__in, .specs, .reviews, .article, .guide, .featured, .cta-band, .banner-pair { grid-template-columns: minmax(0, 1fr); }
.cart > *, .stores > *, .listing > *, .finder__in > *, .pdp__in > *, .specs > *, .reviews > *, .article > *, .guide > *, .featured > *, .grid > * { min-width: 0; }

.section { padding-block: 28px; }
.section--tight { padding-block: 18px; }
.section--white { background: var(--white); }
.section--lav { background: var(--lav); }
.section--ink { background: var(--ink); color: #fff; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.section-head__text { min-width: 0; }
.section-head__link { flex: none; }
.section-head__sub { margin-top: 4px; font-size: 13px; color: var(--muted); }
@media (min-width: 1080px) { .section { padding-block: 56px; } .section--tight { padding-block: 32px; } .section-head { align-items: flex-end; margin-bottom: 28px; } .section-head__sub { margin-top: 6px; font-size: 15px; } }

.grid { display: grid; gap: 16px; }
.grid--3 { grid-template-columns: 1fr; }
.grid--products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grid--articles { grid-template-columns: 1fr; gap: 28px; }
.grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.home-bands { margin-bottom: 12px; }
.home-bands .pill { min-height: 38px; padding: 0 12px; font-size: 13px; }
@media (min-width: 768px) { .grid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .grid--articles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1080px) { .grid--home { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .home-bands { margin-bottom: 20px; } .home-bands .pill { min-height: 40px; font-size: 14px; } .grid--articles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; } }

/* Dải cuộn ngang trên mobile: nằm GỌN trong lề trang (thẳng hàng với tiêu đề khối), hiện 2 thẻ + hé thẻ thứ 3, ẩn thanh cuộn.
   Trên desktop thành lưới. */
.scroller { display: grid; grid-auto-flow: column; grid-auto-columns: 45%; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; border-radius: 12px; }
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; }
.scroller--3 { grid-auto-columns: 84%; }
@media (min-width: 768px) { .scroller { grid-auto-columns: 30%; } .scroller--3 { grid-auto-columns: 46%; } }
@media (min-width: 1080px) {
  .scroller { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; gap: 24px; border-radius: 0; }
  .scroller--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .scroller--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 4. NÚT, NHÃN, FORM ------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center; white-space: nowrap; transition: filter .15s; }
.btn:hover { filter: brightness(.95); }
.btn--sm { min-height: 44px; padding: 0 14px; font-size: 13px; }
.btn--lg { min-height: 52px; padding: 0 24px; font-size: 16px; border-radius: 12px; }
.btn--xl { min-height: 56px; padding: 0 24px; font-size: 17px; border-radius: 12px; }
.btn--cta { background: var(--cta); color: var(--ink); font-weight: 800; }
.btn--cta:hover { color: var(--ink); }
.btn--primary { background: var(--purple); color: #fff; }
.btn--primary:hover { color: #fff; }
.btn--outline { background: var(--white); border-color: var(--purple); color: var(--purple); }
.btn--soft { background: var(--lav); color: var(--ink); }
.btn--ghost-light { border-color: #fff; color: #fff; background: transparent; }
.btn--ghost-light:hover { color: #fff; }
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--purple); }
.icon-btn--outline { border: 1px solid var(--purple); width: 52px; height: 52px; }
.icon-btn__count { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }

.badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.2; }
.badge--sale { background: var(--red); color: #fff; }
.badge--perk { background: var(--purple); color: #fff; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; background: var(--lav-2); font-size: 12px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.chip--lg { font-size: 13px; padding: 5px 10px; }
.chip--active { min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--lav); font-size: 13px; font-weight: 600; color: var(--ink); }
.pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pill { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--line-2); font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.pill.is-active { background: var(--purple); border-color: var(--purple); color: #fff; }
.pills__sep { flex: none; align-self: center; width: 1px; height: 24px; margin-inline: 4px; background: var(--line-2); }
@media (min-width: 1080px) { .pills--wrap { flex-wrap: wrap; overflow: visible; gap: 6px; } .pills--wrap .pill { min-height: 40px; padding: 0 12px; } }

.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.price__now { font-size: 18px; font-weight: 800; color: var(--red); }
.price__old { font-size: 13px; color: var(--muted); }
.price--stack { flex-direction: column; align-items: flex-end; gap: 0; }
.price--xl .price__now { font-size: clamp(28px, 4vw, 36px); }
.price--xl .price__old { font-size: 16px; }
.price--xl .badge { align-self: center; }
/* Giá trên trang sản phẩm: giá, giá gốc và nhãn -% luôn nằm một dòng trên mobile (co cỡ chữ theo bề ngang) */
@media (max-width: 767px) {
  .price--xl { gap: 4px 8px; }
  .price--xl .price__opt { order: 9; }   /* ghi chú giá tuỳ chọn xuống dòng riêng, sau nhãn -% */
  .price--xl .price__now { font-size: clamp(20px, 6.8vw, 30px); white-space: nowrap; }
  .price--xl .price__old { font-size: clamp(11px, 3.5vw, 15px); white-space: nowrap; }
  .price--xl .badge { flex: none; padding: 3px 8px; font-size: 12px; }
}
.rating { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); }
.stars { display: flex; gap: 2px; }
.ticks { display: grid; gap: 8px; }
.ticks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; }
.ticks .icon { color: var(--green); stroke-width: 2.8; margin-top: 2px; }
.ticks--sm li { font-size: 14px; }

.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field select, .coupon input { color: var(--ink); width: 100%; height: 50px; padding: 0 14px; border: 1px solid #C9BDEB; border-radius: var(--radius-sm); background: var(--white); font-size: 16px; }
.field--on-dark label { color: #E6DDFB; }
.field--on-dark select { border: 0; }
.field--full { grid-column: 1 / -1; }
.check { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 14px; }
.check input, .radio input { width: 18px; height: 18px; accent-color: var(--purple); flex: none; }
.panel { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.panel__title { float: left; width: 100%; margin-bottom: 14px; font-size: 18px; font-weight: 700; }
.panel__title + * { clear: both; }
@media (min-width: 1080px) { .panel { padding: 22px; } }
.callout { display: grid; gap: 8px; padding: 18px 20px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line-2); font-size: 14px; }
.callout strong { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.callout--soft { background: var(--lav); border-color: transparent; }
.callout--strong { border: 2px solid var(--purple); font-size: 15px; }
.callout ul { display: grid; gap: 8px; font-size: 15px; }

/* 5. KHUNG TRANG ----------------------------------------------------------- */
/* Dải khuyến mãi: LUÔN 1 dòng. Chữ dài hơn màn hình thì JS thêm .is-marquee để chữ chạy ngang liên tục. */
.promo-strip { display: flex; align-items: center; justify-content: center; height: 36px; padding-inline: var(--gutter); overflow: hidden; white-space: nowrap; background: var(--ink); color: #fff; font-size: 13px; font-weight: 500; }
.promo-strip:hover, .promo-strip:focus-visible { color: #fff; }   /* cả dải là 1 link */
.promo-strip__track { display: inline-flex; flex: none; }
.promo-strip__item { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.promo-strip__link { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; border-radius: 999px; background: var(--cta); color: var(--ink); font-size: 12px; font-weight: 700; line-height: 1; transition: filter .15s; }
.promo-strip:hover .promo-strip__link { filter: brightness(.94); }
.promo-strip.is-marquee { justify-content: flex-start; padding-inline: 0; }
.promo-strip.is-marquee .promo-strip__item { padding-right: max(180px, 55vw); }   /* khoảng trống giữa hai lần chạy */
.promo-strip.is-marquee .promo-strip__track { animation: promo-marquee var(--marquee-duration, 18s) linear infinite; }
.promo-strip.is-marquee:hover .promo-strip__track, .promo-strip.is-marquee:focus-within .promo-strip__track { animation-play-state: paused; }
.promo-strip.is-scroll { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }   /* người dùng bật "giảm chuyển động": không chạy, cho vuốt ngang */
.promo-strip.is-scroll::-webkit-scrollbar { display: none; }
@keyframes promo-marquee { to { transform: translateX(-50%); } }
@media (min-width: 768px) { .promo-strip { height: 40px; font-size: 14px; } }

.logo { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: .04em; color: var(--purple); }
.logo--light { color: #fff; font-size: 26px; }
.site-header { position: relative; z-index: 20; background: var(--white); border-bottom: 1px solid var(--line); }
.site-header__top { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo actions" "search search"; align-items: center; gap: 8px 12px; padding-block: 8px 12px; }
.site-header .logo { grid-area: logo; }
.site-header__actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.search { grid-area: search; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 12px; background: var(--lav-2); color: var(--muted); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--ink); }  /* 16px: iOS không tự phóng to khi chạm vào ô */
.header-call { display: none; border-radius: 999px; padding: 0 12px; }   /* mobile: ẩn, vì thanh cố định ở đáy đã có nút "Gọi ngay" */

.header-call__txt, .header-warranty { display: none; }
.site-nav { display: none; border-top: 1px solid var(--line); }
.site-nav.is-open { display: block; }
.site-nav__list a, .site-nav__stores { display: flex; align-items: center; gap: 8px; white-space: nowrap; min-height: 48px; font-size: 15px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }
.site-nav__stores { color: var(--purple); font-weight: 700; border-bottom: 0; }
.site-nav__list a.is-active { color: var(--purple); }
/* Mobile: header dính đầu màn hình, ẩn khi lướt xuống, hiện lại khi lướt lên (toshiko.js gắn .is-hidden / .is-stuck, --hdr-h) */
@media (max-width: 1079px) {
  .site-header { position: sticky; top: 0; transition: transform .25s ease, box-shadow .25s; }
  .site-header.is-stuck { box-shadow: 0 4px 16px rgba(30, 17, 64, .12); }
  .site-header.is-hidden { transform: translateY(-100%); box-shadow: none; }
  .site-nav.is-open { max-height: calc(100vh - var(--hdr-h, 120px)); max-height: calc(100dvh - var(--hdr-h, 120px)); overflow-y: auto; overscroll-behavior: contain; }
  .subnav { transition: top .25s ease; }
  .hdr-shown .subnav { top: calc(var(--hdr-h, 0px) + 1px); }
}
@media (max-width: 1079px) and (prefers-reduced-motion: reduce) { .site-header, .subnav { transition: none; } }
@media (min-width: 1080px) {
  .logo { font-size: 30px; }
  .site-header__top { grid-template-columns: auto 1fr auto; grid-template-areas: "logo search actions"; gap: 32px; min-height: 80px; padding-block: 0; }
  .site-header__actions { gap: 24px; }
  .search { height: 48px; border: 1px solid var(--line); }
  .header-call { display: inline-flex; border-radius: 12px; min-height: 48px; padding: 0 18px; }
  .header-call__txt { display: grid; line-height: 1.2; text-align: left; }
  .header-call__txt small { font-size: 12px; font-weight: 600; }
  .header-call__txt strong { font-size: 17px; font-weight: 800; }
  .header-call__short, .nav-toggle { display: none; }
  .header-warranty { display: grid; line-height: 1.3; color: var(--ink); }
  .header-warranty small { font-size: 12px; color: var(--muted); }
  .header-warranty strong { font-size: 15px; }
  .site-header .icon-btn { border: 1px solid var(--line); width: 48px; height: 48px; }
  .site-nav { display: block; border-top: 0; }
  .site-nav__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 52px; }
  .site-nav__list { display: flex; gap: 20px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .site-nav__list::-webkit-scrollbar { display: none; }
  .site-nav__stores { flex: none; }
  .site-nav__list a, .site-nav__stores { min-height: 52px; border-bottom: 3px solid transparent; }
  .site-nav__list a.is-active { border-bottom-color: var(--purple); }
}

.crumbs { background: var(--white); font-size: 13px; }
.crumbs__list { display: flex; align-items: center; gap: 8px; min-height: 44px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.crumbs__list li + li::before { content: "/"; margin-right: 8px; color: var(--muted); }
.crumbs__list span { color: var(--muted); }
.crumbs__list a { font-weight: 500; }
@media (min-width: 1080px) { .crumbs { font-size: 14px; } .crumbs__list { min-height: 48px; } }

.page-head { padding-block: 12px 20px; background: var(--white); border-bottom: 1px solid var(--line); }
.page-head .container { display: grid; gap: 12px; }
.page-head .container > * { min-width: 0; }
.page-head__intro { font-size: 15px; color: var(--ink-2); }
@media (min-width: 1080px) { .page-head { padding-block: 20px 28px; } .page-head__intro { font-size: 16px; } }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.pagination__item { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--radius-sm); background: var(--white); border: 1px solid var(--line-2); font-size: 15px; font-weight: 700; color: var(--ink); }
.pagination__item.is-active { background: var(--purple); border-color: var(--purple); color: #fff; }

/* FOOTER: dải liên hệ -> lưới thương hiệu / 2 menu / thanh toán -> dòng cuối copyright + BCT, DMCA */
.site-footer { position: relative; overflow: hidden; background: radial-gradient(90% 60% at 100% 0%, rgba(124, 82, 214, .28), transparent 60%), radial-gradient(70% 50% at 0% 100%, rgba(255, 198, 41, .07), transparent 60%), var(--purple-dark); color: #fff; padding-block: 28px 96px; }
.site-footer a { color: #fff; }
.site-footer__title { margin-bottom: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #B9AAE6; }

/* 1. Dải liên hệ: thẻ kính mờ, hotline nổi bật */
.fcontact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: rgba(255, 255, 255, .05); }
.fcontact__item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); transition: background .2s; }
.fcontact__item:hover { background: rgba(255, 255, 255, .1); }
.fcontact__item--main { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(255, 198, 41, .16), rgba(255, 198, 41, .04)); }
.fcontact__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #E6DDFB; }
.fcontact__item--main .fcontact__icon { width: 44px; height: 44px; background: var(--cta); color: var(--ink); }
.fcontact__text { display: grid; min-width: 0; }
.fcontact__text small { overflow: hidden; font-size: 12px; color: #B9AAE6; white-space: nowrap; text-overflow: ellipsis; }
.fcontact__text strong { font-size: 15px; font-weight: 800; line-height: 1.25; white-space: nowrap; }
.fcontact__item--main strong { font-family: var(--font-display); font-size: 24px; letter-spacing: -0.01em; color: var(--cta); }
.fcontact__zalo { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 12px; background: #0068FF; font-size: 14px; font-weight: 700; color: #fff; transition: filter .15s; }
.fcontact__zalo:hover { filter: brightness(1.1); color: #fff; }

/* 2. Lưới: thương hiệu | Chính sách | Về Toshiko | Thanh toán */
.site-footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; margin-top: 28px; }
.site-footer__brand, .site-footer__pay { grid-column: 1 / -1; }
.site-footer__info { display: grid; gap: 8px; margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: #D9CEF7; }
.site-footer__info li { display: flex; align-items: flex-start; gap: 10px; }
.site-footer__info .icon { flex: none; margin-top: 2px; color: #9D8BDB; }
.site-footer__menu li a { display: flex; align-items: center; min-height: 34px; padding-block: 4px; font-size: 14px; line-height: 1.3; color: #D9CEF7; transition: color .15s; }
.site-footer__menu li a:hover { color: var(--cta); }
.site-footer__social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sicon { display: block; fill: currentColor; }
.site-footer .sbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; background: rgba(255, 255, 255, .06); color: #fff; font-weight: 800; transition: background .15s, border-color .15s, transform .15s; }
.sbtn:hover { color: #fff; transform: translateY(-2px); border-color: transparent; background: rgba(255, 255, 255, .2); }
.sbtn--facebook:hover { background: #1877F2; } .sbtn--youtube:hover { background: #FF0000; } .sbtn--instagram:hover { background: #E4405F; }
.sbtn--tiktok:hover, .sbtn--twitter:hover { background: #000; } .sbtn--pinterest:hover { background: #E60023; }
/* Thanh toán: các ô bằng nhau (2 cột mobile / desktop, 3 cột tablet), biểu tượng tròn + tên */
.paylist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.payitem { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 36px; padding: 4px 10px 4px 4px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; background: rgba(255, 255, 255, .05); font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; }
.payitem__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 198, 41, .14); color: var(--cta); }
.payitem__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.site-footer__pay-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 13px; font-weight: 600; color: #D9CEF7 !important; }
.site-footer__pay-link:hover { color: var(--cta) !important; }

/* Được tìm kiếm nhiều nhất: viên từ khoá tự xuống dòng */
.site-footer__popular { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchips a { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; font-size: 13px; line-height: 1.3; color: #D9CEF7; transition: color .15s, border-color .15s, background .15s; }
.fchips a:hover { border-color: var(--cta); background: rgba(255, 198, 41, .08); color: var(--cta); }

/* 3. Dòng cuối */
.site-footer__bottom { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); }
.site-footer__legal { margin: 0; font-size: 13px; color: #B9AAE6; }
.site-footer__cert { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; }   /* BCT + DMCA luôn cùng 1 hàng */
.site-footer__cert a { flex: none; }
.site-footer__cert img { width: auto; max-width: none; height: 40px; }
.site-footer__cert a + a img { height: 24px; }   /* DMCA */

/* Mobile (< 768px): một thang chữ + khoảng cách thống nhất cho cả footer.
   Chữ: tiêu đề 11.5 in hoa · nội dung 13 · link 14 · nhãn nhỏ 11.5 · hotline 22 · số khác 15.
   Khoảng cách: 24 giữa các khối, 12 trong khối, 6–8 giữa các mục; vùng bấm >= 32–36px. */
@media (max-width: 767px) {
  .site-footer { padding-block: 24px 92px; }
  .site-footer__title { margin-bottom: 8px; font-size: 11.5px; letter-spacing: .1em; }

  .fcontact { gap: 6px; padding: 6px; border-radius: 16px; }
  .fcontact__item { gap: 10px; padding: 10px 12px; border-radius: 11px; }
  .fcontact__item--main .fcontact__icon { width: 40px; height: 40px; }
  .fcontact__text small { font-size: 11.5px; }
  .fcontact__item--main strong { font-size: 22px; }
  /* 2 ô Bảo hành / Khiếu nại đứng cạnh nhau: bỏ biểu tượng để số điện thoại không tràn */
  .fcontact__item:not(.fcontact__item--main) .fcontact__icon { display: none; }
  .fcontact__item:not(.fcontact__item--main) strong { font-size: 15px; }
  .fcontact__zalo { min-height: 44px; border-radius: 11px; font-size: 14px; }

  .site-footer__grid { gap: 24px 16px; margin-top: 24px; }
  .site-footer__brand .logo--light { font-size: 22px; }
  .site-footer__info { gap: 6px; margin-top: 10px; font-size: 13px; }
  .site-footer__info li { gap: 8px; }
  .site-footer__social { gap: 8px; margin-top: 14px; }
  .site-footer .sbtn { width: 36px; height: 36px; border-radius: 10px; }
  .site-footer__menu .site-footer__title { margin-bottom: 2px; }
  .site-footer__menu li a { min-height: 36px; padding-block: 0; font-size: 14px; }

  .paylist { gap: 6px; }
  .payitem { gap: 6px; min-height: 34px; padding: 3px 8px 3px 3px; border-radius: 9px; font-size: 12.5px; }
  .payitem__icon { width: 26px; height: 26px; border-radius: 7px; }
  .site-footer__pay-link { margin-top: 10px; font-size: 12.5px; }

  .site-footer__popular { margin-top: 24px; padding-top: 20px; }
  .fchips { gap: 6px; }
  .fchips a { min-height: 32px; padding: 5px 12px; font-size: 12.5px; }

  .site-footer__bottom { align-items: center; gap: 12px; margin-top: 20px; padding-top: 16px; text-align: center; }
  .site-footer__legal { font-size: 12px; }
  .site-footer__cert img { height: 36px; }
  .site-footer__cert a + a img { height: 22px; }
}
@media (min-width: 768px) {
  .fcontact { grid-template-columns: 1.5fr 1fr 1fr; }
  .fcontact__item--main { grid-column: auto; }
  .fcontact__zalo { grid-column: 1 / -1; }
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__pay { grid-column: auto; }
  .paylist { grid-template-columns: minmax(0, 1fr); }
  .site-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 1080px) {
  .site-footer { padding-block: 40px 28px; }
  .fcontact { grid-template-columns: 1.6fr 1fr 1fr auto; align-items: stretch; padding: 10px; border-radius: var(--radius-lg); }
  .fcontact__item { padding: 12px 16px; }
  .fcontact__zalo { grid-column: auto; padding-inline: 22px; }
  .fcontact__item--main strong { font-size: 26px; }
  .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px; margin-top: 40px; }
  .site-footer__brand, .site-footer__pay { grid-column: auto; }
  .paylist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__bottom { margin-top: 36px; }
}

.sticky-bar, .buybar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--white); border-top: 1px solid var(--line); }
/* Thanh liên hệ đáy: cố định, gọn ~57px (nút 44px, vẫn đủ chuẩn chạm) */
.sticky-bar { gap: 6px; padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -4px 16px rgba(30, 17, 64, .08); }
.sticky-bar .btn { flex: 1 1 0; min-width: 0; min-height: 44px; border-radius: 12px; padding: 0 4px; gap: 5px; font-size: 13px; }
.sticky-bar .icon { width: 16px; height: 16px; }
.buybar { align-items: center; gap: 10px; }
.buybar__price { display: grid; line-height: 1.25; }
.buybar__price strong { font-size: 17px; font-weight: 800; color: var(--red); }
.buybar__price small { font-size: 12px; color: var(--muted); }
.buybar .btn--cta { flex: 1; min-height: 52px; font-size: 16px; border-radius: 12px; }
@media (min-width: 1080px) { .sticky-bar, .buybar { display: none; } }

@media (min-width: 1080px) and (max-width: 1279px) { .site-nav__list { gap: 16px; } .site-nav__list a, .site-nav__stores { font-size: 14px; } }

/* 6. THÀNH PHẦN ------------------------------------------------------------ */
.pcard { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--white); transition: border-color .15s, box-shadow .15s; }
.pcard:hover { border-color: #B9AEDA; box-shadow: 0 4px 16px rgba(42, 22, 87, .08); }
.pcard__media img { width: 100%; aspect-ratio: 7 / 6; object-fit: contain; }   /* ảnh rộng hết thẻ, không còn lề trong */
.pcard__badges { display: flex; justify-content: space-between; align-items: center; gap: 4px; min-height: 30px; padding: 8px 6px 2px; }   /* hàng riêng, KHÔNG đè lên ảnh */
.pcard .badge { font-size: 11px; padding: 2px 7px; white-space: nowrap; }   /* "Trả góp 0%" không bị rớt dòng (thẻ ~160px trên mobile, máy Samsung cỡ chữ mặc định lớn) */
.pcard .badge--sale { flex: none; }
.pcard .badge--perk { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pcard__body { display: flex; flex-direction: column; gap: 5px; flex: 1; padding: 2px 10px 12px; }
.pcard__name { font-size: 13px; font-weight: 600; line-height: 1.4; min-height: 2.8em; }
.pcard__link { color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* cả thẻ bấm được */
.pcard__chips { height: 21px; overflow: hidden; }
.pcard .chip { font-size: 11px; padding: 3px 6px; }
.pcard .price { gap: 0 6px; }
.pcard .price__now { font-size: 16px; }
.pcard .price__old { font-size: 12px; }
.pcard__meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; min-height: 18px; font-size: 11px; line-height: 1.3; white-space: nowrap; }   /* đánh giá + đã bán: LUÔN 1 dòng */
.pcard__meta .rating { flex: none; gap: 3px; }
.pcard__sold { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
@media (min-width: 768px) { .pcard__meta { gap: 8px; font-size: 12.5px; } }
.pcard__compare { position: relative; z-index: 2; display: none; align-items: center; gap: 4px; align-self: flex-start; min-height: 32px; padding: 0; border: 0; background: transparent; font-size: 13px; font-weight: 600; color: var(--purple); }
@media (min-width: 1080px) {
  .pcard { border-radius: var(--radius); }
  .pcard__badges { min-height: 40px; padding: 12px 12px 2px; }
  .pcard .badge { font-size: 13px; padding: 4px 10px; }
  .pcard__body { gap: 8px; padding: 4px 16px 16px; }
  .pcard__name { font-size: 15px; }
  .pcard__chips { height: 26px; }
  .pcard .chip { font-size: 12px; padding: 4px 8px; }
  .pcard .price { gap: 2px 8px; }
  .pcard .price__now { font-size: 21px; }
  .pcard .price__old { font-size: 13px; }
  .pcard__meta { font-size: 13px; }
  .pcard__compare { display: inline-flex; }
}

.acard { display: grid; gap: 10px; align-content: start; }
.acard__media { display: block; border-radius: 12px; overflow: hidden; }
.acard__media img, .acard__media .ph { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; min-height: 0; }
.acard__title { font-size: 18px; line-height: 1.35; }
.acard__title a { color: var(--ink); }
.acard__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--muted); }
.acard--lg .acard__title { font-size: clamp(20px, 3vw, 28px); font-family: var(--font-display); }
.acard--sm .acard__title { font-size: 16px; }
.acard--sm .acard__media .ph, .acard--sm .acard__media img { aspect-ratio: 3 / 1; }

/* Thẻ showroom: ảnh ngang 4:3 bên trái + cột thông tin (biểu tượng thẳng hàng); hàng nút chia đều dưới đường kẻ */
.scard { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); transition: border-color .15s, box-shadow .15s; }
.scard:hover { border-color: #B9AEDA; box-shadow: 0 4px 16px rgba(42, 22, 87, .08); }
.scard.is-nearest { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple); }   /* viền đậm không làm xô thẻ */
.scard__body { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; }
.scard__thumb { display: grid; place-items: center; width: 96px; height: 72px; overflow: hidden; border-radius: 10px; background: var(--lav-2); color: #B9AEDA; }
.scard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.scard__main { display: grid; gap: 2px; min-width: 0; }
.scard__main .eyebrow { font-size: 11px; }
.scard__name { font-size: 16px; line-height: 1.35; }
.scard__name a { color: var(--ink); }
.scard__name a:hover { color: var(--purple); }
.scard__info { display: grid; gap: 6px; margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.scard__info li { display: flex; align-items: flex-start; gap: 8px; }
.scard__info .icon { flex: none; margin-top: 2px; color: var(--purple); }
.scard__info address { font-style: normal; }
.scard__phone { color: inherit; }
.scard__fact { font-size: 13px; color: var(--muted); }
.scard__actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.scard__actions .btn { min-height: 42px; padding: 0 8px; font-size: 14px; }
.scard__map { display: none; }   /* mobile: bản đồ nằm dưới danh sách, chỉ còn Chỉ đường + Chi tiết */
@media (min-width: 1080px) {
  .scard { padding: 18px; }
  .scard__body { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
  .scard__thumb { width: 120px; height: 90px; }
  .scard__name { font-size: 17px; }
  .scard__map { display: inline-flex; }
}

.rcard { display: grid; gap: 12px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.rcard__img { width: 100%; height: 150px; object-fit: cover; border-radius: var(--radius-sm); }
.rcard__text { font-size: 15px; }
.rcard__meta { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.rcard__meta strong { color: var(--ink); }

.cmp-wrap { overflow-x: auto; }
.cmp { width: 100%; min-width: 640px; table-layout: fixed; }
.cmp thead th { padding: 14px 12px; vertical-align: bottom; text-align: center; font-size: 15px; border-radius: var(--radius) var(--radius) 0 0; }
.cmp thead img { width: 140px; margin: 6px auto; }
.cmp thead a { color: var(--ink); }
.cmp thead td { width: 28%; }
.cmp tbody th { padding: 12px 12px 12px 0; text-align: left; font-size: 14px; font-weight: 600; color: var(--muted); border-top: 1px solid var(--line); }
.cmp tbody td { padding: 12px; text-align: center; font-size: 15px; border-top: 1px solid var(--line); }
.cmp .is-current { background: var(--lav); }
.cmp__price { font-size: 17px !important; font-weight: 800; color: var(--red); }
.cmp__tag { font-size: 12px; }
@media (min-width: 1080px) { .cmp thead td { width: 220px; } }

.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding-block: 10px; font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon { color: var(--purple); transition: transform .2s; }
.faq__item[open] summary .icon { transform: rotate(45deg); }
.faq__a { padding: 0 0 18px; max-width: 820px; font-size: 15px; color: var(--ink-2); }

/* 7. TRANG CHỦ ------------------------------------------------------------- */
/* HERO = slider banner CHỈ ẢNH. Nền tảng là scroll-snap (vuốt được cả khi không có JS); JS thêm mũi tên, chấm, tự chuyển. */
.hero { padding-block: 12px 4px; }   /* không nền: banner nằm trực tiếp trên nền trang */
.hslider { position: relative; }
.hslider__track { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: 16px; }
.hslider__track::-webkit-scrollbar { display: none; }
.hslider__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
@media (prefers-reduced-motion: reduce) { .hslider__track { scroll-behavior: auto; } }
.hbanner { display: block; background: var(--lav); }
.hbanner img { display: block; width: 100%; height: auto; }   /* tỉ lệ theo width/height của <source> đang dùng (ảnh PC / tablet / mobile) */
.hslider__nav { display: none; position: absolute; top: calc(50% - 18px); z-index: 2; width: 44px; height: 44px; margin-top: -22px; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: var(--white); color: var(--ink); box-shadow: 0 2px 10px rgba(30, 17, 64, .25); }
.hslider__nav--prev { left: 12px; }
.hslider__nav--prev .icon { transform: rotate(180deg); }
.hslider__nav--next { right: 12px; }
/* Thanh chấm + nút tạm dừng nằm DƯỚI ảnh (không che banner / ảnh), căn giữa */
.hslider__bar { display: flex; align-items: center; gap: 2px; width: max-content; margin: 8px auto 0; }
/* Nhiều ảnh (vd 15+ ảnh sản phẩm): thanh chấm không vượt khung, dải chấm cuộn ngang, chấm đang chọn luôn nằm giữa (toshiko.js centerDot) */
.hslider__bar { max-width: calc(100% - 24px); }
.hslider__dots { position: relative; display: flex; align-items: center; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.hslider__dots::-webkit-scrollbar { display: none; }
.hslider__dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 28px; padding: 0; border: 0; background: transparent; }
@media (max-width: 767px) { .hslider__dot { width: 18px; } }
.hslider__dot::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--line-2); transition: width .2s, background .2s; }
.hslider__dot[aria-current="true"]::before { width: 20px; background: var(--purple); }
.hslider__pause { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); }
.hslider__pause[hidden] { display: none; }
@media (min-width: 768px) {
  .hslider__nav { display: inline-flex; }
}
@media (min-width: 1080px) {
  .hero { padding-block: 24px 8px; }
  .hslider__track { border-radius: var(--radius-lg); }
  .hslider__nav { width: 48px; height: 48px; margin-top: -24px; }
  .hslider__nav--prev { left: 20px; } .hslider__nav--next { right: 20px; }
  .hslider__bar { margin-top: 10px; }
}

.press { background: var(--white); border-bottom: 1px solid var(--line); padding-block: 14px; }
.press__in { display: grid; gap: 8px; }
.press__label, .press__award { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.press__award { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.press__list { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; }
.press__list { align-items: center; }
.press__list a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
/* Logo báo: cùng chiều cao, đơn sắc để dải uy tín không lấn át banner; rê chuột thì hiện màu gốc */
.press__list img { height: 24px; width: auto; max-width: 132px; object-fit: contain; filter: grayscale(1); opacity: .78; transition: filter .15s, opacity .15s; }
.press__list a:hover img, .press__list a:focus-visible img { filter: none; opacity: 1; }
@media (min-width: 1080px) {
  .press { padding-block: 24px; }
  .press__in { grid-template-columns: 120px 1fr auto; align-items: center; gap: 32px; }
  .press__list { gap: 32px; justify-content: safe center; } .press__list a { font-size: 18px; } .press__list img { height: 28px; }
  .press__award { padding: 8px 14px; border-radius: 999px; background: var(--lav); font-size: 13px; letter-spacing: 0; text-transform: none; }
  .press__award .icon { color: var(--purple); }
}

/* Ô danh mục: thẻ dọc canh giữa, nền tím nhạt; ảnh sản phẩm nền trắng hoà vào nền thẻ nhờ mix-blend-mode */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Thẻ danh mục: sân khấu ảnh nền gradient + bóng đổ dưới sản phẩm, chữ căn trái, nút mũi tên tròn ở góc */
.tile { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--white); color: var(--ink); isolation: isolate; transition: border-color .25s, transform .25s, box-shadow .25s; }
.tile:hover { color: var(--ink); border-color: var(--line-2); transform: translateY(-3px); box-shadow: 0 14px 32px -12px rgba(42, 22, 87, .22); }
.tile__img { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; padding: 12% 12% 14%; background: radial-gradient(120% 90% at 50% 18%, #FFFFFF 0%, #F4EFFE 48%, #E9E0FB 100%); }
.tile__img::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 11%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(42, 22, 87, .22), transparent); z-index: 0; transition: transform .3s, opacity .3s; }
.tile__img img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(42, 22, 87, .12)); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.tile:hover .tile__img img { transform: translateY(-6px) scale(1.04); }
.tile:hover .tile__img::after { transform: scaleX(.85); opacity: .7; }
.tile__body { display: grid; gap: 2px; padding: 10px 12px 12px; border-top: 1px solid var(--lav-2); }
.tile__name { font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--ink); }
/* "Từ" + giá luôn cùng 1 dòng */
.tile__from { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; font-size: 12px; font-weight: 500; color: var(--muted); }
.tile__price { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--red); letter-spacing: -0.01em; }
/* Dưới 1080px thẻ hẹp: nút mũi tên nằm góc trên phải khung ảnh để phần chữ dùng hết bề rộng */
.tile__go { position: absolute; z-index: 2; right: 8px; top: 8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--purple); box-shadow: 0 2px 6px rgba(42, 22, 87, .12); transition: background .25s, color .25s, transform .25s; }
.tile:hover .tile__go { background: var(--purple); color: #fff; transform: translateX(2px); }
@media (max-width: 359px) { .tile__body { padding-inline: 10px; } .tile__from { font-size: 11px; gap: 3px; } .tile__price { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .tile, .tile__img img, .tile__img::after, .tile__go { transition: none; } .tile:hover, .tile:hover .tile__img img, .tile:hover .tile__go { transform: none; } }
@media (min-width: 768px) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .tile__img { aspect-ratio: 5 / 4; padding: 10% 14% 12%; }
}
@media (min-width: 1080px) {
  .tiles { gap: 24px; }
  .tile { border-radius: var(--radius-lg); }
  .tile__body { position: relative; gap: 4px; padding: 16px 64px 18px 20px; }
  .tile__name { font-size: 20px; }
  .tile__from { font-size: 14px; }
  .tile__price { font-size: 20px; }
  .tile__go { right: 18px; top: 50%; width: 38px; height: 38px; margin-top: -19px; background: var(--lav); box-shadow: none; }
}

.banner-pair { display: grid; gap: 12px; }
.banner { display: flex; gap: 12px; padding: 18px; border-radius: 18px; color: var(--ink); }
.banner:hover { color: var(--ink); }
.banner__copy { display: grid; gap: 8px; align-content: start; justify-items: start; }
.banner__img { display: flex; align-items: center; justify-content: center; flex: none; border-radius: 14px; background: var(--white); overflow: hidden; }
.banner--main { flex-direction: column; background: var(--cta); }
.banner--main .eyebrow { color: var(--ink); }
.banner--main .banner__title { font-size: clamp(25px, 3.4vw, 38px); font-weight: 800; }
.banner--main .banner__text { font-size: 13px; }
.banner--main .banner__img { align-self: flex-end; width: 126px; margin-top: -56px; }
.banner--main .btn { min-height: 48px; margin-top: 4px; }
.banner--side { align-items: center; justify-content: space-between; background: var(--ink); color: #fff; }
.banner--side:hover { color: #fff; }
.banner--side .eyebrow { color: #E6DDFB; }
.banner--side .banner__title { font-size: 18px; }
.banner--side .banner__foot .btn { display: none; }
.banner--side .banner__img { width: 112px; }
@media (min-width: 1080px) {
  .banner-pair { grid-template-columns: 2fr 1fr; gap: 24px; }
  .banner { min-height: 280px; border-radius: var(--radius-lg); }
  .banner--main { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; padding: 0 32px 0 40px; }
  .banner--main .banner__copy { gap: 12px; } .banner--main .banner__text { font-size: 15px; }
  .banner--main .banner__img { align-self: center; width: 272px; margin-top: 0; border-radius: 18px; }
  .banner--side { flex-direction: column; align-items: stretch; padding: 28px; }
  .banner--side .banner__title { font-size: 26px; }
  .banner--side .banner__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
  .banner--side .banner__foot .btn { display: inline-flex; }
  .banner--side .banner__img { width: 150px; }
}

.flash { padding: 14px 10px; border-radius: 18px; background: var(--purple); }
.flash__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.flash__title { font-size: clamp(22px, 3.6vw, 40px); font-weight: 800; font-style: italic; color: #fff; }
.flash__sub { font-size: 13px; font-weight: 600; color: var(--cta); }
/* Đếm ngược: chỉ 4 ô Ngày / Giờ / Phút / Giây, chữ đơn vị luôn hiện dưới ô */
.countdown { display: flex; align-items: flex-start; gap: 6px; }
.countdown__box { display: grid; justify-items: center; gap: 3px; }
.countdown__box b { display: flex; align-items: center; justify-content: center; width: 36px; height: 34px; border-radius: 8px; background: var(--white); font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.countdown__box small { display: block; font-size: 10.5px; font-weight: 600; line-height: 1; color: #E6DDFB; }

@media (min-width: 1080px) {
  .flash { padding: 0 24px 24px; border-radius: 24px; }
  .flash__head { min-height: 112px; margin-bottom: 0; }
  .flash__head > div:first-child { display: flex; align-items: baseline; gap: 18px; }
  .flash__sub { font-size: 16px; }
  .countdown { gap: 8px; }
  .countdown__box b { width: 52px; height: 48px; font-size: 22px; border-radius: 10px; }
  .countdown__box small { font-size: 12px; }
}

.needs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.need { display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: var(--radius); background: var(--lav); color: var(--ink); font-size: 14px; }
.need__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--white); color: var(--purple); }
.need__desc, .need .link-arrow { display: none; }
@media (max-width: 1079px) { .need { justify-items: center; text-align: center; padding: 16px 10px; } }   /* mobile, tablet: icon và chữ canh giữa */
@media (min-width: 1080px) { .needs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .need { padding: 22px; border-radius: 16px; gap: 10px; } .need strong { font-size: 18px; } .need__icon { width: 44px; height: 44px; border-radius: 12px; } .need__desc { display: block; font-size: 14px; color: var(--ink-2); } .need .link-arrow { display: inline-flex; font-size: 14px; min-height: 0; margin-top: 8px; } }

.cat-row { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); color: var(--ink); }
.cat-row img { width: 38%; max-width: 168px; aspect-ratio: 7 / 6; object-fit: contain; }
.cat-row > span { display: grid; gap: 6px; font-size: 14px; }
.cat-row strong { font-size: 19px; }
.cat-row__from { font-size: 15px; font-weight: 700; color: var(--purple); }

.vmodal { width: min(960px, calc(100vw - 24px)); max-width: none; padding: 0; border: 0; border-radius: 16px; background: #000; color: #fff; overflow: visible; }
.vmodal::backdrop { background: rgba(20, 10, 45, .82); }
.vmodal__in { position: relative; }
.vmodal__frame { aspect-ratio: 16 / 9; border-radius: 16px 16px 0 0; overflow: hidden; background: #000; }
.vmodal__frame iframe, .vmodal__frame video { display: block; width: 100%; height: 100%; border: 0; }
.vmodal__title { padding: 12px 16px 14px; font-size: 14px; font-weight: 600; }
.vmodal__title:empty { display: none; }
.vmodal__close { position: absolute; top: -52px; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--white); color: var(--ink); }

/* Dải cuộn ngang có mũi tên 2 bên (Flash Sale): desktop 4 thẻ một khung nhìn, cuộn theo trang; mũi tên tự ẩn khi hết đường */
.hscroll { position: relative; }
.hscroll__nav { display: none; position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -24px; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: var(--white); color: var(--ink); box-shadow: 0 2px 12px rgba(30, 17, 64, .3); }
.hscroll__nav[disabled] { opacity: 0; pointer-events: none; }
.hscroll__nav--prev { left: -24px; } .hscroll__nav--prev .icon { transform: rotate(180deg); }
.hscroll__nav--next { right: -24px; }
@media (min-width: 1080px) {
  .hscroll__nav { display: inline-flex; }
  .flash__track.scroller { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 72px) / 4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; gap: 24px; }
  .flash__track.scroller::-webkit-scrollbar { display: none; }
  .flash__track.scroller > * { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .flash__track.scroller { scroll-behavior: auto; } }

/* Khách hàng nói gì: trình phát video lớn + danh sách video */
.vshow { display: grid; gap: 14px; }
.vshow__player { min-width: 0; }
.vshow__cover { position: relative; display: block; overflow: hidden; border-radius: 14px; background: var(--ink); }
.vshow__cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.vshow__cover iframe, .vshow__cover video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.vshow__play { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 999px; background: var(--cta); color: var(--ink); box-shadow: 0 6px 20px rgba(30, 17, 64, .35); transition: transform .2s; }
.vshow__play .icon { fill: currentColor; stroke: none; margin-left: 4px; }
.vshow__cover:hover .vshow__play { transform: scale(1.06); }
/* Mobile: nút phát nhỏ lại cho vừa khung video hẹp */
@media (max-width: 767px) { .vshow__play { width: 48px; height: 48px; margin: -24px 0 0 -24px; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); } .vshow__play .icon { width: 18px; height: 18px; margin-left: 3px; } }
.vshow__caption { margin-top: 10px; font-size: 15px; font-weight: 700; }
.vshow__list { display: grid; gap: 8px; max-height: 320px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #C9BDEB transparent; }
.vshow__item { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 12px; padding: 6px; border-radius: 12px; color: var(--ink); transition: background .15s; }
.vshow__item:hover { background: var(--lav); color: var(--ink); }
.vshow__item.is-active { background: var(--lav); }
.vshow__thumb { position: relative; display: block; border-radius: 8px; overflow: hidden; }
.vshow__thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.vshow__mini { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink); }
.vshow__mini .icon { fill: currentColor; stroke: none; margin-left: 2px; }
.vshow__title { font-size: 13.5px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vshow__item.is-active .vshow__title { color: var(--purple); }
@media (min-width: 1080px) {
  .vshow { grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
  .vshow__cover { border-radius: 18px; }
  .vshow__caption { font-size: 17px; }
  .vshow__list { max-height: 528px; }
}

/* Lời khách hàng: ảnh + tên + trích dẫn, 2 cột trên desktop */
.vquote__heading { margin: 32px 0 16px; text-align: center; font-size: clamp(19px, 3vw, 28px); }
.vquotes { display: grid; gap: 18px; }
.vquote { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0; }
.vquote__img { width: 88px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; min-height: 0; font-size: 11px; }
.vquote__body { display: grid; gap: 6px; padding-left: 14px; border-left: 3px solid var(--purple); }
.vquote__who { display: grid; line-height: 1.3; }
.vquote__who strong { font-size: 16px; }
.vquote__who span { font-size: 13px; color: var(--muted); }
.vquote__text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
@media (min-width: 768px) { .vquotes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; } .vquote { grid-template-columns: 130px minmax(0, 1fr); gap: 18px; } .vquote__img { width: 130px; } .vquote__text { font-size: 15px; } .vquote__heading { margin: 40px 0 24px; } }

/* Tab 3 miền + thẻ showroom trang chủ */
.tabs__bar { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.tabs__bar::-webkit-scrollbar { display: none; }
.tabs__tab { flex: 1 1 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--white); font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.tabs__tab.is-active { background: var(--purple); border-color: var(--purple); color: #fff; }
.tabs__nojs-title { margin: 8px 0 12px; font-size: 18px; }                        /* chỉ hiện khi KHÔNG có JS (cả 3 miền xếp dọc) */
.tabs.js-ready .tabs__panel:not(.is-active) { display: none; }
.tabs.js-ready .tabs__nojs-title { display: none; }
.tabs:not(.js-ready) .tabs__bar { display: none; }
.hstores { display: grid; gap: 14px; }   /* thẻ showroom = partials/store-card (.scard), giống /cua-hang */
.hstores > .scard[hidden] { display: none; }   /* dưới 1080px: ẩn bớt, nút "Xem thêm" (toshiko.js) */
.hstores__more { margin-top: 14px; }
.hstores__more[hidden] { display: none; }
.hstores__more-icon { transform: rotate(90deg); }   /* mũi tên chỉ xuống: mở thêm bên dưới */
.hstores.is-scroll { position: relative; align-content: start; overflow-y: auto; padding: 2px 6px 2px 2px; margin-right: -6px; scrollbar-width: thin; scrollbar-color: #C9BDEB transparent; }
.hstores__foot { display: grid; gap: 10px; margin-top: 20px; }
@media (min-width: 768px) { .hstores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .tabs__tab { flex: 0 0 auto; padding: 0 28px; } .hstores__foot { display: flex; justify-content: center; gap: 12px; } }
@media (min-width: 1080px) { .tabs__bar { justify-content: center; margin-bottom: 24px; } .hstores { gap: 20px; } .hstores__foot { margin-top: 32px; } }
/* Showroom trang chủ trên mobile (< 768px): thang chữ + khoảng cách gọn, chỉ trong #showroom (/cua-hang giữ nguyên).
   Chữ: tỉnh 10.5 · tên 15 · địa chỉ / điện thoại 13 · ghi chú 12 · nút 13.5–15. Khoảng cách: 10 giữa thẻ, 12 trong thẻ. */
@media (max-width: 767px) {
  #showroom .section-head { margin-bottom: 14px; }
  /* Tab miền: thanh chọn liền khối */
  #showroom .tabs__bar { gap: 4px; margin-bottom: 12px; padding: 4px; border-radius: 12px; background: var(--lav); }
  #showroom .tabs__tab { min-height: 38px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; font-size: 13.5px; color: var(--ink-2); }
  #showroom .tabs__tab.is-active { background: var(--purple); color: #fff; box-shadow: 0 2px 8px rgba(76, 42, 146, .25); }
  #showroom .hstores { gap: 10px; }
  #showroom .scard { gap: 12px; padding: 12px; border-radius: 14px; }
  #showroom .scard__body { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  #showroom .scard__thumb { width: 84px; height: 63px; border-radius: 9px; }
  #showroom .scard__main { gap: 1px; }
  #showroom .scard__main .eyebrow { font-size: 10.5px; }
  #showroom .scard__name { font-size: 15px; line-height: 1.3; }
  #showroom .scard__info { gap: 4px; margin-top: 6px; font-size: 13px; line-height: 18px; }
  #showroom .scard__info li { gap: 6px; }
  #showroom .scard__info .icon { width: 15px; height: 15px; margin-top: 1px; }
  #showroom .scard__fact { font-size: 12px; }
  #showroom .scard__actions { gap: 8px; padding-top: 12px; }
  #showroom .scard__actions .btn { min-height: 40px; font-size: 13.5px; border-radius: 10px; }
  /* "Xem thêm": nút phụ dạng viên thuốc nhỏ ở giữa, nền tím nhạt (không tranh với 2 nút hành động bên dưới) */
  #showroom .hstores__more { display: flex; width: auto; min-height: 40px; margin: 12px auto 0; padding: 0 18px; gap: 6px; border-color: var(--line-2); border-radius: 999px; background: var(--lav); font-size: 13.5px; }
  #showroom .hstores__more[hidden] { display: none; }
  /* 2 nút hành động đứng cạnh nhau, cao bằng nhau, nhãn ngắn */
  #showroom .hstores__foot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
  #showroom .hstores__foot .btn--lg { min-height: 44px; gap: 6px; padding: 0 10px; border-radius: 11px; font-size: 13.5px; }
  #showroom .hstores__foot .btn--lg .icon { width: 16px; height: 16px; }
}
@media (max-width: 359px) { #showroom .hstores__foot .btn--lg { gap: 4px; padding: 0 6px; font-size: 12.5px; } }

/* Popup quảng cáo: thẻ (ảnh + chữ + nút), LUÔN nằm GIỮA màn hình ở mọi kích thước. Ảnh 4:3 hiện trọn vẹn, không bị cắt. */
.adpop { width: min(400px, calc(100vw - 40px)); max-width: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: 22px; background: transparent; overflow: visible; }
.adpop::backdrop { background: rgba(20, 10, 45, .66); }
.adpop[open] { animation: adpop-in .28s cubic-bezier(.2, .8, .2, 1); }
.adpop[open]::backdrop { animation: adpop-fade .28s ease-out; }
@keyframes adpop-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes adpop-fade { from { opacity: 0; } to { opacity: 1; } }
.adpop__card { position: relative; display: flex; flex-direction: column; max-height: inherit; overflow: hidden; border-radius: 22px; background: var(--white); color: var(--ink); box-shadow: 0 24px 64px rgba(20, 10, 45, .45); }
.adpop__media { display: block; flex: none; background: var(--lav); }
.adpop__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.adpop__close { position: absolute; top: 10px; right: 10px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--ink); box-shadow: 0 2px 8px rgba(20, 10, 45, .25); }
.adpop__body { display: grid; gap: 8px; justify-items: start; padding: 16px 18px 18px; overflow-y: auto; }
.adpop__badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: var(--lav); font-size: 12px; font-weight: 700; color: var(--purple); }
.adpop__title { font-size: 20px; font-weight: 800; }
.adpop__text { font-size: 14px; color: var(--ink-2); }
.adpop__actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; width: 100%; margin-top: 6px; }
.adpop__actions .btn { min-height: 48px; }
.adpop__later { min-height: 44px; padding: 0 12px; border: 0; background: transparent; font-size: 14px; font-weight: 600; color: var(--muted); }
.adpop__later:hover { color: var(--ink); }
.adpop--image .adpop__media img { aspect-ratio: auto; }
@media (min-width: 768px) {
  .adpop { width: 440px; }
  .adpop__body { gap: 10px; padding: 22px 24px 24px; }
  .adpop__title { font-size: 26px; }
  .adpop__text { font-size: 15px; }
  .adpop__actions .btn { min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) { .adpop[open], .adpop[open]::backdrop { animation: none; } }
/* Trình duyệt cũ chưa hỗ trợ <dialog>.showModal() (một số webview trong app): JS thêm .is-fallback để popup vẫn hiện giữa màn hình */
dialog.is-fallback[open] { position: fixed; top: 50%; left: 50%; z-index: 1000; margin: 0; transform: translate(-50%, -50%); animation: none; box-shadow: 0 0 0 100vmax rgba(20, 10, 45, .7); }

/* Khối trả góp: 3 bước + bảng tính */
.pay { background: var(--ink); color: #fff; }
.pay__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.pay__copy { display: grid; gap: 14px; align-content: start; justify-items: start; }
.pay__title { color: #fff; }
.pay__text { font-size: 15px; color: #E6DDFB; max-width: 520px; }
.pay__steps { display: grid; gap: 0; width: 100%; }
.pay__steps li { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.pay__steps li:last-child { padding-bottom: 4px; }
.pay__steps li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: 2px; width: 2px; background: rgba(255, 255, 255, .22); }   /* đường nối giữa các bước */
.pay__num { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; border: 2px solid var(--cta); font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--cta); }
.pay__step { display: grid; gap: 2px; padding-top: 5px; }
.pay__step strong { font-size: 16px; }
.pay__step span { font-size: 14px; color: #E6DDFB; }
.pay__calc { display: grid; gap: 16px; padding: 18px; border-radius: var(--radius-lg); background: var(--white); color: var(--ink); }
.pay__calc-title { font-size: 17px; font-weight: 700; }
.segs { display: grid; gap: 8px; }
.segs legend { padding: 0 0 8px; font-size: 14px; font-weight: 600; }
.segs__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.seg { position: relative; display: block; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 4px; border: 1px solid #C9BDEB; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; text-align: center; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.seg input:checked + span { background: var(--purple); border-color: var(--purple); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--purple); outline-offset: 2px; }
.pay__result { display: grid; gap: 2px; padding: 16px 18px; border-radius: var(--radius); background: var(--lav); }
.pay__result-label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pay__monthly { font-size: clamp(32px, 9vw, 44px); font-weight: 800; color: var(--purple); font-variant-numeric: tabular-nums; }
.pay__detail { font-size: 13px; color: var(--ink-2); }
.pay__note { font-size: 12px; color: var(--muted); }
@media (min-width: 1080px) {
  .pay__in { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 72px; align-items: center; }
  .pay__copy { gap: 20px; }
  .pay__text { font-size: 17px; }
  .pay__steps li { padding-bottom: 22px; }
  .pay__step strong { font-size: 18px; } .pay__step span { font-size: 15px; }
  .pay__calc { padding: 28px; gap: 18px; }
  .pay__calc-title { font-size: 19px; }
}

/* 8. DANH MỤC -------------------------------------------------------------- */
.listing { display: grid; gap: 16px; }
/* Bộ lọc, mobile: ngăn kéo toàn màn hình */
.filters { display: none; position: fixed; inset: 0; z-index: 50; overflow-y: auto; padding: 16px; background: var(--white); }
.filters.is-open { display: grid; gap: 12px; align-content: start; }
.filters__head { display: flex; align-items: center; justify-content: space-between; font-size: 17px; }
.filters__groups { display: grid; gap: 8px; }
.fgroup { border-bottom: 1px solid var(--line); }
.fgroup__btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; font-size: 15px; font-weight: 700; cursor: pointer; list-style: none; }
.fgroup__btn::-webkit-details-marker { display: none; }
.fgroup__btn .icon { color: var(--purple); transition: transform .2s; }
.fgroup[open] .fgroup__btn .icon { transform: rotate(45deg); }
.fgroup__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: auto; border-radius: 999px; background: var(--purple); font-size: 12px; font-weight: 700; color: #fff; }
.fgroup__body { display: grid; gap: 2px; padding: 0 0 12px; }
.filters__helper { font-size: 12px; color: var(--muted); padding-bottom: 4px; }
.filters__actions { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; }
.filters__clear { font-size: 14px; font-weight: 600; }
/* Thanh công cụ, mobile: [Bộ lọc] + [ô sắp xếp] chia đôi một hàng, nhãn lọc đang bật ở hàng dưới */
.toolbar { display: grid; gap: 10px; margin-bottom: 14px; }
.toolbar__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.toolbar__sort select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--purple); border-radius: var(--radius-sm); background: var(--white); font-size: 14px; font-weight: 700; color: var(--purple); }
.toolbar__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.toolbar__sort-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* mobile: ẩn chữ, vẫn đọc được bằng trình đọc màn hình */
@media (min-width: 1080px) {
  /* Bộ lọc, desktop: thanh ngang phía trên lưới; mỗi nhóm là nút thả xuống */
  .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; position: static; z-index: 5; overflow: visible; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); }
  .filters__head { display: none; }
  .filters__groups { display: flex; flex-wrap: wrap; gap: 8px; }
  .fgroup { position: relative; border: 0; }
  .fgroup__btn { min-height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--white); font-size: 14px; font-weight: 600; white-space: nowrap; }
  .fgroup__btn .icon { transform: rotate(90deg); width: 14px; height: 14px; }   /* mũi tên nhỏ, xoay thành dấu ">" */
  .fgroup[open] .fgroup__btn { border-color: var(--purple); color: var(--purple); }
  .fgroup[open] .fgroup__btn .icon { transform: rotate(45deg); }
  .fgroup.has-value .fgroup__btn { border-color: var(--purple); }
  .fgroup__count { margin-left: 0; }
  .fgroup__body { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; min-width: 240px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: 0 12px 32px rgba(42, 22, 87, .14); }
  .fgroup .check { min-height: 34px; white-space: nowrap; }
  .filters__actions { display: flex; gap: 14px; margin-left: auto; }
  .filters__apply { min-height: 40px; }
  .filters__close, .toolbar__filter { display: none; }
  /* Thanh công cụ, desktop: nhãn lọc bên trái, ô sắp xếp bên phải, cùng một hàng */
  .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; margin-bottom: 16px; }
  .toolbar__row { display: block; order: 2; margin-left: auto; }
  .toolbar__chips { order: 1; }
  .toolbar__sort { display: flex; align-items: center; gap: 10px; }
  .toolbar__sort-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 14px; color: var(--muted); }   /* PC: hiện chữ "Sắp xếp" */
  .toolbar__sort select { width: auto; min-width: 200px; border-color: var(--line-2); font-weight: 600; color: var(--ink); }
  .grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }   /* 4 sản phẩm một hàng */
}
.guide { display: grid; gap: 20px; }
.guide > div { display: grid; gap: 12px; align-content: start; }
.guide__toc { padding: 4px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.guide__toc a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-size: 15px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }
.guide__toc li:last-child a { border-bottom: 0; }
.guide__toc .icon { color: var(--purple); }
@media (min-width: 1080px) { .guide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; } }

/* 9. SẢN PHẨM -------------------------------------------------------------- */
.pdp { background: var(--white); padding-block: 8px 28px; }
.pdp__in { display: grid; gap: 16px; }
/* Khu ảnh/video trang sản phẩm: khung 3:2 (ảnh gốc 1200×800), video 16:9 nằm giữa trên nền đen */
.pmedia { display: grid; gap: 12px; }
.pmedia__slider .hslider__track { border-radius: 14px; }
.pmedia__slide { aspect-ratio: 3 / 2; background: var(--white); }
.pmedia__slide--video { display: flex; align-items: center; background: #000; }
.pmedia__video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.pmedia__video img, .pmedia__video iframe, .pmedia__video video { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.pmedia__play { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 999px; background: var(--red); color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.pmedia__play .icon { fill: currentColor; stroke: none; margin-left: 4px; }
.pmedia__img { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--white); cursor: zoom-in; }
.pmedia__img img { width: 100%; height: 100%; object-fit: contain; }
.pmedia__slider .hslider__nav { display: inline-flex; width: 40px; height: 40px; margin-top: -20px; }
.pmedia__all { justify-self: center; min-height: 40px; padding: 0 8px; border: 0; background: transparent; font-size: 14px; font-weight: 700; color: var(--purple); }
/* Mobile: 4 nút chia đều 1 hàng (không rớt dòng), icon và chữ nhỏ; desktop: nút cố định 84px */
/* Lưới 4 cột nhưng giới hạn bề rộng và canh giữa: màn hình lớn (tablet, điện thoại ngang) các nút không bị kéo giãn xa nhau */
.pmedia__quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: min(100%, 380px); margin-inline: auto; }
.pmedia__quick button { display: grid; justify-items: center; gap: 4px; min-width: 0; padding: 0; border: 0; background: transparent; font-size: 10.5px; line-height: 1.2; text-align: center; color: var(--ink); }
.pmedia__quick button .icon { width: 40px; height: 40px; padding: 10px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--white); color: var(--purple); transition: border-color .15s, background .15s; }
.pmedia__quick button span { max-width: 100%; }
@media (min-width: 380px) { .pmedia__quick button { font-size: 11.5px; } .pmedia__quick button .icon { width: 44px; height: 44px; padding: 11px; } }
.pmedia__quick button:hover .icon { border-color: var(--purple); background: var(--lav); }
/* Ảnh / video sản phẩm và popup thư viện (mọi cỡ màn hình): dải chấm nằm dưới khung ảnh, nền trong, chấm tím,
   không che ảnh / video. Dải chấm cao ~34px nên mũi tên dời lên nửa khoảng đó để vẫn ở giữa ảnh. */
.pmedia__slider .hslider__bar, .gmodal__stage .hslider__bar { margin-top: 6px; }
/* Mobile / tablet (< 1080px): nút phát video nhỏ lại */
@media (max-width: 1079px) {
  .pmedia__play { width: 52px; height: 52px; margin: -26px 0 0 -26px; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
  .pmedia__play .icon { width: 20px; height: 20px; margin-left: 3px; }
}
@media (min-width: 1080px) {
  .pmedia__slider .hslider__track { border-radius: 18px; border: 1px solid var(--line); }
  .pmedia__slider .hslider__nav { width: 44px; height: 44px; margin-top: -22px; }
  .pmedia__quick { display: flex; justify-content: center; gap: 14px; }
  .pmedia__quick button { width: 84px; font-size: 12px; gap: 6px; }
  .pmedia__quick button .icon { width: 50px; height: 50px; padding: 12px; }
}

/* Popup thư viện sản phẩm: 4 tab */
.gmodal { width: min(1140px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 0; border-radius: 16px; background: var(--white); color: var(--ink); overflow: hidden; }
.gmodal::backdrop { background: rgba(20, 10, 45, .78); }
.gmodal__in { display: flex; flex-direction: column; max-height: inherit; }
.gmodal__head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.gmodal__tabs { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.gmodal__tabs::-webkit-scrollbar { display: none; }
.gmodal__tabs button { flex: none; min-height: 44px; padding: 0 12px; border: 0; border-bottom: 3px solid transparent; background: transparent; font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.gmodal__tabs button[aria-selected="true"] { color: var(--purple); border-bottom-color: var(--purple); }
.gmodal__close { flex: none; min-height: 40px; padding: 0 14px; }
.gmodal__panel { overflow-y: auto; padding: 12px; }
.gmodal__panel[hidden] { display: none; }
.gmodal__stage { position: relative; }
.gmodal__img { display: block; width: 100%; max-height: calc(100dvh - 260px); aspect-ratio: 3 / 2; object-fit: contain; border-radius: 12px; background: var(--lav-2); }
.gmodal__stage .hslider__nav { display: inline-flex; }
.gmodal__video { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.gmodal__video iframe, .gmodal__video video { display: block; width: 100%; height: 100%; border: 0; }
.gmodal__caption { margin-top: 10px; font-size: 14px; font-weight: 600; text-align: center; color: var(--ink-2); }
.gmodal__thumbs { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.gmodal__thumbs button { flex: none; width: 96px; padding: 0; border: 2px solid transparent; border-radius: 8px; background: var(--lav-2); overflow: hidden; }
.gmodal__thumbs button.is-active { border-color: var(--purple); }
.gmodal__thumbs img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gmodal__panel--text { max-width: 820px; margin: 0 auto; font-size: 15px; line-height: 1.6; }
.gmodal__panel--text h3 { margin: 18px 0 6px; font-size: 17px; }
.gmodal__lead { font-weight: 500; }
@media (min-width: 768px) { .gmodal__head { padding: 12px 20px; } .gmodal__tabs { justify-content: center; gap: 12px; } .gmodal__tabs button { font-size: 15px; padding: 0 8px; } .gmodal__panel { padding: 20px 28px 24px; } .gmodal__thumbs button { width: 120px; } }
@media (prefers-reduced-motion: no-preference) { .gmodal[open] { animation: adpop-in .24s ease-out; } }

.buybox { display: grid; gap: 14px; align-content: start; }
/* .h-display dùng text-wrap: balance (chia đều các dòng) làm tên sản phẩm dài xuống hàng sớm, dòng đầu hụt; tên sản phẩm xuống hàng bình thường */
.buybox__title { font-size: clamp(22px, 3vw, 32px); font-weight: 800; text-wrap: pretty; }
.buybox__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 14px; }
.installment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--lav); }
.installment span { display: grid; gap: 2px; }
.installment small { font-size: 12px; color: var(--ink-2); } .installment strong { font-size: 18px; font-weight: 800; }
.buybox__cta { display: none; gap: 12px; }
.buybox__cta .btn { flex: 1; }
.buybox__call { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--ink); }
.buybox__call { white-space: nowrap; }
.buybox__call-hours { font-weight: 500; color: var(--muted); }
@media (max-width: 400px) { .buybox__call { gap: 6px; font-size: 14px; } }
@media (max-width: 359px) { .buybox__call { gap: 5px; font-size: 13px; } }
.buybox__call .icon { color: var(--purple); }
.infoboxes { display: grid; gap: 10px; }
.infobox { display: flex; gap: 12px; align-items: center; min-height: 60px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 12px; color: var(--ink); font-size: 14px; }
.infobox .icon { color: var(--purple); } .infobox span { display: grid; } .infobox small { font-size: 14px; color: var(--muted); } .infobox small.accent { color: var(--purple); }
.assure { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; font-weight: 600; }
.assure li { display: inline-flex; align-items: center; gap: 8px; } .assure .icon { color: var(--purple); }
@media (min-width: 1080px) {
  .pdp { padding-block: 24px 48px; }
  .pdp__in { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: 48px; align-items: start; }   /* ảnh/video : hộp mua = 6 : 4 */
  .buybox { gap: 16px; } .buybox__cta { display: flex; } .infoboxes { grid-template-columns: minmax(0, 1fr); }
  .installment strong { font-size: 20px; }
}
.subnav { position: sticky; top: 0; z-index: 10; background: var(--white); border-block: 1px solid var(--line); }
.subnav__in { display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none; }
.subnav a { display: flex; align-items: center; min-height: 52px; border-bottom: 3px solid transparent; font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.subnav a.is-active { color: var(--purple); border-bottom-color: var(--purple); }
/* Lưới tính năng bằng icon: ô tím nhạt, nét tím thương hiệu; mobile 3 cột, tablet 4, desktop 6 cột */
.specgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }   /* 3 icon một hàng ở mọi bề rộng */
.specgrid__item { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 14px 8px 12px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); text-align: center; transition: border-color .15s, box-shadow .15s; }
.specgrid__item:hover { border-color: #C9BDEB; box-shadow: 0 6px 18px rgba(42, 22, 87, .08); }
.specgrid__ico { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 16px; background: var(--lav); color: var(--purple); }
.spec-ico { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.specgrid__label { font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.specgrid__value { margin-top: -4px; font-size: 12px; color: var(--muted); }
@media (min-width: 768px) { .specgrid { gap: 14px; } .specgrid__label { font-size: 13.5px; } }
@media (min-width: 1080px) { .specgrid { gap: 16px; } .specgrid__item { padding: 18px 12px 16px; gap: 10px; } .specgrid__ico { width: 68px; height: 68px; border-radius: 18px; } .specgrid__ico .spec-ico { width: 44px; height: 44px; } .specgrid__label { font-size: 14px; } }
/* Hàng 2 cột: Điểm nổi bật | Tính năng nổi bật */
.hl { display: grid; gap: 32px; }
.hl__col { display: grid; gap: 16px; align-content: start; }
.hl__list { display: grid; gap: 14px; }
.feature--row { grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.feature--row img, .feature--row .ph { aspect-ratio: 16 / 9; border-radius: 10px; font-size: 11px; }
.feature--row h3 { font-size: 16px; margin-bottom: 4px; }
.feature--row p { font-size: 14px; }
@media (min-width: 768px) { .feature--row { grid-template-columns: 160px minmax(0, 1fr); gap: 18px; padding: 14px; } .feature--row h3 { font-size: 17px; } }
@media (min-width: 1080px) { .hl { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: 48px; align-items: stretch; }   /* 6:4 như khối Thông số bên dưới */ .hl__col { gap: 20px; grid-template-rows: auto 1fr; } .hl__list { grid-auto-rows: 1fr; } .feature--row { grid-template-columns: 200px minmax(0, 1fr); gap: 22px; padding: 18px; } .feature--row p { font-size: 15px; } }   /* hai cột cao bằng nhau, thẻ bên trái giãn đều */

.feature { display: grid; gap: 10px; align-content: start; }
.feature img, .feature .ph { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); min-height: 0; }
.feature h3 { font-size: 19px; } .feature p { font-size: 15px; color: var(--ink-2); }
.specs { display: grid; gap: 24px; }
.specs > div { display: grid; gap: 16px; align-content: start; }
.spec > div { display: grid; grid-template-columns: 44% 1fr; gap: 12px; align-items: center; min-height: 42px; padding-block: 8px; border-bottom: 1px solid var(--line); font-size: 15px; }
.spec dt { color: var(--muted); } .spec dd { font-weight: 600; }
.specs__side { display: grid; gap: 16px; align-content: start; }
@media (min-width: 1080px) { .specs { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; } .specs__side { padding-top: 52px; } .spec > div { grid-template-columns: 220px 1fr; } }
.reviews { display: grid; gap: 24px; }
.reviews__summary { display: grid; gap: 14px; align-content: start; }
.reviews__score strong { font-size: 56px; font-weight: 800; }
.bars { display: grid; gap: 8px; }
.bars li { display: grid; grid-template-columns: 40px 1fr 24px; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.bars li span:last-child { text-align: right; }
.bars__track { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bars__track span { display: block; height: 100%; background: var(--star); }
@media (min-width: 1080px) { .reviews { grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; } .reviews .scroller { padding-top: 52px; } }

/* 10. TIN TỨC -------------------------------------------------------------- */
.featured { display: grid; gap: 28px; }
.featured__side { display: grid; gap: 24px; align-content: start; }
@media (min-width: 1080px) { .featured { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; align-items: start; } }
.cta-band { display: grid; gap: 16px; }
.cta-band > div:first-child { display: grid; gap: 8px; }
.cta-band__btns { display: grid; gap: 10px; }
@media (min-width: 1080px) { .cta-band { grid-template-columns: 1fr auto; align-items: center; gap: 32px; } .cta-band__btns { display: flex; gap: 12px; } }
.article-head__title { max-width: 860px; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; font-size: 14px; }
.byline__author { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.byline__author span:last-child { display: grid; } .byline__author small { color: var(--muted); }
.byline .muted { display: inline-flex; align-items: center; gap: 6px; }
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 999px; background: var(--lav); font-size: 14px; font-weight: 700; color: var(--purple); }
.avatar--lg { width: 56px; height: 56px; font-size: 18px; }
.article { display: grid; gap: 24px; }
.toc { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.toc__title { margin-bottom: 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.toc a { display: flex; align-items: center; min-height: 40px; padding-left: 12px; border-left: 2px solid var(--line); font-size: 14px; font-weight: 500; color: var(--ink-2); }
.toc a.is-active { border-left-color: var(--purple); font-weight: 700; color: var(--purple); }
.article__body { display: grid; gap: 20px; min-width: 0; max-width: 720px; }
.prose { font-size: 17px; line-height: 1.7; color: var(--ink); }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.6em; font-family: var(--font-display); font-size: 26px; line-height: 1.2; }
.prose h3 { margin-top: 1.4em; font-size: 20px; }
.prose ul { list-style: disc; padding-left: 1.2em; } .prose ol { list-style: decimal; padding-left: 1.2em; }
.prose img { border-radius: var(--radius); } .prose figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }
.prose table { display: block; overflow-x: auto; max-width: 100%; }
.inline-product { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--white); color: var(--ink); }
.inline-product img { width: 120px; aspect-ratio: 7 / 6; object-fit: contain; }
.inline-product__copy { flex: 1; min-width: 180px; display: grid; gap: 4px; } .inline-product__copy strong { font-size: 17px; } .inline-product__copy small { font-size: 14px; color: var(--muted); }
.sources { display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.sources h2 { font-size: 16px; } .sources ol { list-style: decimal; padding-left: 1.2em; display: grid; gap: 4px; }
.author-box { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.author-box > div { display: grid; gap: 2px; min-width: 0; font-size: 14px; } .author-box strong { font-size: 16px; } .author-box a { font-weight: 700; } .author-box p { margin-top: 4px; color: var(--ink-2); }
.article__aside { display: grid; gap: 20px; align-content: start; }
.aside-cta { display: grid; gap: 8px; padding: 18px; border-radius: var(--radius); background: var(--ink); color: #fff; font-size: 14px; }
.aside-cta:hover { color: #fff; } .aside-cta strong { font-size: 17px; } .aside-cta span { color: #E6DDFB; } .aside-cta .link-arrow { color: var(--cta); min-height: 0; }
.aside-list { padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.aside-list a { display: flex; align-items: center; min-height: 44px; padding-block: 6px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink); }
.aside-list ul { margin-top: 8px; }
@media (min-width: 1080px) { .article { grid-template-columns: 240px minmax(0, 720px) 264px; justify-content: space-between; gap: 32px; align-items: start; } .toc { position: sticky; top: 16px; padding: 0; border: 0; background: transparent; } }

/* 11. GIỎ HÀNG ------------------------------------------------------------- */
/* Layout giỏ hàng / thanh toán: footer luôn sát đáy màn hình kể cả khi nội dung ngắn (giỏ trống) */
.is-checkout { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.is-checkout > main { flex: 1 0 auto; }
.checkout-header { background: var(--white); border-bottom: 1px solid var(--line); }
.checkout-header__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; min-height: 60px; }
.checkout-header__help { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--ink); }
.checkout-header__help .icon { color: var(--purple); }
.steps-nav { order: 3; width: 100%; display: flex; justify-content: flex-start;  gap: 8px; padding-block: 10px; border-top: 1px solid var(--line); }
.steps-nav__item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.steps-nav__item:not(.is-active) .steps-nav__label { display: none; }
.steps-nav__num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: var(--line); font-size: 12px; font-weight: 700; color: var(--ink-2); }
.steps-nav__item.is-active { font-weight: 700; color: var(--ink); } .steps-nav__item.is-active .steps-nav__num { background: var(--purple); color: #fff; }
.cart-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding-block: 20px 12px; }
.cart { display: grid; gap: 16px; padding-bottom: 32px; }
.cart__main { display: grid; gap: 16px; min-width: 0; }
.cart-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
.cart-item img { grid-column: 1; grid-row: 1 / span 2; width: 100%; aspect-ratio: 7 / 6; object-fit: contain; }
.cart-item__info { display: grid; gap: 4px; font-size: 14px; } .cart-item__name { font-size: 15px; font-weight: 700; color: var(--ink); }
.cart-item__info { grid-column: 2; grid-row: 1; min-width: 0; }   /* đặt ô cố định, không phụ thuộc thứ tự con (thẻ <picture>/<source> của x-img) */
.cart-item__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding-top: 6px; }
.cart-item__price { grid-column: 2; grid-row: 2; align-items: flex-start; }
.qty { display: inline-flex; align-items: center; border: 1px solid #C9BDEB; border-radius: var(--radius-sm); }
.qty button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; }
.qty input { width: 40px; border: 0; text-align: center; font-size: 16px; font-weight: 700; -moz-appearance: textfield; appearance: textfield; background: transparent; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.addon { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; } .addon img { width: 84px; } .addon__copy { flex: 1; min-width: 160px; display: grid; gap: 2px; font-size: 15px; }
.form-grid { display: grid; gap: 14px; margin-bottom: 8px; }
.radios { display: grid; gap: 10px; }
.radio { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 15px; }
.radio:has(input:checked) { border-color: var(--purple); }
.radio span { display: grid; } .radio small { font-size: 13px; color: var(--muted); }
.summary { display: grid; gap: 14px; align-content: start; }
.summary .panel__title { float: none; margin: 0; }
.summary__lines { display: grid; gap: 10px; font-size: 15px; } .summary__lines div { display: flex; justify-content: space-between; gap: 12px; } .summary__lines .is-saving { color: var(--green); }
.coupon { display: flex; gap: 8px; } .coupon input { height: 46px; font-size: 15px; }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 800; font-size: 20px; }
.summary__submit { display: none; }
.checkout-footer { background: var(--purple-dark); color: #C9BDEB; font-size: 14px; padding-block: 24px; }
.is-checkout:has(.buybar) .checkout-footer { padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }   /* mobile: chừa chỗ cho thanh Đặt hàng cố định ở đáy, nền footer kéo dài phía sau thanh */
.checkout-footer__in { display: grid; gap: 10px; } .checkout-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; } .checkout-footer a { color: #fff; }
@media (min-width: 1080px) {
  .is-checkout:has(.buybar) .checkout-footer { padding-bottom: 24px; }
  .checkout-header__in { min-height: 88px; flex-wrap: nowrap; } .steps-nav__item:not(.is-active) .steps-nav__label { display: inline; } .steps-nav { order: 0; width: auto; border: 0; gap: 40px; } .steps-nav__item { font-size: 15px; gap: 10px; } .steps-nav__num { width: 30px; height: 30px; font-size: 14px; }
  .cart { grid-template-columns: minmax(0, 1fr) 420px; gap: 32px; align-items: start; } .summary { position: sticky; top: 16px; } .summary__submit { display: inline-flex; }
  .cart-item { grid-template-columns: 140px 1fr auto; gap: 18px; } .cart-item__name { font-size: 17px; } .cart-item img { grid-row: 1; } .cart-item__price { grid-column: 3; grid-row: 1; align-items: flex-end; } .cart-item__price .price__now { font-size: 20px; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .checkout-footer__in { display: flex; justify-content: space-between; align-items: center; }
}

/* 12. SHOWROOM ------------------------------------------------------------- */
.store-controls { display: grid; gap: 12px; }
.store-controls .field label { font-size: 13px; color: var(--muted); }
.stores { display: grid; gap: 20px; }
.stores__list { display: grid; gap: 14px; align-content: start; }
.stores__scroll { position: relative; display: grid; gap: 14px; align-content: start; }   /* mobile: không cuộn trong khung, dùng nút "Xem thêm" */
.stores__scroll .scard[hidden] { display: none; }
.stores__more[hidden] { display: none; }   /* .btn đặt display: inline-flex đè lên thuộc tính hidden */
.stores__scroll:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.stores__map { display: grid; gap: 12px; place-content: center; justify-items: center; min-height: 280px; padding: 24px; border: 1px dashed #B9AEDA; border-radius: 16px; background: var(--lav-2); text-align: center; }
.province-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.province-grid a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 6px 14px; border-radius: var(--radius-sm); background: var(--ground); font-size: 14px; font-weight: 600; color: var(--ink); }
.province-grid .icon { color: var(--purple); }
@media (min-width: 768px) { .province-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) {
  .store-controls { grid-template-columns: auto 280px 1fr; align-items: end; gap: 16px; }
  .stores { grid-template-columns: 500px minmax(0, 1fr); gap: 24px; align-items: start; } .stores__map { position: sticky; top: 16px; min-height: 640px; } .stores__more { display: none; } .stores__scroll { max-height: 680px; overflow-y: auto; padding: 2px 6px 2px 2px; margin-right: -6px; scrollbar-width: thin; scrollbar-color: #C9BDEB transparent; }   /* JS chỉnh lại: 3 thẻ + nửa thẻ thứ 4 */
  .province-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } .province-grid a { font-size: 15px; }
}

/* 13. TÍCH HỢP VỚI DỮ LIỆU SITE --------------------------------------------
   Bổ sung khi gắn giao diện vào dữ liệu thật: slide 1920×800, khối chính sách,
   nút liên hệ nổi, form tư vấn, giỏ hàng (nhận hàng, mã giảm giá), bản đồ showroom. */


/* Slide trang chủ: không ép tỉ lệ khung (xem .hbanner img ở mục hero) — mỗi ảnh PC / Mobile hiện đúng tỉ lệ thật, không bị cắt */
div.hbanner { cursor: default; }

.press__logo { display: inline-flex; align-items: center; min-height: 44px; }
.press__logo img { height: 24px; width: auto; max-width: 132px; object-fit: contain; }
@media (min-width: 1080px) { .press__in { grid-template-columns: 200px 1fr; } }

.flash__tabs { padding-top: 4px; margin-bottom: 4px; }
.flash__tabs .tabs__tab { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; }
.flash__tabs .tabs__tab.is-active { background: var(--cta); border-color: var(--cta); color: var(--ink); }
@media (min-width: 1080px) { .flash__tabs { padding-top: 20px; justify-content: flex-start; } }



/* Nút lên đầu trang: mobile nằm trên thanh đáy, desktop ở góc phải (cụm liên hệ nổi đẩy lên trên) */
.back-top { position: fixed; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 28; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--purple); box-shadow: 0 4px 14px rgba(30, 17, 64, .18); }
.back-top[hidden] { display: none; }
body:has(.ctray:not([hidden])) .back-top { display: none; }   /* mobile: khay so sánh chiếm chỗ phía trên thanh đáy */
/* Trang có thanh liên hệ đáy (gọn ~57px): nút lên đầu trang + khay so sánh bám sát thanh */
@media (max-width: 1079px) {
  body:has(.sticky-bar) .back-top { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  body:has(.sticky-bar) .ctray { bottom: calc(57px + env(safe-area-inset-bottom, 0px)); }
}
.back-top .icon { transform: rotate(-90deg); }
.back-top:hover { color: var(--ink); }
@media (min-width: 1080px) { .back-top { right: 20px; bottom: 24px; width: 48px; height: 48px; } }

/* Nút liên hệ nổi: chỉ desktop (mobile đã có thanh đáy). 3 nút tròn 52px bằng nhau, thẳng tâm với nút lên đầu trang (48px, right 20px) */
.cfloat { display: none; }
@media (min-width: 1080px) {
  .cfloat { position: fixed; right: 18px; bottom: 88px; z-index: 30; display: grid; gap: 12px; }
  .cfloat__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; color: #fff; box-shadow: 0 6px 18px rgba(30, 17, 64, .22); transition: transform .18s, box-shadow .18s; }
  .cfloat__btn:hover, .cfloat__btn:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(30, 17, 64, .28); }
  .cfloat__btn--call { background: var(--cta); color: var(--ink); }
  .cfloat__btn--call:hover, .cfloat__btn--call:focus-visible { color: var(--ink); }
  .cfloat__btn--call::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--cta); z-index: -1; animation: cfloat-ring 2.4s ease-out infinite; }
  .cfloat__btn--zalo { background: #0068FF; }
  .cfloat__btn--mess { background: linear-gradient(45deg, #0A7CFF 0%, #A033FF 60%, #FF5C87 100%); }
  /* Nhãn hiện bên trái khi rê chuột / focus bàn phím */
  .cfloat__tip { position: absolute; right: calc(100% + 10px); top: 50%; padding: 6px 12px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(6px, -50%); transition: opacity .15s, transform .15s; }
  .cfloat__btn:hover .cfloat__tip, .cfloat__btn:focus-visible .cfloat__tip { opacity: 1; transform: translate(0, -50%); }
}
@keyframes cfloat-ring { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cfloat__btn--call::before { animation: none; } }

.advise .adpop__body { gap: 12px; }
.advise__field { width: 100%; }
.advise__msg { min-height: 1.4em; font-size: 14px; }
.advise__msg.is-ok { color: var(--green); } .advise__msg.is-error { color: var(--red); }

/* Giỏ hàng */
.cart-empty { padding-bottom: 40px; }
@media (min-width: 1080px) { .cart-empty { padding-block: 16px 64px; } .cart-empty__box { padding-block: 56px; } }
.cart-empty__box { display: grid; justify-items: center; gap: 12px; padding: 40px 16px; text-align: center; }
.cart-empty__box > .icon { color: var(--purple); }
.cart-item__remove { align-self: center; min-height: 44px; padding: 0 4px; border: 0; background: transparent; font-size: 14px; color: var(--muted); text-decoration: underline; }
.cart-item__flash { justify-self: start; font-size: 11px; padding: 2px 8px; }
.qty button[disabled] { opacity: .35; cursor: not-allowed; }
.receive-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.receive-tab { position: relative; display: flex; }
.receive-tab input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.receive-tab span { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 10px; border: 1px solid #C9BDEB; border-radius: var(--radius-sm); font-size: 15px; font-weight: 700; text-align: center; }
.receive-tab input:checked + span { background: var(--purple); border-color: var(--purple); color: #fff; }
.receive-tab input:focus-visible + span { outline: 3px solid var(--purple); outline-offset: 2px; }
.receive-panel { display: grid; gap: 12px; }
.receive-panel[hidden] { display: none; }
.receive-panel__label { font-size: 14px; font-weight: 600; }
.cart__note { margin-top: 14px; }
.cart__error { min-height: 0; color: var(--red); font-size: 14px; font-weight: 600; }
.cart__error:empty { display: none; }
.summary .check { align-items: flex-start; font-size: 13px; }
.summary .check input { margin-top: 2px; }
.buybar .btn--cta[disabled], .summary__submit[disabled] { opacity: .6; }

/* Showroom */
.stores__map:has(iframe) { place-content: stretch; justify-items: stretch; padding: 12px; border-style: solid; border-color: var(--line); background: var(--white); text-align: left; }
.stores__map iframe { display: block; width: 100%; height: 360px; border: 0; border-radius: 12px; }
.stores__map-title { font-weight: 700; }
.store-controls .pills { align-self: end; }
.province-grid__count { margin-left: auto; min-width: 24px; padding: 0 6px; border-radius: 999px; background: var(--lav); font-size: 12px; font-weight: 700; text-align: center; color: var(--purple); }
.province-grid a[aria-current="page"] { background: var(--lav); color: var(--purple); }
@media (min-width: 1080px) {
  .store-controls { grid-template-columns: 320px 1fr; }
  .stores__map iframe { height: 600px; }
}
.summary__lines [hidden] { display: none; }

/* Danh mục */
.toolbar__count { font-size: 13px; }
@media (min-width: 1080px) { .toolbar__count { order: 0; margin-right: auto; font-size: 14px; } }
.listing__main { min-width: 0; }

/* Nội dung dài thu gọn (mô tả danh mục, thông tin sản phẩm) */
.readmore { position: relative; display: grid; gap: 16px; justify-items: center; }
.section--white .container > .readmore, .pinfo .readmore { justify-items: start; }
.readmore__body { width: 100%; }
.readmore.is-collapsed .readmore__body { max-height: 520px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.readmore__btn[hidden] { display: none; }
.prose img { height: auto; margin-inline: auto; }
.prose iframe { max-width: 100%; }
.prose a { text-decoration: underline; }

/* Khay so sánh (đáy màn hình, trên thanh liên hệ mobile) */
.ctray { position: fixed; left: 0; right: 0; bottom: 66px; z-index: 29; background: var(--white); border-top: 2px solid var(--purple); box-shadow: 0 -6px 24px rgba(30, 17, 64, .14); }
.ctray[hidden] { display: none; }
.ctray__in { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; padding-block: 10px; }
.ctray__title { font-size: 14px; }
.ctray__list { grid-column: 1 / -1; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; order: 3; }
.ctray__item { position: relative; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; max-width: 220px; padding: 4px 30px 4px 4px; border: 1px solid var(--line); border-radius: 10px; font-size: 12px; font-weight: 600; line-height: 1.3; }
.ctray__item img { width: 48px; height: 40px; object-fit: contain; }
.ctray__item span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ctray__item button { position: absolute; top: 50%; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: -12px; border: 0; border-radius: 999px; background: var(--lav); color: var(--ink); }
.ctray__actions { display: flex; align-items: center; gap: 12px; }
.ctray__clear { min-height: 40px; border: 0; background: transparent; font-size: 13px; color: var(--muted); text-decoration: underline; }
@media (min-width: 1080px) {
  .ctray { bottom: 0; }
  .ctray__in { grid-template-columns: auto 1fr auto; gap: 20px; }
  .ctray__list { grid-column: auto; order: 0; }
  body:has(.ctray:not([hidden])) .cfloat { bottom: 170px; }
  body:has(.ctray:not([hidden])) .back-top:not([hidden]) { display: inline-flex; bottom: 110px; }
}
.cmp__remove { display: block; margin: 6px auto 0; border: 0; background: transparent; font-size: 13px; color: var(--muted); text-decoration: underline; }
.compare-page__actions { margin-top: 20px; text-align: center; }

/* Thông báo ngắn */
.toast { position: fixed; left: 50%; bottom: 150px; z-index: 60; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(30, 17, 64, .3); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast.is-error { background: var(--red); }
@media (min-width: 1080px) { .toast { bottom: 120px; } }

/* Trang sản phẩm */
.buybox__compare { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0; border: 0; background: transparent; font-size: 14px; font-weight: 600; color: var(--purple); }
.pflash { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 14px; border-radius: var(--radius); background: var(--purple); }
.pflash__title { font-family: var(--font-display); font-size: 20px; font-style: italic; font-weight: 800; color: #fff; }
.price__opt { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.price__opt:empty { display: none; }
.pick { display: grid; gap: 8px; }
.pick__title { padding: 0; font-size: 14px; font-weight: 700; }
.pick__list { display: flex; flex-wrap: wrap; gap: 8px; }
.pick__opt { position: relative; }
.pick__opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.pick__opt span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border: 1px solid #C9BDEB; border-radius: var(--radius-sm); background: var(--white); font-size: 14px; font-weight: 600; }
.pick__opt input:checked + span { border: 2px solid var(--purple); background: var(--lav); color: var(--purple); }
.pick__opt input:disabled + span { opacity: .4; text-decoration: line-through; }
.pick__opt input:focus-visible + span { outline: 3px solid var(--purple); outline-offset: 2px; }
.promo-box { padding: 14px 16px; border: 1px dashed var(--purple); border-radius: var(--radius); background: var(--lav); }
.promo-box__title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 800; color: var(--purple); }
.promo-box__list { display: grid; gap: 6px; padding-left: 20px; list-style: decimal; font-size: 14px; }
.buybox__cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.buybox__cta--out { grid-template-columns: 1fr; }
.buybox__cta--out .btn { background: var(--line); color: var(--muted); }
.buybox__cta .btn { padding: 0 10px; }
.buybox__error { color: var(--red); font-size: 14px; font-weight: 600; }
.buybox__error:empty { display: none; }
@media (min-width: 1080px) { .buybox__cta { display: grid; } }
.advise-inline { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--radius); background: var(--ground); border: 1px solid var(--line); }
.advise-inline__title { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.advise-inline__title .icon { color: var(--purple); }
.advise-inline__row { display: flex; gap: 8px; }
.advise-inline__row input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid #C9BDEB; border-radius: var(--radius-sm); font-size: 16px; }
.advise-inline .advise__msg:empty { display: none; }

.pinfo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.pinfo__main, .pinfo__side { display: grid; gap: 16px; align-content: start; min-width: 0; }

@media (min-width: 1080px) { .pinfo { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 48px; } .pinfo__side { position: sticky; top: 64px; } }



.review-dialog .adpop__body { gap: 10px; }
.star-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label { color: var(--line-2); cursor: pointer; }
.star-input label .icon { fill: currentColor; stroke: none; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: var(--star); }
.star-input input:focus-visible + label { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: 4px; }
.review-dialog textarea { width: 100%; padding: 10px 14px; border: 1px solid #C9BDEB; border-radius: var(--radius-sm); font-size: 15px; }
.review-dialog input[type="file"] { height: auto; padding: 10px 0; border: 0; }
.adpop.review-dialog { width: min(480px, calc(100vw - 32px)); }

/* Tin tức */
.news-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.news-list__aside { display: grid; gap: 20px; align-content: start; }
@media (min-width: 1080px) { .news-list { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; } .news-list .grid--articles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .news-list__aside { position: sticky; top: 16px; } }
.rank-list { counter-reset: rank; margin-top: 8px; }
.rank-list li { counter-increment: rank; display: flex; gap: 10px; align-items: flex-start; border-top: 1px solid var(--line); }
.rank-list li::before { content: counter(rank); flex: none; width: 24px; padding-top: 12px; font-family: var(--font-display); font-weight: 800; color: var(--purple); }
.rank-list a { border-top: 0 !important; }
.acard__media img { background: var(--lav-2); }
.article-head .eyebrow a { color: inherit; }
.article__lead { font-size: 18px; font-weight: 500; line-height: 1.6; color: var(--ink-2); }
.article__qa { display: grid; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.toc__box summary { cursor: pointer; list-style: none; }
.toc__box summary::-webkit-details-marker { display: none; }
.toc__l3 a { padding-left: 24px; font-size: 13px; }
.toc ol { max-height: 70vh; overflow-y: auto; }
@media (min-width: 1080px) { .article--no-toc { grid-template-columns: minmax(0, 760px) 264px; } }
.prose table { border-collapse: collapse; }
.prose td, .prose th { padding: 8px 10px; border: 1px solid var(--line); }
@media (min-width: 768px) { .prose table { display: table; width: 100% !important; height: auto !important; } }
.prose table td, .prose table th { width: auto !important; height: auto !important; vertical-align: top; }

/* Đặt hàng thành công */
.order-done { display: grid; gap: 16px; padding-block: 20px 40px; }
.order-done__head { display: grid; justify-items: center; gap: 8px; text-align: center; }
.order-done__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; background: var(--green); color: #fff; }
.order-done__icon .icon { stroke-width: 3; }
.order-done__grid { display: grid; gap: 16px; }
@media (min-width: 1080px) { .order-done__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }
.order-done__info div { align-items: flex-start; }
.order-done__info dd { text-align: right; font-weight: 600; }
.order-done .panel > .muted, .order-done__bank-desc { margin-top: 14px; }
.banks { display: grid; gap: 10px; margin-top: 14px; }
.bank { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.bank img { flex: none; width: 96px; height: 96px; object-fit: contain; }
.bank div { display: grid; gap: 2px; font-size: 14px; }
.order-done__items { display: grid; gap: 12px; margin-bottom: 16px; }
.order-done__items li { display: flex; gap: 12px; align-items: center; }
.order-done__items img { width: 84px; aspect-ratio: 7 / 6; object-fit: contain; }
.order-done__items div { display: grid; gap: 2px; font-size: 14px; }

/* Cột ảnh trang sản phẩm: ảnh/video + chính sách bên dưới */
.pdp__media { display: grid; gap: 16px; align-content: start; min-width: 0; }
.policies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.policies li { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ink-2); }
.policies__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--lav); color: var(--purple); }
@media (min-width: 1080px) { .policies { gap: 12px; } .policies li { min-height: 68px; padding: 12px 14px; font-size: 14px; } .policies__icon { width: 44px; height: 44px; } }

/* Sao tô theo điểm */
.stars-meter { position: relative; display: inline-flex; line-height: 0; vertical-align: middle; }
.stars-meter__bg, .stars-meter__fg { display: inline-flex; gap: 2px; }
.stars-meter__bg .icon { fill: var(--line-2); stroke: none; }
.stars-meter__fg { position: absolute; inset: 0 auto 0 0; width: var(--pct); overflow: hidden; white-space: nowrap; }
.stars-meter__fg .icon { flex: none; fill: var(--star); stroke: none; }

/* Đánh giá sản phẩm */
.rv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.rv__summary { display: grid; gap: 10px; align-content: start; justify-items: center; padding: 20px; border-radius: var(--radius-lg); background: var(--lav); text-align: center; }
.rv__score { display: flex; align-items: baseline; gap: 4px; line-height: 1; }
.rv__score strong { font-size: 56px; font-weight: 800; color: var(--ink); }
.rv__score span { font-size: 20px; font-weight: 700; color: var(--muted); }
.rv__bars { display: grid; gap: 8px; width: 100%; margin-top: 4px; }
.rv__bars li { display: grid; grid-template-columns: 36px 1fr 28px; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.rv__bar-label { display: inline-flex; align-items: center; gap: 3px; }
.rv__bar-label .icon { fill: var(--star); stroke: none; }
.rv__bar-count { text-align: right; color: var(--muted); }
.rv__bars .bars__track { background: var(--white); }
.rv__cta { display: grid; gap: 8px; justify-items: center; width: 100%; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 14px; font-weight: 600; }
.rv__cta .btn { width: 100%; }
.rv__main { display: grid; gap: 14px; align-content: start; min-width: 0; }
.rv__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.rv__chip { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--white); font-size: 14px; font-weight: 600; color: var(--ink); }
.rv__chip .icon[width="13"] { fill: var(--star); stroke: none; }
.rv__chip span { font-weight: 500; color: var(--muted); }
.rv__chip.is-active { border-color: var(--purple); background: var(--purple); color: #fff; }
.rv__chip.is-active span { color: #E6DDFB; }
.rv__chip.is-active .icon { fill: currentColor; }
.rv__list { display: grid; }
.rv-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.rv-item:first-child { padding-top: 4px; }
.rv-item[hidden] { display: none; }
.rv-item .avatar { width: 44px; height: 44px; }
.rv-item__body { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.rv-item__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 15px; }
.rv-item__head time { font-size: 13px; }
.rv-item__text { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.rv-item__imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.rv-item__imgs a { display: block; border-radius: 10px; overflow: hidden; cursor: zoom-in; }
.rv-item__imgs img { width: 76px; height: 76px; object-fit: cover; transition: transform .2s; }
.rv-item__imgs a:hover img { transform: scale(1.05); }
.rv__more { justify-self: center; }
.rv__more[hidden] { display: none; }
.rv__empty { display: grid; justify-items: center; gap: 4px; padding: 40px 16px; border: 1px dashed var(--line-2); border-radius: var(--radius); text-align: center; }
.rv__empty > .icon { fill: var(--line-2); stroke: none; margin-bottom: 6px; }
@media (min-width: 1080px) {
  .rv { grid-template-columns: 320px minmax(0, 1fr); gap: 40px; align-items: start; }
  .rv__summary { position: sticky; top: 64px; padding: 28px 24px; }
  .rv-item__imgs img { width: 88px; height: 88px; }
}

/* Hỏi đáp */
.qa { display: grid; gap: 16px; }
.qa-ask { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.qa-ask__head { display: flex; gap: 12px; align-items: center; }
.qa-ask__head > div { display: grid; gap: 2px; font-size: 13px; }
.qa-ask__head strong { font-size: 16px; }
.qa-ask__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--lav); font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--purple); }
.qa-ask textarea, .qa-thread__reply textarea { width: 100%; padding: 12px 14px; border: 1px solid #C9BDEB; border-radius: var(--radius-sm); background: var(--white); font-size: 15px; resize: vertical; }
.qa-ask textarea:focus, .qa-ask__fields input:focus { border-color: var(--purple); outline: none; box-shadow: 0 0 0 3px rgba(76, 42, 146, .15); }
.qa-ask__fields { display: grid; gap: 8px; }
.qa-ask__fields input { min-width: 0; height: 46px; padding: 0 14px; border: 1px solid #C9BDEB; border-radius: var(--radius-sm); font-size: 16px; }
.qa-ask.is-compact .qa-ask__fields { display: none; }
@media (min-width: 768px) { .qa-ask__fields { grid-template-columns: 1fr 1fr 1fr auto; } }
.qa__count { font-size: 15px; color: var(--muted); }
.qa__count strong { color: var(--ink); }
.qa__list { display: grid; gap: 12px; }
.qa-thread { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.qa-thread[hidden] { display: none; }
.qa-entry { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
.qa-entry__body { display: grid; gap: 4px; min-width: 0; }
.qa-entry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; }
.qa-entry__meta time { font-size: 13px; }
.qa-entry__text { font-size: 15px; line-height: 1.6; color: var(--ink-2); white-space: pre-line; }
.qa-entry__badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: var(--purple); font-size: 11px; font-weight: 700; color: #fff; }
.qa-entry__badge .icon { stroke-width: 3; }
.qa-thread__answers { display: grid; gap: 10px; margin-left: 20px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--ground); position: relative; }
.qa-thread__answers::before { content: ""; position: absolute; top: -8px; left: 14px; border: 8px solid transparent; border-top: 0; border-bottom-color: var(--ground); }
.qa-entry.is-reply { grid-template-columns: 32px minmax(0, 1fr); }
.qa-entry.is-reply .avatar { width: 32px; height: 32px; font-size: 13px; }
.qa-entry.is-admin .avatar { background: var(--purple); color: #fff; }
.qa-thread__reply { margin-left: 52px; }
.qa-thread__reply summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 14px; font-weight: 700; color: var(--purple); cursor: pointer; list-style: none; }
.qa-thread__reply summary::-webkit-details-marker { display: none; }
.qa-thread__reply[open] summary { margin-bottom: 8px; }
.qa-thread__reply form { display: grid; gap: 8px; }
.qa__more { justify-self: center; }
@media (min-width: 1080px) { .qa-thread { padding: 18px 20px; } .qa-thread__answers { margin-left: 52px; } }

/* Chi tiết cửa hàng */
.store-head__in { display: grid; gap: 16px; }
.store-head__copy { display: grid; gap: 10px; min-width: 0; }
.store-head__addr { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; color: var(--ink-2); }
.store-head__addr .icon { margin-top: 2px; color: var(--purple); }
.store-head__lead { max-width: 70ch; font-size: 15px; line-height: 1.6; color: var(--ink-2); }   /* đoạn giới thiệu theo địa phương (SEO local) */
.store-faq { max-width: 880px; }
.store-head .chip .icon { color: var(--purple); }
.store-head__actions { display: grid; gap: 10px; }
@media (min-width: 768px) { .store-head__actions { display: flex; flex-wrap: wrap; } }
@media (min-width: 1080px) { .store-head__in { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; } .store-head__actions { justify-content: flex-end; } }
.store-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.store-detail__media { min-width: 0; }
.sgallery .hslider__track { border-radius: var(--radius-lg); background: var(--lav-2); }
.sgallery__slide a { display: block; }
.sgallery__slide img, .sgallery__ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.store-info { display: grid; gap: 16px; }
.store-info .panel__title { margin-bottom: 0; }
.store-info__list { display: grid; gap: 14px; }
.store-info__list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; font-weight: 600; }
.store-info__list li > .icon { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--lav); color: var(--purple); }
.store-info__list small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.store-info__list a { color: var(--ink); }
@media (min-width: 1080px) { .store-detail { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: start; } .store-detail__info { position: sticky; top: 16px; } }
.store-map iframe { display: block; width: 100%; height: 360px; border: 0; border-radius: var(--radius-lg); }
@media (min-width: 1080px) { .store-map iframe { height: 480px; } }
.store-intro { max-width: 900px; }

/* ==========================================================================
   CÁC TRANG PHỤ (giao diện mới): trang tĩnh, liên hệ, tìm kiếm, bảo hành, 404,
   trả góp, tra cứu đơn hàng, tài khoản
   ========================================================================== */
.field textarea { width: 100%; min-height: 120px; padding: 12px 14px; border: 1px solid #C9BDEB; border-radius: var(--radius-sm); background: var(--white); color: var(--ink); font: inherit; font-size: 16px; resize: vertical; }
.btn--block { width: 100%; }
.req { color: var(--red); }

/* Trang tĩnh (chính sách, giới thiệu…) */
.spage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.spage__body { min-width: 0; display: grid; gap: 20px; }
.spage__toc summary { cursor: pointer; font-weight: 700; }
.spage__toc ol { margin-top: 10px; display: grid; gap: 2px; }
.spage__toc a { display: block; padding: 6px 0 6px 12px; border-left: 2px solid var(--line); font-size: 14px; color: var(--ink-2); }
.spage__toc a:hover { border-left-color: var(--purple); color: var(--purple); }
.spage__toc .toc__l3 a { padding-left: 24px; font-size: 13px; }
.spage__aside { display: grid; gap: 16px; align-content: start; }
.spage__aside .is-current { font-weight: 700; color: var(--purple); }
@media (min-width: 1080px) {
  .spage { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
  .spage__body { max-width: 820px; }
  .spage__aside { position: sticky; top: 16px; }
}

/* Liên hệ */
.contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.contact__info { display: grid; gap: 16px; align-content: start; min-width: 0; }
.contact-cards { display: grid; gap: 10px; }
.contact-card { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink); }
.contact-card:hover { border-color: var(--purple); color: var(--ink); }
.contact-card__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--lav); color: var(--purple); }
.contact-card small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.contact-card strong { display: block; font-size: 16px; overflow-wrap: anywhere; }
.contact__company { display: grid; gap: 6px; }
.contact__chat { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.contact__form { display: grid; gap: 12px; align-content: start; }
.contact__hq-addr { margin: -8px 0 16px; }
@media (min-width: 768px) { .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; } }

/* Tìm kiếm */
/* .search (ô tìm ở đầu trang) có grid-area: search; đặt trong lưới khác thì phải trả về auto, nếu không trình duyệt tạo cột ngầm, dàn hàng ngang */
.notfound__search { grid-area: auto; }
/* Trang tìm kiếm: dùng ô tìm ở đầu trang. Phần đầu: từ khoá lớn, số kết quả, tab Tất cả / Sản phẩm / Tin tức (link thật ?tab=) */
.srh { background: linear-gradient(180deg, var(--lav) 0%, var(--white) 100%); border-bottom: 1px solid var(--line); }
.srh__in { display: grid; gap: 6px; padding-block: 16px 18px; }
.srh__in > * { min-width: 0; }
.srh__q { overflow-wrap: anywhere; color: var(--ink); }
.srh__meta { font-size: 15px; color: var(--ink-2); }
.srh__meta strong { color: var(--purple); font-weight: 800; }
.srh__hot { display: grid; gap: 8px; margin-top: 10px; }
.srh__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.srh__hot .pill { gap: 6px; color: var(--ink-2); transition: border-color .15s, color .15s; }
.srh__hot .pill .icon { color: var(--purple); }
.srh__hot .pill:hover { border-color: var(--purple); color: var(--purple); }
.srh-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.srh-tabs::-webkit-scrollbar { display: none; }
.srh-tabs__tab { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; font-size: 15px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.srh-tabs__tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; }
.srh-tabs__tab:hover { color: var(--ink); }
.srh-tabs__tab.is-active { color: var(--ink); }
.srh-tabs__tab.is-active::after { background: var(--purple); }
.srh-tabs__count { min-width: 24px; padding: 1px 7px; border-radius: 999px; background: var(--lav-2); font-size: 12px; font-weight: 700; line-height: 1.5; text-align: center; color: var(--muted); }
.srh-tabs__tab.is-active .srh-tabs__count { background: var(--purple); color: #fff; }
.srh-more { display: flex; justify-content: center; margin-top: 20px; }

/* Kết quả bài viết: dạng hàng (ảnh nhỏ bên trái, tiêu đề + đoạn trích có tô từ khoá) */
.srh-news { display: grid; gap: 12px; }
.srh-art { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); transition: border-color .15s, box-shadow .15s; }
.srh-art:hover { border-color: var(--line-2); box-shadow: 0 6px 20px rgba(42, 22, 87, .08); }
.srh-art__media { display: block; border-radius: var(--radius-sm); overflow: hidden; background: var(--lav-2); }
.srh-art__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.srh-art__body { display: grid; gap: 4px; min-width: 0; }
.srh-art__body .eyebrow { font-size: 11px; }
.srh-art__title { font-size: 15px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.srh-art__title a { color: var(--ink); }
.srh-art__title a:hover { color: var(--purple); }
.srh-art__excerpt { display: none; font-size: 14px; color: var(--ink-2); }
.srh-art__meta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.srh-art mark { padding: 0 2px; border-radius: 3px; background: #FFE8A3; color: inherit; }

/* Không có kết quả */
.srh-empty { display: grid; justify-items: center; gap: 12px; max-width: 560px; margin-inline: auto; padding: 28px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); text-align: center; }
.srh-empty__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--lav); color: var(--purple); }
.srh-empty__title { font-size: clamp(19px, 2.6vw, 26px); overflow-wrap: anywhere; }
.srh-empty__tips { display: grid; gap: 4px; color: var(--ink-2); }
.srh-empty .btn { margin-top: 4px; }

@media (min-width: 768px) {
  .srh-art { grid-template-columns: 200px minmax(0, 1fr); gap: 18px; padding: 14px; }
  .srh-art__media img { aspect-ratio: 16 / 10; }
  .srh-art__title { font-size: 17px; -webkit-line-clamp: 2; }
  .srh-art__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .srh__hot { display: flex; align-items: center; gap: 12px; }
  .srh__hot .pills { min-width: 0; }
}
@media (min-width: 1080px) {
  .srh__in { gap: 8px; padding-block: 28px 24px; }
  .srh__meta { font-size: 16px; }
  .srh__hot .pills { flex-wrap: wrap; overflow: visible; }
  .srh-tabs__tab { padding: 0 18px; font-size: 16px; }
  .srh-news { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .srh-more { margin-top: 32px; }
  .srh-empty { padding: 40px 32px; }
}

/* Bảo hành */
.warranty { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.warranty__form { display: grid; gap: 14px; align-content: start; }
.warranty__form select:disabled { background: var(--lav-2); color: var(--muted); }
.warranty__result { display: grid; gap: 16px; align-content: start; min-width: 0; }
.warranty__msg { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius); background: var(--white); }
.warranty__msg.is-ok { border-left-color: var(--green); background: #F1F8F3; }
.warranty__msg.is-error { border-left-color: var(--red); background: #FDF3F4; }
.warranty__msg ul { display: grid; gap: 4px; }
.warranty__steps { display: grid; gap: 10px; margin-bottom: 12px; padding-left: 20px; list-style: decimal; }
.warranty__steps li::marker { font-weight: 700; color: var(--purple); }
@media (min-width: 1080px) { .warranty { grid-template-columns: 440px minmax(0, 1fr); gap: 32px; align-items: start; } }

/* 404 */
.notfound { display: grid; justify-items: center; gap: 14px; max-width: 720px; text-align: center; }
.notfound__code { font-size: clamp(72px, 16vw, 140px); line-height: 1; color: var(--lav); -webkit-text-stroke: 2px var(--purple); }
.notfound__text { color: var(--ink-2); }
.notfound__search { width: 100%; max-width: 520px; height: 52px; border: 1px solid var(--line); background: var(--white); }
.notfound__links { justify-content: center; flex-wrap: wrap; overflow: visible; }   /* căn giữa + cuộn ngang sẽ che mất mục đầu, nên xuống dòng */
.notfound__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }

/* Trả góp */
.inst-product { display: flex; align-items: center; gap: 14px; }
.inst-product img { flex: none; width: 112px; height: 96px; object-fit: contain; border-radius: var(--radius-sm); background: var(--lav-2); }
.inst-product > div { display: grid; gap: 2px; min-width: 0; }
.inst-product__name { font-weight: 700; color: var(--ink); }
.inst { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.inst__steps { display: grid; gap: 16px; min-width: 0; }
.inst-step { min-width: 0; min-inline-size: 0; margin: 0; }
.inst-step legend { display: flex; align-items: center; gap: 10px; float: left; }
.inst-step__num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--purple); color: #fff; font-size: 14px; }
.inst-banks, .inst-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.inst-bank { display: grid; place-items: center; height: 56px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); cursor: pointer; }
.inst-bank img { max-height: 36px; width: auto; object-fit: contain; }
.inst-bank:hover { border-color: var(--purple); }
.inst-bank[aria-pressed="true"] { border: 2px solid var(--purple); background: var(--lav); }
.inst-cards > p { grid-column: 1 / -1; }
.inst__form { display: grid; gap: 12px; align-content: start; }
.inst__summary { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--lav-2); }
.itable { min-width: 520px; }
.itable thead th { background: var(--lav); font-size: 14px; }
.itable tbody td { font-size: 14px; }
.itable__pick { min-height: 40px; }
.itable__pick.is-picked { background: var(--purple); color: #fff; }
@media (min-width: 768px) { .inst-banks, .inst-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .inst { grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start; } .inst__form { position: sticky; top: 16px; } }

/* Kết quả thanh toán trả góp */
.result { display: grid; justify-items: center; gap: 12px; max-width: 640px; margin-inline: auto; text-align: center; }
.result__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font-size: 30px; font-weight: 700; color: #fff; }
.result.is-ok .result__icon { background: var(--green); }
.result.is-error .result__icon { background: var(--red); }
.result__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }

/* Tra cứu đơn hàng + danh sách đơn */
.lookup-wrap { display: grid; gap: 16px; max-width: 860px; }
.lookup { display: flex; gap: 10px; }
.lookup input { flex: 1; min-width: 0; height: 50px; padding: 0 14px; border: 1px solid #C9BDEB; border-radius: var(--radius-sm); font-size: 16px; color: var(--ink); }
.lookup__result:empty { display: none; }
.orders { display: grid; gap: 12px; }
.order-card { display: grid; gap: 12px; }
.order-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.order-card__head > div { display: grid; gap: 2px; min-width: 0; }
.order-card__code { font-size: 16px; }
.order-status { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--lav-2); color: var(--muted); }
.order-status.is-ok { background: #E5F3EA; color: var(--green); }
.order-status.is-wait { background: #FFF5D6; color: #7A5600; }
.order-card__items { display: grid; gap: 8px; padding-block: 10px; border-block: 1px solid var(--line); }
.order-card__items li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; font-weight: 600; }
.order-card__items img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: var(--lav-2); }
.order-card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.order-empty { display: grid; gap: 8px; justify-items: start; }

/* Tài khoản */
.auth { display: grid; justify-items: center; }
.auth__card { display: grid; gap: 14px; width: 100%; max-width: 480px; }
.pw-rules { display: grid; gap: 2px; margin-top: 4px; padding-left: 18px; list-style: disc; }
.account { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.account__nav ul { display: grid; gap: 2px; }
.account__nav a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm); color: var(--ink); font-weight: 600; }
.account__nav a:hover { background: var(--lav-2); }
.account__nav a.is-current { background: var(--lav); color: var(--purple); }
.account__hello { margin-bottom: 8px; font-size: 14px; color: var(--muted); }
.account__main { display: grid; gap: 14px; align-content: start; min-width: 0; }
.account__main .pw-rules { margin-top: -6px; }
@media (min-width: 1080px) { .account { grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: start; } .account__nav { position: sticky; top: 16px; } }

/* Tìm showroom gần tôi (trang /cua-hang) */
.near { display: grid; gap: 8px; justify-items: start; }
.near .btn .icon { flex: none; }
/* Showroom gần bạn nhất: khung nền tím nhạt chứa các thẻ .scard giống danh sách bên dưới + nhãn khoảng cách */
.near-list { display: grid; gap: 12px; margin-bottom: 16px; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--lav); }
.near-list .panel__title { display: flex; align-items: center; gap: 8px; margin: 0; }
.near-list .panel__title .icon { color: var(--purple); }
.near-list > .muted { margin: 0; }
.near-list[hidden] { display: none; }   /* chỉ hiện sau khi khách bấm "Tìm showroom gần tôi" (display: grid ở trên đè thuộc tính hidden) */
.near-list__items { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.near-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.near-card__top .eyebrow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.near-card__dist { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--lav); color: var(--purple); font-size: 12px; font-weight: 700; line-height: 18px; white-space: nowrap; }
.near-card.is-nearest .near-card__dist { background: var(--purple); color: #fff; }
@media (min-width: 1080px) { .near-list { padding: 16px; } }
/* Màn hình chờ khi tìm showroom gần tôi (stores.blade.php): hộp giữa màn hình, biểu tượng định vị phát sóng */
.nearload { width: min(360px, calc(100vw - 32px)); margin: auto; padding: 28px 24px 20px; border: 0; border-radius: var(--radius-lg); background: var(--white); color: var(--ink); text-align: center; box-shadow: 0 20px 60px rgba(30, 17, 64, .3); }
.nearload[open] { display: grid; justify-items: center; gap: 10px; }
.nearload::backdrop { background: rgba(30, 17, 64, .55); }
.nearload__radar { position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 6px; border-radius: 50%; background: var(--lav); color: var(--purple); }
.nearload__radar span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--purple); opacity: 0; animation: nearload-wave 1.8s ease-out infinite; }
.nearload__radar span + span { animation-delay: .9s; }
.nearload__radar .icon { position: relative; animation: nearload-bob 1.8s ease-in-out infinite; }
.nearload__step { font-size: 17px; font-weight: 700; }
.nearload__hint { font-size: 14px; color: var(--muted); }
.nearload__hint:empty { display: none; }
.nearload .btn { margin-top: 6px; min-width: 120px; }
@keyframes nearload-wave { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes nearload-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .nearload__radar span, .nearload__radar .icon { animation: none; } }

/* <x-img>: thẻ <picture> bọc bản WebP không tạo hộp riêng, <img> giữ nguyên bố cục như trước */
picture.img { display: contents; }
/* <source> không bị ẩn mặc định: khi <picture> là display: contents nó thành 1 ô grid/flex rỗng, đẩy lệch các ô sau (giỏ hàng mobile: ảnh sang cột 2, giá đè tên và nút Xoá) */
picture.img > source { display: none; }

/* Popup xem ảnh đánh giá (tạo bằng toshiko-product.js): nền tối toàn màn hình, ảnh giữa, dải ảnh nhỏ dưới */
.rvbox { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(14, 7, 32, .96); color: #fff; }
.rvbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.rvbox::backdrop { background: rgba(14, 7, 32, .9); }
.rvbox__top { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; }
.rvbox__who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.rvbox__count { font-size: 14px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .75); }
.rvbox__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; }
.rvbox__close:hover { background: rgba(255, 255, 255, .22); }
.rvbox__stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 8px; }
.rvbox__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; user-select: none; }
.rvbox__nav { position: absolute; top: 50%; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--ink); box-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.rvbox__nav--prev { left: 8px; }
.rvbox__nav--prev .icon { transform: rotate(180deg); }
.rvbox__nav--next { right: 8px; }
.rvbox.is-single .rvbox__nav { display: none; }
.rvbox__thumbs { display: flex; justify-content: center; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); overflow-x: auto; scrollbar-width: none; }
.rvbox__thumbs[hidden] { display: none; }
.rvbox__thumbs button { display: block; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: none; opacity: .55; transition: opacity .15s, border-color .15s; }
.rvbox__thumbs button.is-active { border-color: #fff; opacity: 1; }
.rvbox__thumbs img { width: 56px; height: 56px; object-fit: cover; }
@media (min-width: 1080px) {
  .rvbox__top { padding: 12px 16px 12px 24px; }
  .rvbox__stage { padding: 0 80px; }
  .rvbox__nav { width: 52px; height: 52px; margin-top: -26px; }
  .rvbox__nav--prev { left: 20px; } .rvbox__nav--next { right: 20px; }
  .rvbox__thumbs img { width: 64px; height: 64px; }
}