/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
 * genre: editorial · macrostructure: Editorial broadsheet (marketing) / Catalogue (shop) / Long Document (content)
 * theme: custom (warm cream · wine-red accent oklch(43% .14 20) · Fraunces + Be Vietnam Pro)
 * design-system: design.md · designed-as-app · nav: N6 masthead · footer: Ft4 colophon
 * Rượu Vang Vĩnh Tiến — biên tập cổ điển
 */
@import "../../tokens.css";

/* ====================== BASE ====================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  margin:0;overflow-x:clip;
  font-family:var(--font-body);color:var(--color-ink);
  background:var(--color-paper);line-height:1.72;font-size:16px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--color-accent);text-decoration:none;transition:color var(--dur-short) var(--ease-out)}
a:hover{color:var(--color-accent-deep)}
h1,h2,h3,h4{
  font-family:var(--font-display);font-weight:560;font-style:normal;
  line-height:1.14;color:var(--color-ink);margin:0 0 .5em;
  font-optical-sizing:auto;letter-spacing:-0.01em;
  overflow-wrap:anywhere;min-width:0;
}
p{margin:0 0 1em}
strong,b{font-weight:600}
em{font-style:italic}
::selection{background:var(--color-accent-soft);color:var(--color-accent-deep)}

.container{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,32px)}
/* Nhịp dọc: section thường ~57–80px mỗi phía; section--tight ~24–44px cho khối
 * liên quan khối trước. Trước đây clamp(3rem,7vw,7rem) → hai section kề nhau cộng
 * dồn ~161–200px trống thuần, mọi ranh giới đều như nhau → trang rời rạc. */
.section{padding:clamp(2.5rem,5vw,5rem) 0}
.section--tight{padding:clamp(1.5rem,3vw,2.75rem) 0}
.bg-cream2{background:var(--color-paper-2)}
.text-center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}

:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:1px}

/* ====================== SECTION HEAD (numbered eyebrow, stacked) ====================== */
.sec-head{max-width:var(--measure);margin:0 0 var(--space-xl)}
.sec-head .kicker{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--font-body);letter-spacing:.24em;text-transform:uppercase;
  font-size:var(--text-xs);font-weight:600;color:var(--color-accent);margin:0 0 .85rem;
}
.sec-head .kicker::before{content:"";width:26px;height:2px;background:var(--color-gold);display:inline-block}
.sec-head h2{font-size:var(--text-2xl);margin:0;letter-spacing:-0.015em}
.sec-head p{color:var(--color-ink-2);margin-top:var(--space-sm);font-size:var(--text-md)}
.kicker{font-family:var(--font-body);letter-spacing:.24em;text-transform:uppercase;
  font-size:var(--text-xs);font-weight:600;color:var(--color-accent)}

/* ====================== BUTTONS ====================== */
.btn{
  display:inline-flex;align-items:center;gap:.55em;cursor:pointer;white-space:nowrap;
  font-family:var(--font-body);font-weight:600;font-size:1rem;letter-spacing:.01em;
  padding:.85em 1.6em;border-radius:var(--radius-sm);border:var(--rule-hair) solid transparent;
  line-height:1.1;transition:background var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out);
}
.btn:active{transform:translateY(1px)}
.btn--gold{background:var(--color-gold);color:var(--color-dark)}
.btn--gold:hover{background:var(--color-gold-soft);color:var(--color-dark)}
.btn--outline{border-color:var(--color-rule-2);color:var(--color-ink);background:transparent}
.btn--outline:hover{background:var(--color-ink);color:var(--color-paper);border-color:var(--color-ink)}
.btn--wine{background:var(--color-accent);color:var(--color-accent-ink)}
.btn--wine:hover{background:var(--color-accent-deep);color:var(--color-accent-ink)}
/* CTA chính (hero + dải CTA cuối trang): to hơn thân bài một bậc */
.hero__cta .btn{font-size:var(--text-md)}
/* Nút topbar giữ cỡ nhỏ để không vỡ layout thanh nav */
.nav__cta .btn{font-size:var(--text-sm)}
/* Màn hẹp: hàng CTA xếp dọc, nút full-width — mỗi nút vẫn 1 dòng, không tràn */
@media(max-width:480px){
  .hero__cta .btn,.pillars__cta .btn{width:100%;justify-content:center}
}
/* Màn cực hẹp: hạ CTA một bậc để chữ nowrap vẫn lọt trong nút full-width */
@media(max-width:360px){
  .hero__cta .btn{font-size:1rem}
}

