/* ============================================================
   MAISON LUXE — Stylesheet
   Phong cach editorial xa xi. Khoa 1 mau nhan (cognac),
   bo goc sac net, khong gradient.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  --ink:#141414;
  --ink-soft:#4a4a48;
  --ink-mute:#8a8a86;
  --paper:#ffffff;
  --tile:#f4f3f0;        /* nen the san pham */
  --line:#e6e4df;        /* duong ke mong */
  --cognac:#a86a3d;      /* mau nhan duy nhat */
  --cognac-deep:#8c5530;
  --blush:#f3dddd;
  --sage:#d7e0d2;
  --sky:#d6e5ec;

  --bar-h:64px;          /* chieu cao nav desktop */
  --maxw:1480px;
  --gut:clamp(16px,4vw,48px);

  --r:2px;               /* bo goc sac net */
  --ease:cubic-bezier(.16,1,.3,1);

  --f-display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --f-body:"Manrope",system-ui,-apple-system,sans-serif;
  --f-wordmark:"Playfair Display",Georgia,serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.04;letter-spacing:-.01em}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}

/* ---------- Helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.eyebrow{
  font-family:var(--f-body);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;color:var(--ink-soft);
}
.display{
  font-family:var(--f-display);text-transform:uppercase;
  font-weight:800;letter-spacing:-.02em;line-height:.96;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Lien ket dang chu + mui ten */
.link-arrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  padding-bottom:3px;border-bottom:1px solid var(--ink);
  transition:gap .3s var(--ease),opacity .3s var(--ease);
}
.link-arrow:hover{gap:.95em}
.link-arrow .ar{transition:transform .3s var(--ease)}
.link-arrow:hover .ar{transform:translateX(3px)}

/* Nut den dac */
.btn{
  display:inline-block;background:var(--ink);color:var(--paper);
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  padding:16px 34px;border-radius:var(--r);
  transition:background .3s var(--ease),transform .15s var(--ease);
}
.btn:hover{background:#000}
.btn:active{transform:scale(.985)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn--light{background:var(--paper);color:var(--ink)}

/* ============================================================
   THANH THONG BAO
   ============================================================ */
.announce{
  background:var(--ink);color:var(--paper);
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  text-align:center;padding:9px 44px;position:relative;
}
.announce a{text-decoration:underline;text-underline-offset:2px}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line)}
.nav{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  height:var(--bar-h);padding:0 var(--gut);
}
.nav__left,.nav__right{display:flex;align-items:center;gap:22px}
.nav__right{justify-content:flex-end}
.nav__icon{width:24px;height:24px;display:grid;place-items:center;color:var(--ink)}
.nav__icon svg{width:21px;height:21px}
.wordmark{
  font-family:var(--f-wordmark);font-weight:800;font-size:30px;letter-spacing:.02em;
  text-align:center;color:var(--ink);line-height:1;
}
.nav__links{display:none}
@media(min-width:1080px){
  .nav__links{display:flex;gap:26px}
  .nav__links a{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;padding:6px 0;position:relative}
  .nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;background:var(--ink);transition:right .3s var(--ease)}
  .nav__links a:hover::after{right:0}
  .burger{display:none}
}