/* ====================== MASTHEAD / NAV (N6) ====================== */
/* Dòng meta trên cùng (nền tối plum-wine) */
.topbar{background:var(--color-dark);color:var(--color-accent-ink);font-size:var(--text-xs)}
.topbar .container{display:flex;justify-content:space-between;align-items:center;
  min-height:38px;gap:16px;flex-wrap:wrap}
.topbar a{color:var(--color-accent-ink);opacity:.85}
.topbar a:hover{color:var(--color-gold);opacity:1}
.topbar__left{display:flex;gap:22px;flex-wrap:wrap;letter-spacing:.02em}
.topbar__left span,.topbar__left a{display:inline-flex;align-items:center;gap:6px}
.topbar__meta{letter-spacing:.18em;text-transform:uppercase;color:var(--color-gold);font-weight:600}
.topbar__social{display:flex;gap:16px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}

/* Wordmark broadsheet (cuộn theo trang) */
.masthead{background:var(--color-paper);text-align:center;
  padding:var(--space-lg) 0 var(--space-sm);border-bottom:var(--rule-hair) solid var(--color-rule)}
.masthead__wordmark{font-family:var(--font-display);font-weight:560;letter-spacing:.04em;
  font-size:clamp(2rem,6vw,3.4rem);color:var(--color-ink);line-height:1;display:inline-block}
.masthead__rule{max-width:var(--maxw);margin:.7rem auto 0;padding:0 clamp(18px,4vw,32px);
  display:flex;align-items:center;justify-content:center;gap:1.1rem;
  font-size:var(--text-xs);letter-spacing:.28em;text-transform:uppercase;
  color:var(--color-ink-2);font-weight:600}
.masthead__rule::before,.masthead__rule::after{content:"";height:1px;flex:1;background:var(--color-rule)}

/* Thanh nav sticky gọn */
.site-header{position:sticky;top:0;z-index:60;background:oklch(96.5% 0.012 84 / .94);
  backdrop-filter:blur(8px);border-bottom:var(--rule-hair) solid var(--color-rule)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:60px;gap:18px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display)}
.brand__logo{width:42px;height:42px;border-radius:var(--radius-sm);background:var(--color-paper-3);
  display:grid;place-items:center;color:var(--color-accent);font-weight:700;font-size:1rem;
  border:var(--rule-hair) solid var(--color-rule);overflow:hidden;flex:none}
.brand__logo img{width:100%;height:100%;object-fit:contain;padding:2px}
.brand__name{font-size:1.05rem;font-weight:560;color:var(--color-ink);line-height:1.05;letter-spacing:.04em}
.brand__name small{display:block;font-family:var(--font-body);font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--color-accent);font-weight:600;margin-top:2px}

.nav__menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav__menu>li{position:relative}
.nav__menu>li>a{display:block;padding:.6em .95em;font-family:var(--font-body);font-weight:500;
  color:var(--color-ink);font-size:var(--text-sm);letter-spacing:.01em;white-space:nowrap;
  border-bottom:2px solid transparent;transition:color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out)}
.nav__menu>li>a:hover{color:var(--color-accent);border-color:var(--color-gold)}
.nav__menu>li.active>a{color:var(--color-accent);border-color:var(--color-accent)}
.nav__menu>li.has-sub>a:after{content:"·";margin-left:6px;color:var(--color-gold);font-weight:700}
.submenu{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;background:var(--color-paper-3);
  border:var(--rule-hair) solid var(--color-rule);box-shadow:var(--shadow);padding:6px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out),visibility var(--dur-short);
  list-style:none;margin:0;border-radius:var(--radius)}
.nav__menu>li.has-sub:hover .submenu,.nav__menu>li.has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{display:block;padding:.55em .8em;border-radius:var(--radius-sm);color:var(--color-ink);
  font-size:var(--text-sm)}
.submenu a:hover{background:var(--color-paper-2);color:var(--color-accent)}
.nav__cta{display:flex;align-items:center;gap:12px}
.nav__toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;color:var(--color-ink)}
.nav__toggle svg{width:26px;height:26px}

/* ====================== HERO (editorial masthead, lệch trái) ====================== */
.hero-editorial{padding:clamp(2.5rem,6vw,var(--space-2xl)) 0 var(--space-xl)}
.hero-editorial .container{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);gap:clamp(2rem,5vw,var(--space-2xl));
  align-items:center}
.hero-editorial__body{max-width:32ch}
.hero-editorial .kicker{display:block;margin-bottom:1.1rem}
.hero-editorial h1{font-size:var(--text-display);margin:0 0 var(--space-md);letter-spacing:-0.02em;line-height:1.05}
.hero-editorial__lead{font-size:var(--text-lg);color:var(--color-ink-2);max-width:42ch;margin:0 0 var(--space-lg);line-height:1.6}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-editorial__figure{margin:0;position:relative}
.hero-editorial__figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);
  border:var(--rule-hair) solid var(--color-rule-2)}
.hero-editorial__figure figcaption{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-ink-2);margin-top:.7rem;text-align:right}
.hero-editorial__figure::after{content:"";position:absolute;left:-14px;top:-14px;right:14px;bottom:34px;
  border:var(--rule-hair) solid var(--color-gold);border-radius:var(--radius);z-index:-1;opacity:.5}
/* Trạng thái vào trang, quiet fade-up một lần */
@media (prefers-reduced-motion:no-preference){
  .hero-editorial__body{animation:hm-rise var(--dur-mid) var(--ease-out) both}
  .hero-editorial__figure{animation:hm-rise var(--dur-mid) var(--ease-out) .08s both}
}
@keyframes hm-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Banner ảnh cũ (fallback nếu trang vẫn dùng .hero rỗng) */
.hero{position:relative;height:34vh;min-height:220px;max-height:380px;border-bottom:var(--rule-hair) solid var(--color-rule);
  background:linear-gradient(oklch(96.5% 0.012 84 / 0) 60%, var(--color-paper) 100%),
    url("https://ruouvangvinhtien.vn/uploads/data/1007/files/images/banner/banner-home1.jpg") center 40%/cover no-repeat}
.intro{padding:var(--space-lg) 0;text-align:center}
.intro h1{font-size:var(--text-display-s);margin:0 0 var(--space-sm)}
.intro p{font-size:var(--text-md);color:var(--color-ink-2);max-width:60ch;margin:0 auto var(--space-md)}
.intro .hero__cta{justify-content:center}

/* ====================== TRUST / STAT ROW ====================== */
.trust{background:var(--color-paper-2);border-block:var(--rule-hair) solid var(--color-rule)}
.trust .container{display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding:var(--space-lg) 0}
.trust__item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
  padding:.4rem 1rem;position:relative}
.trust__item+.trust__item::before{content:"";position:absolute;left:0;top:15%;height:70%;
  width:1px;background:var(--color-rule-2)}
.trust__item b{font-family:var(--font-display);color:var(--color-accent);font-size:var(--text-xl);
  line-height:1;font-weight:560}
.trust__item span{color:var(--color-ink-2);font-size:var(--text-xs);letter-spacing:.04em}

/* ====================== CATEGORY INDEX (editorial) ====================== */
.cat-btn-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:var(--rule-hair) solid var(--color-rule)}
.cat-btn{display:flex;flex-direction:column;justify-content:center;gap:6px;
  text-align:left;background:transparent;border:0;
  border-bottom:var(--rule-hair) solid var(--color-rule);border-right:var(--rule-hair) solid var(--color-rule);
  padding:var(--space-md) var(--space-sm);min-height:118px;position:relative;
  transition:background var(--dur-short) var(--ease-out)}
.cat-btn:hover{background:var(--color-paper-2)}
.cat-btn__name{font-family:var(--font-display);font-weight:560;color:var(--color-ink);font-size:var(--text-lg);line-height:1.15}
.cat-btn:hover .cat-btn__name{color:var(--color-accent)}
.cat-btn__count{font-size:var(--text-xs);color:var(--color-ink-2);letter-spacing:.08em;text-transform:uppercase}
.cat-btn::after{content:"→";position:absolute;top:var(--space-md);right:var(--space-sm);color:var(--color-gold);
  opacity:0;transform:translateX(-4px);transition:opacity var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}