/* ---------- Menu mobile (off-canvas) ---------- */
.drawer{
  position:fixed;inset:0 40% 0 0;max-width:420px;background:var(--paper);z-index:80;
  transform:translateX(-100%);transition:transform .4s var(--ease);
  padding:24px var(--gut);overflow-y:auto;box-shadow:0 0 0 100vmax rgba(0,0,0,0);
}
.drawer.open{transform:translateX(0)}
.drawer__scrim{position:fixed;inset:0;background:rgba(20,20,20,.4);z-index:75;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.drawer__scrim.open{opacity:1;visibility:visible}
.drawer__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.drawer__close{font-size:26px;line-height:1}
.drawer__nav a{display:block;font-family:var(--f-display);text-transform:uppercase;font-weight:800;font-size:26px;letter-spacing:-.01em;padding:11px 0;border-bottom:1px solid var(--line)}
.drawer__nav a:hover{color:var(--cognac)}

/* ============================================================
   HERO (campaign tran vien)
   ============================================================ */
.hero{position:relative;min-height:clamp(440px,82vh,820px);display:flex;align-items:flex-end;overflow:hidden;background:var(--tile)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,0) 45%)}
.hero__inner{position:relative;color:var(--paper);padding:0 var(--gut) clamp(34px,6vw,76px);width:100%;max-width:var(--maxw);margin:0 auto}
.hero__kicker{font-family:var(--f-wordmark);font-style:italic;font-size:clamp(20px,3vw,30px);margin-bottom:6px;opacity:.95}
.hero__title{font-family:var(--f-display);text-transform:uppercase;font-weight:800;font-size:clamp(40px,8vw,104px);line-height:.92;letter-spacing:-.02em;max-width:14ch}
.hero__ctas{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:26px}
.hero__ctas .link-arrow{color:var(--paper);border-bottom-color:var(--paper)}

/* Hero canh giua (kieu manifesto) */
.hero--center{align-items:center;text-align:center}
.hero--center .hero__inner{text-align:center}
.hero--center .hero__title{margin:0 auto;max-width:18ch}
.hero--center .hero__ctas{justify-content:center}

/* ============================================================
   SECTION editorial / split / color-block
   ============================================================ */
.section{padding:clamp(56px,8vw,120px) 0}
.section--tight{padding:clamp(36px,5vw,64px) 0}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px}
.section__title{font-family:var(--f-display);text-transform:uppercase;font-weight:800;font-size:clamp(24px,3.6vw,46px);letter-spacing:-.02em}

/* Editorial: anh lon + chu de */
.editorial{position:relative;min-height:clamp(420px,68vh,720px);display:flex;align-items:flex-end;overflow:hidden}
.editorial img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.editorial__c{position:relative;padding:clamp(28px,5vw,60px);color:var(--paper);z-index:1}
.editorial__c .section__title{color:var(--paper);margin-bottom:18px;max-width:16ch}
.editorial--dark::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.5),transparent 55%)}

/* Hai khoi canh nhau */
.duo{display:grid;grid-template-columns:1fr;gap:4px}
@media(min-width:768px){.duo{grid-template-columns:1fr 1fr}}
.duo .editorial{min-height:clamp(360px,52vh,640px)}

/* Color block quang ba */
.promo{display:grid;grid-template-columns:1fr;align-items:center;min-height:clamp(360px,54vh,560px)}
@media(min-width:880px){.promo{grid-template-columns:1.05fr .95fr}}
.promo__media{height:100%;min-height:300px;background:var(--tile)}
.promo__media img{width:100%;height:100%;object-fit:cover}
.promo__body{padding:clamp(36px,6vw,88px)}
.promo--blush{background:var(--blush)}
.promo--sage{background:var(--sage)}
.promo--sky{background:var(--sky)}
.promo__title{font-family:var(--f-display);text-transform:uppercase;font-weight:800;font-size:clamp(30px,5vw,68px);line-height:.94;margin:10px 0 22px}
.promo__text{max-width:42ch;color:var(--ink-soft)}
.promo--reverse .promo__media{order:-1}
@media(min-width:880px){.promo--reverse .promo__media{order:1}}

/* ============================================================
   THE SAN PHAM + CAROUSEL
   ============================================================ */
.pcard{position:relative;display:block}
.pcard__media{position:relative;background:var(--tile);aspect-ratio:4/5;overflow:hidden}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:opacity .4s var(--ease),transform .8s var(--ease)}
.pcard:hover .pcard__media img{transform:scale(1.035)}
.pcard__collection{position:absolute;top:14px;left:14px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-soft)}
.pcard__fav{position:absolute;top:11px;right:12px;width:30px;height:30px;display:grid;place-items:center;color:var(--ink)}
.pcard__fav svg{width:20px;height:20px}
.pcard__name{margin-top:16px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.pcard__price{margin-top:5px;font-size:13.5px;color:var(--ink-soft)}

/* Carousel ngang co the keo */
.carousel{position:relative}
.carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;padding-bottom:6px}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track>*{scroll-snap-align:start}
@media(min-width:640px){.carousel__track{grid-auto-columns:42%}}
@media(min-width:1024px){.carousel__track{grid-auto-columns:23.5%}}
.carousel__btn{position:absolute;top:38%;width:42px;height:42px;border-radius:50%;background:var(--paper);box-shadow:0 1px 10px rgba(0,0,0,.12);display:grid;place-items:center;z-index:2;font-size:18px}
.carousel__btn--prev{left:-8px}
.carousel__btn--next{right:-8px}
@media(max-width:640px){.carousel__btn{display:none}}

/* ============================================================
   PLP — trang danh sach san pham
   ============================================================ */
.subnav{border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav__inner{display:flex;align-items:center;gap:26px;padding:14px var(--gut);white-space:nowrap}
.subnav__title{font-family:var(--f-display);text-transform:uppercase;font-weight:800;font-size:15px;letter-spacing:.02em;display:flex;align-items:center;gap:12px}
.subnav a{font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.subnav a:hover,.subnav a.is-active{color:var(--ink)}

.plp-hero{position:relative;height:clamp(220px,34vw,420px);background:var(--tile);overflow:hidden}
.plp-hero img{width:100%;height:100%;object-fit:cover}

.toolbar{display:flex;align-items:center;justify-content:space-between;padding:18px var(--gut);border-bottom:1px solid var(--line)}
.toolbar__left{display:flex;gap:8px;align-items:center;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em}
.toolbar__left button:hover{color:var(--cognac)}
.density{display:flex;gap:14px}
.density button{color:var(--ink-mute)}
.density button.is-active{color:var(--ink)}
.density svg{width:18px;height:18px}

.pgrid{display:grid;gap:6px 6px;padding:6px var(--gut) clamp(56px,8vw,110px)}
.pgrid{grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.pgrid[data-cols="4"]{grid-template-columns:repeat(4,1fr)}}
@media(min-width:900px){.pgrid[data-cols="2"]{grid-template-columns:repeat(2,1fr)}}
.pgrid .pcard__media{aspect-ratio:4/5}

/* ============================================================
   PDP — chi tiet san pham
   ============================================================ */
.pdp{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:900px){.pdp{grid-template-columns:1.15fr .85fr}}
.pdp__gallery{display:grid;gap:4px}
@media(min-width:560px){.pdp__gallery{grid-template-columns:1fr 1fr}}
.pdp__gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--tile)}
.pdp__info{padding:clamp(28px,5vw,72px);position:sticky;top:var(--bar-h);align-self:start}
.pdp__collection{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-soft)}
.pdp__name{font-family:var(--f-display);text-transform:uppercase;font-weight:800;font-size:clamp(24px,3vw,38px);margin:10px 0 14px;line-height:1}
.pdp__price{font-size:18px;margin-bottom:26px}
.pdp__swatches{display:flex;gap:10px;margin:18px 0 28px}
.pdp__swatch{width:30px;height:30px;border-radius:50%;border:1px solid var(--line)}
.pdp__desc{color:var(--ink-soft);max-width:52ch;margin-bottom:30px}
.pdp__cta{display:flex;flex-direction:column;gap:12px;max-width:380px}

/* ============================================================
   BLOG — tap chi
   ============================================================ */
.featured{position:relative;min-height:clamp(420px,72vh,760px);display:flex;align-items:flex-end;overflow:hidden;background:var(--tile)}
.featured img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.featured::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 60%)}
.featured__c{position:relative;z-index:1;color:var(--paper);padding:clamp(28px,5vw,64px);max-width:760px}
.featured__cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;margin-bottom:14px}
.featured__title{font-family:var(--f-display);text-transform:uppercase;font-weight:800;font-size:clamp(28px,5vw,64px);line-height:.96;margin-bottom:16px}
.featured__meta{font-size:12px;letter-spacing:.06em;opacity:.85}