.cat-btn:hover::after{opacity:1;transform:none}

/* Category cards (ảnh) — nếu dùng */
.cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-md)}
.cat-card{position:relative;overflow:hidden;border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius);
  aspect-ratio:3/4;background:var(--color-dark);display:block}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-mid) var(--ease-out)}
.cat-card:hover img{transform:scale(1.05)}
.cat-card__ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--space-md);background:linear-gradient(oklch(21% .035 348 / 0) 40%,oklch(21% .035 348 / .88))}
.cat-card__ov h3{color:var(--color-accent-ink);font-size:var(--text-lg);margin:0}
.cat-card__ov span{color:var(--color-gold-soft);font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase}

/* ====================== PRODUCT GRID (catalogue) ====================== */
.prod-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-lg) var(--space-md)}
.prod-card{background:transparent;border:0;border-top:var(--rule-thick) solid var(--color-ink);
  display:flex;flex-direction:column;padding-top:var(--space-xs);
  transition:transform var(--dur-short) var(--ease-out)}
.prod-card:hover{transform:translateY(-3px)}
.prod-card__media{position:relative;background:var(--color-paper-2);aspect-ratio:1/1;padding:var(--space-md);
  display:grid;place-items:center;border-radius:var(--radius-sm);overflow:hidden}
.prod-card__media img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply;
  transition:transform var(--dur-mid) var(--ease-out)}
.prod-card:hover .prod-card__media img{transform:scale(1.04)}
/* Ảnh có nền riêng (không trắng): phủ kín ô, bỏ multiply */
.prod-card--photo .prod-card__media{background:var(--color-paper-3);padding:0}
.prod-card--photo .prod-card__media img{position:absolute;inset:0;mix-blend-mode:normal;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center}
.prod-badge{position:absolute;top:10px;left:10px;background:var(--color-accent);color:var(--color-accent-ink);
  font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:var(--radius-sm)}
.prod-card__body{padding:var(--space-sm) 2px 0;display:flex;flex-direction:column;flex:1}
.prod-card__cat{font-size:var(--text-xs);color:var(--color-accent);font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;margin-bottom:6px}
.prod-card__title{font-family:var(--font-display);font-size:var(--text-md);font-weight:560;color:var(--color-ink);
  margin:0 0 var(--space-sm);line-height:1.28;min-height:2.6em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod-card__title a{color:inherit}
.prod-card__title a:hover{color:var(--color-accent)}
.prod-card__foot{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-top:var(--space-xs);border-top:var(--rule-hair) solid var(--color-rule)}
.prod-price{font-family:var(--font-display);font-weight:560;color:var(--color-accent);font-size:var(--text-lg)}
.prod-price small{font-weight:400;color:var(--color-ink-2);font-size:var(--text-xs);font-family:var(--font-body)}
.prod-price--ask{color:var(--color-ink-2);font-size:var(--text-md);font-style:italic;font-family:var(--font-body)}
.prod-card__btn{font-size:var(--text-sm);font-weight:600;letter-spacing:.02em;color:var(--color-ink);
  border-bottom:var(--rule-hair) solid var(--color-rule-2);padding:.4em 0 3px;white-space:nowrap;
  transition:color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}
.prod-card__btn:hover{color:var(--color-accent);border-color:var(--color-accent)}

/* Filter bar */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--space-xl);
  padding-bottom:var(--space-md);border-bottom:var(--rule-hair) solid var(--color-rule)}
.filter-chip{padding:.5em 1.05em;border-radius:var(--radius-pill);border:var(--rule-hair) solid var(--color-rule-2);
  background:transparent;color:var(--color-ink);font-family:var(--font-body);font-weight:500;font-size:var(--text-sm);
  cursor:pointer;transition:all var(--dur-short) var(--ease-out)}
.filter-chip:hover{border-color:var(--color-accent);color:var(--color-accent)}
.filter-chip.active{background:var(--color-accent);color:var(--color-accent-ink);border-color:var(--color-accent)}

/* ====================== SPLIT / ABOUT ====================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,var(--space-2xl));align-items:center}
.split__media img{border-radius:var(--radius);border:var(--rule-hair) solid var(--color-rule-2);width:100%;object-fit:cover;aspect-ratio:4/3}
.split .kicker{display:inline-flex;align-items:center;gap:.7em;margin-bottom:1rem}
.split .kicker::before{content:"";width:26px;height:2px;background:var(--color-gold)}
.split h2{font-size:var(--text-2xl);margin:0 0 var(--space-sm)}
.feature-list{list-style:none;padding:0;margin:var(--space-md) 0 var(--space-lg)}
.feature-list li{position:relative;padding:.5em 0 .5em 30px;color:var(--color-ink);
  border-bottom:var(--rule-hair) solid var(--color-rule)}
.feature-list li:last-child{border-bottom:0}
.feature-list li:before{content:"—";position:absolute;left:0;color:var(--color-accent);font-weight:700}

/* ====================== ARTICLE CARDS ====================== */
.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg)}
.article-card{background:transparent;border:0;border-top:var(--rule-thick) solid var(--color-ink);
  display:flex;flex-direction:column;padding-top:var(--space-sm);transition:transform var(--dur-short) var(--ease-out)}
.article-card:hover{transform:translateY(-3px)}
.article-card__media{aspect-ratio:16/10;overflow:hidden;background:var(--color-paper-2);border-radius:var(--radius-sm)}
.article-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-mid) var(--ease-out)}
.article-card:hover .article-card__media img{transform:scale(1.05)}
.article-card__body{padding:var(--space-sm) 2px 0}
.article-card__meta{font-size:var(--text-xs);color:var(--color-accent);font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;margin-bottom:8px}
.article-card__body h3{font-size:var(--text-lg);margin:0 0 8px}
.article-card:hover .article-card__body h3{color:var(--color-accent)}
.article-card__body p{color:var(--color-ink-2);font-size:var(--text-sm);margin:0}

/* ====================== TESTIMONIALS (pull-quote) ====================== */
.testi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-xl) var(--space-lg)}
.testi{background:transparent;border:0;border-top:var(--rule-hair) solid var(--color-rule-2);
  padding:var(--space-md) 0 0;position:relative}
.testi:before{content:"\201C";font-family:var(--font-display);position:absolute;top:-.35em;left:-2px;
  font-size:3.2rem;color:var(--color-gold);opacity:.55;line-height:1}
.testi p{position:relative;color:var(--color-ink);font-size:var(--text-md);line-height:1.62;
  padding-top:var(--space-sm)}
.testi__who{display:flex;align-items:center;gap:12px;margin-top:var(--space-md)}
.testi__ava{width:44px;height:44px;border-radius:50%;background:var(--color-accent);color:var(--color-gold-soft);
  display:grid;place-items:center;font-weight:700;font-family:var(--font-display);flex:none}
.testi__who b{display:block;color:var(--color-ink);font-family:var(--font-display);font-weight:560}
.testi__who span{font-size:var(--text-xs);color:var(--color-ink-2);letter-spacing:.02em}

/* ====================== PARTNERS ====================== */
.partners{display:flex;flex-wrap:wrap;justify-content:center;gap:0}
.partner-chip{padding:.8em 1.5em;background:transparent;border:0;
  font-family:var(--font-display);font-weight:500;color:var(--color-ink-2);font-size:var(--text-md);
  position:relative}
.partner-chip+.partner-chip::before{content:"";position:absolute;left:0;top:25%;height:50%;width:1px;background:var(--color-rule-2)}

/* ====================== PAGE HEAD (inner, dark broadsheet band) ====================== */
.page-head{background:var(--color-dark);color:var(--color-accent-ink);
  padding:clamp(2.5rem,6vw,var(--space-2xl)) 0;border-bottom:3px solid var(--color-gold)}
.page-head h1{color:var(--color-paper);font-size:var(--text-display-s);margin:0 0 8px;letter-spacing:-0.015em}
/* Trang nội dung (prose/faq): hero thu về đúng cột --measure để cùng trục với thân bài.
 * Đặt max-width TRÊN .container (nó đã có margin:0 auto) — lồng div bên trong sẽ bị
 * cộng padding hai lần ở mobile. KHÔNG dùng cho trang catalogue/marketing (san-pham, index). */
.page-head--narrow>.container{max-width:var(--measure)}
.page-head p{color:oklch(90% 0.02 84 / .85)}
.breadcrumb{font-size:var(--text-xs);color:var(--color-gold-soft);letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:var(--space-md)}
.breadcrumb a{color:var(--color-gold-soft)}
.breadcrumb a:hover{color:var(--color-gold)}
.breadcrumb span{margin:0 8px;opacity:.6}