.blog-grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,48px);padding:clamp(48px,7vw,96px) var(--gut)}
@media(min-width:640px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
.acard__media{aspect-ratio:3/2;overflow:hidden;background:var(--tile)}
.acard__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.acard:hover .acard__media img{transform:scale(1.04)}
.acard__cat{margin-top:16px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--cognac)}
.acard__title{margin-top:9px;font-family:var(--f-display);text-transform:uppercase;font-weight:800;font-size:clamp(18px,2vw,23px);line-height:1.02}
.acard__ex{margin-top:10px;color:var(--ink-soft);font-size:14.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acard__meta{margin-top:12px;font-size:11.5px;letter-spacing:.06em;color:var(--ink-mute)}

/* Bai viet don */
.article{max-width:760px;margin:0 auto;padding:clamp(40px,6vw,80px) var(--gut)}
.article__cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--cognac);margin-bottom:16px}
.article__title{font-family:var(--f-display);text-transform:uppercase;font-weight:800;font-size:clamp(30px,5vw,58px);line-height:.98;margin-bottom:18px}
.article__meta{font-size:12.5px;letter-spacing:.06em;color:var(--ink-mute);margin-bottom:30px}
.article__lead img{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:34px}
.article__body{font-size:17px;line-height:1.8;color:#23231f}
.article__body h2{font-family:var(--f-display);text-transform:uppercase;font-size:26px;margin:38px 0 14px}
.article__body img{margin:28px 0}
.article__body blockquote{border-left:2px solid var(--cognac);margin:30px 0;padding:4px 0 4px 24px;font-family:var(--f-wordmark);font-style:italic;font-size:22px}

/* ============================================================
   FOOTER
   ============================================================ */
.foot-cats{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
@media(min-width:768px){.foot-cats{grid-template-columns:repeat(4,1fr)}}
.foot-cats a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:26px var(--gut);font-family:var(--f-display);text-transform:uppercase;font-weight:800;font-size:15px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.foot-cats a:hover{color:var(--cognac)}

.foot-help{display:grid;grid-template-columns:1fr;gap:24px;padding:clamp(40px,6vw,72px) var(--gut);border-bottom:1px solid var(--line)}
@media(min-width:768px){.foot-help{grid-template-columns:repeat(3,1fr)}}
.foot-help h4{font-size:13px;text-transform:uppercase;letter-spacing:.14em;margin-bottom:8px}
.foot-help p{font-size:14px;color:var(--ink-soft);max-width:34ch}

.brand-statement{padding:clamp(40px,6vw,72px) var(--gut);border-bottom:1px solid var(--line)}
.brand-statement h3{font-family:var(--f-display);text-transform:uppercase;font-weight:800;font-size:clamp(18px,2.4vw,26px);margin-bottom:14px}
.brand-statement p{max-width:70ch;color:var(--ink-soft)}

.newsletter{padding:clamp(40px,6vw,72px) var(--gut);border-bottom:1px solid var(--line);max-width:620px}
.newsletter h4{font-size:13px;text-transform:uppercase;letter-spacing:.14em;margin-bottom:8px}
.newsletter p{font-size:14px;color:var(--ink-soft);margin-bottom:18px}
.newsletter form{display:flex;border-bottom:1px solid var(--ink)}
.newsletter input{flex:1;border:0;padding:12px 0;font-size:14px;background:transparent;outline:none}
.newsletter button{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em}

.foot-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;padding:clamp(36px,5vw,60px) var(--gut)}
@media(min-width:768px){.foot-cols{grid-template-columns:repeat(3,1fr)}}
.foot-cols h4{font-size:12px;text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px}
.foot-cols a{display:block;font-size:13.5px;color:var(--ink-soft);padding:5px 0}
.foot-cols a:hover{color:var(--ink)}

.foot-bottom{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;padding:24px var(--gut);border-top:1px solid var(--line)}
.foot-social{display:flex;gap:16px}
.foot-social a{color:var(--ink)}
.foot-social svg{width:18px;height:18px}
.foot-copy{font-size:11.5px;color:var(--ink-mute);letter-spacing:.04em}

/* ============================================================
   Hieu ung hien khi cuon
   ============================================================ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto !important}
}