/* ====================== PROSE / CONTENT ====================== */
.prose{max-width:var(--measure);margin-inline:auto}
.prose>p,.prose>ul,.prose>ol{font-size:var(--text-md)}
/* Con TRỰC TIẾP: chỉ tiêu đề chạy trong dòng văn. Nếu để `.prose h2` thì nó cùng
 * specificity với `.sec-head h2` nhưng nằm sau → đè mất, làm tiêu đề section bị
 * nhỏ lại (text-xl thay vì text-2xl) và dính margin-top 1.5em, khiến kicker rời
 * khỏi tiêu đề của chính nó. */
.prose>h2{font-size:var(--text-xl);margin-top:1.5em}
.prose h3{font-size:var(--text-lg);color:var(--color-accent);margin-top:1.5em}
.prose img{border-radius:var(--radius);border:var(--rule-hair) solid var(--color-rule-2);margin:1.2em 0}
.prose ul,.prose ol{padding-left:1.25em;margin:0 0 1.2em}
.prose li{margin-bottom:.45em}
.prose a{border-bottom:var(--rule-hair) solid var(--color-accent-soft)}
.prose a:hover{border-color:var(--color-accent)}
.info-card{background:var(--color-paper-3);border:var(--rule-hair) solid var(--color-rule);
  border-left:3px solid var(--color-accent);border-radius:var(--radius-sm);
  padding:var(--space-md) var(--space-lg);margin:0 0 var(--space-md);box-shadow:var(--shadow-sm)}
.info-card h3{margin-top:0}

/* ====================== TRỤ CAM KẾT (B2B: trang chủ + trang đại lý) ====================== */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-top:var(--rule-hair) solid var(--color-rule)}
.pillar{padding:var(--space-lg) var(--space-lg) var(--space-lg) 0;position:relative}
.pillar+.pillar{padding-left:var(--space-lg)}
.pillar+.pillar::before{content:"";position:absolute;left:0;top:var(--space-lg);
  height:calc(100% - var(--space-lg)*2);width:1px;background:var(--color-rule)}
.pillar h3{margin:0 0 var(--space-xs);font-size:var(--text-lg);color:var(--color-accent)}
.pillar p{margin:0;color:var(--color-ink-2)}
.pillars__cta{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-lg)}
@media(max-width:860px){
  .pillars{grid-template-columns:minmax(0,1fr)}
  .pillar,.pillar+.pillar{padding:var(--space-lg) 0}
  .pillar+.pillar::before{left:0;top:0;height:1px;width:100%}
}

/* ====================== FAQ ====================== */
.faq{max-width:var(--measure);margin-inline:auto}
.faq-item{border-bottom:var(--rule-hair) solid var(--color-rule)}
.faq-item:first-child{border-top:var(--rule-hair) solid var(--color-rule)}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:var(--space-md) 0;
  font-family:var(--font-display);font-weight:560;font-size:var(--text-lg);color:var(--color-ink);
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  transition:color var(--dur-short) var(--ease-out)}
.faq-q:hover{color:var(--color-accent)}
.faq-q:after{content:"+";color:var(--color-gold);font-size:1.5rem;font-family:var(--font-body);
  transition:transform var(--dur-short) var(--ease-out);flex:none}
.faq-item.open .faq-q{color:var(--color-accent)}
.faq-item.open .faq-q:after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height var(--dur-mid) var(--ease-out);color:var(--color-ink-2)}
.faq-a p{margin:0 0 1em}
.faq-item.open .faq-a{padding-bottom:var(--space-md)}

/* ====================== CONTACT ====================== */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,var(--space-2xl));align-items:start}
.contact-info h2{font-size:var(--text-xl)}
.contact-info .info-row{display:flex;gap:14px;align-items:flex-start;margin-bottom:var(--space-md);
  padding-bottom:var(--space-md);border-bottom:var(--rule-hair) solid var(--color-rule)}
.contact-info .ic{width:40px;height:40px;border-radius:var(--radius-sm);background:var(--color-accent);color:var(--color-gold-soft);
  display:grid;place-items:center;flex:none;font-size:1.05rem}
.contact-info b{display:block;color:var(--color-ink);font-family:var(--font-display);font-weight:560;margin-bottom:2px}
.contact-info span,.contact-info a{color:var(--color-ink-2);font-size:var(--text-sm)}
.contact-info a:hover{color:var(--color-accent)}
.form-card{background:var(--color-paper-3);border:var(--rule-hair) solid var(--color-rule);
  border-radius:var(--radius);padding:clamp(1.5rem,4vw,var(--space-xl));box-shadow:var(--shadow-sm)}
.form-card h2{font-size:var(--text-xl)}
.form-row{margin-bottom:var(--space-md)}
.form-row label{display:block;font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);
  margin-bottom:6px;color:var(--color-ink)}
.form-row input,.form-row textarea,.form-row select{width:100%;padding:.75em .9em;
  border:var(--rule-hair) solid var(--color-rule-2);border-radius:var(--radius-sm);
  font-family:inherit;font-size:var(--text-sm);background:var(--color-paper);color:var(--color-ink);
  transition:border-color var(--dur-short) var(--ease-out),background var(--dur-short) var(--ease-out)}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{outline:0;
  border-color:var(--color-accent);background:var(--color-paper-3)}
.form-note{font-size:var(--text-xs);color:var(--color-ink-2);margin-top:6px}
.map-embed{border-radius:var(--radius);overflow:hidden;border:var(--rule-hair) solid var(--color-rule);margin-top:var(--space-sm)}
.map-embed iframe{display:block;width:100%;height:320px;border:0}

/* ====================== PRODUCT DETAIL ====================== */
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,var(--space-2xl));align-items:start}
.pd-media{background:var(--color-paper-2);border-radius:var(--radius);padding:var(--space-xl);display:grid;place-items:center;
  border:var(--rule-hair) solid var(--color-rule);min-height:360px}
.pd-media img{max-height:440px;width:auto;object-fit:contain;mix-blend-mode:multiply}
.pd-media--photo{padding:0;overflow:hidden;min-height:0;aspect-ratio:1/1;position:relative;display:block}
.pd-media--photo img{position:absolute;inset:0;max-height:none;width:100%;height:100%;object-fit:cover;object-position:center;mix-blend-mode:normal}
.pd-cat{color:var(--color-accent);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:var(--text-xs)}
.pd-info h1{font-size:var(--text-2xl);margin:.3em 0 .3em}
.pd-price{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-accent);font-weight:560;margin:var(--space-sm) 0 var(--space-lg)}
.pd-spec{list-style:none;padding:0;margin:0 0 var(--space-lg);border-top:var(--rule-hair) solid var(--color-rule)}
.pd-spec li{display:flex;gap:14px;padding:.7em 0;border-bottom:var(--rule-hair) solid var(--color-rule);font-size:var(--text-sm)}
.pd-spec li b{width:140px;color:var(--color-ink-2);font-weight:600;flex:none;font-family:var(--font-body)}
.pd-cta{display:flex;gap:12px;flex-wrap:wrap}
.pd-desc{margin-top:var(--space-2xl);padding-top:var(--space-lg);border-top:var(--rule-hair) solid var(--color-rule)}
.pd-desc h2{font-size:var(--text-xl);margin-bottom:var(--space-sm)}
.pd-desc p{color:var(--color-ink);line-height:1.8;max-width:var(--measure)}
.pd-desc ul{max-width:var(--measure);margin:0 0 var(--space-sm);padding-left:1.2em}
.pd-desc li{margin-bottom:6px;color:var(--color-ink)}
.pd-note{font-size:var(--text-sm);color:var(--color-ink-2);background:var(--color-paper-2);border-radius:var(--radius-sm);
  border-left:3px solid var(--color-gold);padding:var(--space-sm) var(--space-md);margin-top:var(--space-md)}

/* ====================== FOOTER (Ft4 dense colophon) ====================== */
.site-footer{background:var(--color-dark);color:oklch(88% 0.02 84 / .8);
  padding:var(--space-2xl) 0 0;margin-top:var(--space-lg);border-top:3px solid var(--color-gold)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:var(--space-xl);padding-bottom:var(--space-xl)}
.site-footer h4{color:var(--color-gold);font-family:var(--font-body);font-size:var(--text-xs);
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:var(--space-md);font-weight:600}
.site-footer p{color:oklch(86% 0.02 84 / .72);font-size:var(--text-sm)}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin-bottom:.6em}
.footer-links a{color:oklch(88% 0.02 84 / .82);font-size:var(--text-sm)}
.footer-links a:hover{color:var(--color-gold)}
.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:var(--space-sm)}
.footer-brand .brand__logo{width:44px;height:44px;background:oklch(100% 0 0 / .06);border-color:oklch(100% 0 0 / .12);color:var(--color-gold)}
.footer-brand b{font-family:var(--font-display);color:var(--color-paper);font-size:var(--text-xl);font-weight:560;letter-spacing:.04em}
.foot-social{display:flex;gap:10px;margin-top:var(--space-md)}
.foot-social a{width:36px;height:36px;border-radius:var(--radius-sm);background:oklch(100% 0 0 / .07);
  display:grid;place-items:center;color:var(--color-accent-ink);font-weight:600;
  transition:background var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}
.foot-social a:hover{background:var(--color-gold);color:var(--color-dark)}
.footer-bottom{border-top:var(--rule-hair) solid oklch(100% 0 0 / .12);padding:var(--space-md) 0;text-align:center;
  font-size:var(--text-xs);color:oklch(84% 0.02 84 / .6);letter-spacing:.04em}

/* ====================== FLOATING CONTACT ====================== */
.float-contact{position:fixed;right:16px;bottom:16px;z-index:70;display:flex;flex-direction:column;gap:10px}
.float-contact a{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;
  box-shadow:var(--shadow);font-size:1.2rem;font-weight:700;transition:transform var(--dur-short) var(--ease-out)}
.float-contact a:hover{transform:scale(1.08)}
.fc-zalo{background:#0068ff}
.fc-phone{background:#1f9d55}
.fc-mess{background:#0084ff}
@media (prefers-reduced-motion:no-preference){
  .fc-phone{animation:pulse 2s infinite}
}
@keyframes pulse{0%{box-shadow:0 0 0 0 oklch(55% .15 150 / .5)}70%{box-shadow:0 0 0 13px oklch(55% .15 150 / 0)}100%{box-shadow:0 0 0 0 oklch(55% .15 150 / 0)}}

/* ====================== MISC ====================== */
.empty-note{text-align:center;color:var(--color-ink-2);padding:var(--space-xl);font-style:italic;grid-column:1/-1}

/* ====================== RESPONSIVE ====================== */
@media(max-width:1024px){
  .cat-btn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prod-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
  .trust .container{grid-template-columns:repeat(3,1fr);gap:var(--space-md) 0;row-gap:var(--space-md)}
  .trust__item:nth-child(3n+1)::before{display:none}
}
@media(max-width:820px){
  .nav__menu{position:fixed;top:60px;right:0;width:min(300px,86vw);height:calc(100dvh - 60px);
    background:var(--color-paper);flex-direction:column;align-items:stretch;gap:2px;padding:var(--space-md) var(--space-sm);
    box-shadow:var(--shadow);transform:translateX(105%);transition:transform var(--dur-mid) var(--ease-out);
    overflow-y:auto;border-left:var(--rule-hair) solid var(--color-rule)}
  .nav__menu.open{transform:translateX(0)}
  .nav__menu>li>a{padding:.85em .6em;border-bottom:var(--rule-hair) solid var(--color-rule)}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    background:transparent;padding:0 0 var(--space-xs) var(--space-md);display:none}
  .nav__menu>li.has-sub.open .submenu{display:block}
  .nav__toggle{display:block}
  .nav__cta .btn{display:none}
  .hero-editorial .container{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}
  .hero-editorial__body{max-width:100%}
  .hero-editorial__figure{order:-1;max-width:460px}
  .hero-editorial__figure::after{display:none}
  .split,.contact-grid,.pd-grid{grid-template-columns:1fr;gap:var(--space-lg)}
  .article-grid,.testi-grid{grid-template-columns:1fr;gap:var(--space-lg)}
  .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .prod-grid,.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md) var(--space-sm)}
  .cat-btn-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:var(--space-lg)}
  .trust .container{grid-template-columns:1fr 1fr}
  .trust__item:nth-child(odd)::before{display:none}
  .masthead__rule{flex-wrap:wrap}
}