/* ==========================================================================
   Vivian Bridal — design system
   Token lấy đo trực tiếp từ graceloveslace.com:
     brand navy #002B41 · nền be #F5F2EE · tiêu đề serif Didot · thân Avenir 13px
   Didot/Avenir là font thương mại nên thay bằng bản self-host tương đương:
     Playfair Display (serif Didone) + Nunito Sans (geometric sans).

   BỘ KÝ TỰ: phải có đủ latin + latin-ext + vietnamese. Chỉ tải mỗi bộ latin thì
   chữ có dấu tiếng Việt (Ớ, Ụ, Ệ, Ậ, Ư…) không có glyph, trình duyệt rơi sang
   font hệ thống — nét mảnh hơn hẳn nên nhìn như chữ bị mất màu giữa câu.
   Mỗi bộ một file riêng kèm unicode-range: trình duyệt chỉ tải bộ nào cần.
   ========================================================================== */

@font-face{font-family:'Vivian Sans';src:url('/static/fonts/nunito-sans-latin.woff2') format('woff2');
  font-weight:200 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Vivian Sans';src:url('/static/fonts/nunito-sans-latin-ext.woff2') format('woff2');
  font-weight:200 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Vivian Sans';src:url('/static/fonts/nunito-sans-vietnamese.woff2') format('woff2');
  font-weight:200 700;font-style:normal;font-display:swap;
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Vivian Serif';src:url('/static/fonts/playfair-latin.woff2') format('woff2');
  font-weight:400 600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Vivian Serif';src:url('/static/fonts/playfair-latin-ext.woff2') format('woff2');
  font-weight:400 600;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Vivian Serif';src:url('/static/fonts/playfair-vietnamese.woff2') format('woff2');
  font-weight:400 600;font-style:normal;font-display:swap;
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Vivian Serif';src:url('/static/fonts/playfair-italic-latin.woff2') format('woff2');
  font-weight:400 600;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Vivian Serif';src:url('/static/fonts/playfair-italic-latin-ext.woff2') format('woff2');
  font-weight:400 600;font-style:italic;font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Vivian Serif';src:url('/static/fonts/playfair-italic-vietnamese.woff2') format('woff2');
  font-weight:400 600;font-style:italic;font-display:swap;
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}

:root{
  --navy:#002B41;          /* chữ + nút chính */
  --navy-70:rgba(0,43,65,.7);
  --navy-45:rgba(0,43,65,.45);
  --line:rgba(0,43,65,.16);
  --sand:#F5F2EE;          /* nền section xen kẽ + footer */
  --sand-deep:#EDE7DE;
  --white:#fff;

  /* Vàng đồng của thương hiệu — lấy từ logo Vivian.
     --gold      : màu nền nút. Đã hạ tối hơn logo một bậc để chữ trắng trên nút
                   đạt tương phản đọc được (bản sáng của logo thì chữ trắng mờ).
     --gold-lit  : bản sáng, dùng cho gradient logo và trạng thái hover.
     --gold-deep : bản đậm, dùng cho viền và chữ trên nền sáng. */
  --gold:#8C6B2F;
  --gold-lit:#E3C57C;
  --gold-mid:#C9A24D;
  --gold-deep:#6E5323;
  --clay:var(--gold-deep);  /* accent ấm — link "read more" */

  --serif:'Vivian Serif',Didot,'Bodoni MT','Playfair Display',Georgia,serif;
  --sans:'Vivian Sans',Avenir,'Avenir Next','Nunito Sans',-apple-system,
         BlinkMacSystemFont,'Segoe UI',sans-serif;

  --gut:24px;              /* padding mép màn hình */
  --maxw:1600px;
  --head-h:64px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--navy);
  font-family:var(--sans);font-size:13px;font-weight:300;line-height:1.65;
  letter-spacing:.01em;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}

/* ── Typography ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:.005em;
  line-height:1.12;margin:0}
.d1{font-size:clamp(38px,5.6vw,72px)}      /* hero */
.d2{font-size:clamp(30px,3.6vw,50px)}      /* section heading — GLL đo được 50px */
.d3{font-size:clamp(22px,2.2vw,30px)}
.d4{font-size:clamp(17px,1.5vw,21px)}
.lede{font-size:14px;font-weight:300;color:var(--navy-70);max-width:56ch}
.eyebrow{font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:400;color:var(--navy-45)}
.it{font-style:italic}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.wrap-n{max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.wrap-r{max-width:820px;margin:0 auto;padding:0 var(--gut)}   /* trang chữ */
.sect{padding:clamp(56px,7vw,104px) 0}
.sect-t{padding-top:clamp(56px,7vw,104px)}
.sand{background:var(--sand)}
.stack>*+*{margin-top:14px}
.rowx{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.rowx>*{min-width:0;max-width:100%}   /* nút chữ dài không lòi khỏi hàng */

/* ── Nút & link ─────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 30px;border:1px solid var(--gold);background:var(--gold);
  color:#fff;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:400;border-radius:0;transition:.25s var(--ease);white-space:nowrap}
.btn:hover{background:transparent;color:var(--gold-deep);border-color:var(--gold-deep)}
.btn-o{background:transparent;color:var(--gold-deep);border-color:var(--gold)}
.btn-o:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn-w{background:transparent;border-color:#fff;color:#fff}
.btn-w:hover{background:#fff;color:var(--navy)}
.btn-sm{padding:10px 20px}
.btn[disabled],.btn:disabled{opacity:.35;pointer-events:none}
.btn-block{display:flex;width:100%}

/* link gạch chân mảnh — chữ ký của GLL */
.ul{display:inline-block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  padding-bottom:5px;border-bottom:1px solid currentColor}
.ul:hover{opacity:.6}
.ul-clay{color:var(--clay)}

/* ── Header ─────────────────────────────────────────────────────────────── */
.ann{background:var(--navy);color:#fff;text-align:center;font-size:9.5px;
  letter-spacing:.19em;text-transform:uppercase;padding:6px 12px}
.hd{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid transparent;
  transition:.3s var(--ease)}
.hd.stuck{border-bottom-color:var(--line)}
.hd-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:16px;height:var(--head-h);padding:0 var(--gut)}
.nav{display:flex;gap:22px;align-items:center}
.nav a{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.nav a:hover{opacity:.55}
/* Logo: chữ VIVIAN mạ vàng. Dùng gradient cắt theo chữ thay vì file ảnh —
   nét luôn sắc ở mọi kích thước, đổi màu bằng một dòng CSS, và không tốn thêm
   một request ảnh ở đúng chỗ tải đầu tiên của trang. */
/* Đo lại từ file logo gốc: chữ SÁT NHAU (giãn rất nhỏ) và NÉT MẢNH.
   Trước đây để .30em/400 nên nhìn thưa và dày hơn bản thật rõ rệt. */
.logo{font-family:var(--sans);font-size:25px;letter-spacing:.03em;font-weight:200;
  text-transform:uppercase;text-align:center;white-space:nowrap;line-height:1;
  background:linear-gradient(95deg,var(--gold-deep) 0%,var(--gold-mid) 28%,
    var(--gold-lit) 62%,var(--gold-mid) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.logo small{display:block;font-family:var(--sans);font-size:7.5px;letter-spacing:.28em;
  font-weight:400;color:var(--navy-45);margin-top:5px;
  background:none;-webkit-text-fill-color:var(--navy-45)}
.hd-r{display:flex;gap:14px;align-items:center;justify-content:flex-end}
.icn{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.2}
.cartc{position:relative;background:none;border:0;padding:0;cursor:pointer}
.cartc span{position:absolute;top:-6px;right:-8px;background:var(--gold);color:#fff;
  font-size:8px;min-width:14px;height:14px;border-radius:7px;display:grid;
  place-items:center;padding:0 3px;letter-spacing:0}
.sub{background:var(--sand);text-align:center;font-size:9px;letter-spacing:.19em;
  text-transform:uppercase;padding:5px;color:var(--navy-70)}
.burger{display:none;background:none;border:0;padding:6px}

/* ── Bộ chọn ngôn ngữ ───────────────────────────────────────────────────── */
details.lang{position:relative}
details.lang summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:4px;
  font-size:10px;letter-spacing:.16em;padding:4px 2px}
details.lang summary::-webkit-details-marker{display:none}
details.lang summary:hover{opacity:.6}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;
  border:1px solid var(--line);min-width:140px;padding:5px 0;z-index:70}
.lang-menu a{display:block;padding:8px 16px;font-size:11.5px;white-space:nowrap;
  letter-spacing:.04em}
.lang-menu a:hover{background:var(--sand)}
.lang-menu a.on{font-weight:600}
.lang-menu a.on::after{content:'·';margin-left:6px;color:var(--gold)}

/* CJK: chữ Hàn/Trung/Nhật không có chữ hoa, và giãn chữ rộng làm rối mặt chữ.
   Tắt uppercase + thu letter-spacing cho các ngôn ngữ đó. */
html:lang(ko) .eyebrow,html:lang(zh) .eyebrow,html:lang(ja) .eyebrow,
html:lang(ko) .nav a,html:lang(zh) .nav a,html:lang(ja) .nav a,
html:lang(ko) .btn,html:lang(zh) .btn,html:lang(ja) .btn,
html:lang(ko) .ul,html:lang(zh) .ul,html:lang(ja) .ul,
html:lang(ko) .pname,html:lang(zh) .pname,html:lang(ja) .pname,
html:lang(ko) .ann,html:lang(zh) .ann,html:lang(ja) .ann,
html:lang(ko) .sub,html:lang(zh) .sub,html:lang(ja) .sub,
html:lang(ko) .acc summary,html:lang(zh) .acc summary,html:lang(ja) .acc summary,
html:lang(ko) label.fl,html:lang(zh) label.fl,html:lang(ja) label.fl,
html:lang(ko) .chip-f,html:lang(zh) .chip-f,html:lang(ja) .chip-f,
html:lang(ko) .ft h5,html:lang(zh) .ft h5,html:lang(ja) .ft h5,
html:lang(ko) .ft li,html:lang(zh) .ft li,html:lang(ja) .ft li,
html:lang(ko) .crumb,html:lang(zh) .crumb,html:lang(ja) .crumb,
html:lang(ko) .tbl th,html:lang(zh) .tbl th,html:lang(ja) .tbl th{
  text-transform:none;letter-spacing:.04em}
/* Serif Latin không có glyph CJK — trả về font hệ thống để tiêu đề không vỡ */
html:lang(ko) h1,html:lang(ko) h2,html:lang(ko) h3,html:lang(ko) h4,
html:lang(ja) h1,html:lang(ja) h2,html:lang(ja) h3,html:lang(ja) h4,
html:lang(zh) h1,html:lang(zh) h2,html:lang(zh) h3,html:lang(zh) h4{
  font-family:'Vivian Serif','Noto Serif KR','Noto Serif JP','Noto Serif SC',
    'Hiragino Mincho ProN','Yu Mincho','Songti SC','Apple SD Gothic Neo',serif}
html:lang(ko) body,html:lang(ja) body,html:lang(zh) body{font-size:13.5px;line-height:1.75}

/* Tiếng Việt: chữ IN HOA có dấu (Ế, Ữ, Ộ) cao hơn chữ Latin thường, line-height
   mặc định cắt mất dấu. Nới ra ở đúng những chỗ dùng uppercase. */
html:lang(vi) .ann,html:lang(vi) .sub,html:lang(vi) .nav a,html:lang(vi) .eyebrow,
html:lang(vi) .btn,html:lang(vi) .ul,html:lang(vi) .pname,html:lang(vi) .ft h5,
html:lang(vi) .ft li,html:lang(vi) .chip-f,html:lang(vi) .acc summary,
html:lang(vi) label.fl,html:lang(vi) .tbl th,html:lang(vi) .crumb{
  line-height:1.7;letter-spacing:.11em}
html:lang(vi) .ann,html:lang(vi) .sub{padding-top:8px;padding-bottom:8px}
html:lang(ko) .press blockquote,html:lang(ja) .press blockquote,
html:lang(zh) .press blockquote,html:lang(ko) .bcard blockquote,
html:lang(ja) .bcard blockquote,html:lang(zh) .bcard blockquote{font-style:normal}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:clamp(460px,78vh,760px);display:flex;
  align-items:flex-end;overflow:hidden;background:var(--sand-deep)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.06) 55%,transparent)}
.hero-in{position:relative;z-index:2;color:#fff;padding:0 var(--gut) clamp(48px,8vh,96px);
  max-width:640px}
.hero-in p{color:rgba(255,255,255,.9);margin:18px 0 26px;font-size:14px;max-width:46ch}

/* Ảnh hero sáng (nền trắng studio) thì chữ trắng chìm mất. Bật hero_text=dark
   trong admin để đổi sang chữ navy, và đổi lớp phủ từ tối sang sáng.
   Ảnh dạng này cũng thường rộng hơn 16:9 nên hạ chiều cao để đỡ cắt hai bên. */
.hero.light{min-height:clamp(400px,62vh,660px)}
.hero.light::after{
  background:linear-gradient(90deg,rgba(255,255,255,.92),rgba(255,255,255,.55) 42%,
    rgba(255,255,255,0) 68%)}
.hero.light .hero-in{color:var(--navy)}
.hero.light .hero-in p{color:var(--navy-70)}
.hero.light .hero-in .ul{color:var(--gold-deep)}

/* hero_text = none: ảnh đã có sẵn tên bộ sưu tập nung trong ảnh (title card),
   nên đè thêm tiêu đề của web lên là chồng chữ. Giấu tiêu đề khỏi mắt nhưng
   GIỮ trong HTML — trang vẫn cần đúng một thẻ H1 cho SEO và cho trình đọc
   màn hình. Chỉ để lại nút hành động ở góc dưới. */
.hero.bare::after{background:linear-gradient(0deg,rgba(0,0,0,.34),transparent 42%)}
.hero.bare .hero-in h1,.hero.bare .hero-in p{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.hero.bare .hero-in{color:#fff;max-width:none}

/* hero_align = right: dùng khi người mẫu đứng bên TRÁI ảnh. Chữ dồn sang phải
   và canh phải, để không đè lên người. */
.hero.right{justify-content:flex-end;text-align:right}
.hero.right .hero-in{margin-left:auto}
.hero.right .hero-in p{margin-left:auto}

/* ── Grid sản phẩm ──────────────────────────────────────────────────────── */
/* Lưới kiểu Uniqlo: 4 cột, thẻ gọn, giá đậm */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 16px}
.pgrid.g3{grid-template-columns:repeat(3,1fr);gap:20px}
.pcard{position:relative;display:block}
.pmedia{position:relative;aspect-ratio:3/4;overflow:hidden;background:#f4f4f2}
.pmedia picture{position:absolute;inset:0;display:block}
.pmedia img{width:100%;height:100%;object-fit:cover;transition:opacity .5s var(--ease);
  /* Ảnh gốc là khung DỌC 2:3, ô hiển thị lại thấp hơn. Cắt theo tâm sẽ rơi vào
     eo váy và mất đầu. Dời điểm neo lên trên để giữ mặt và thân váy. */
  object-position:50% 15%}
.pmedia .alt{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease)}
.pmedia .alt picture{position:absolute;inset:0}
.pcard:hover .pmedia .alt{opacity:1}
/* <picture> trong các khối ảnh khác cũng phải phủ kín ô chứa */
.bcard .m picture,.railwrap picture,.promo picture{display:block;width:100%;height:100%}
.pcard:hover .pmedia .alt{opacity:1}
.pinfo{padding:12px 2px 26px;display:flex;justify-content:space-between;gap:10px}
.pname{font-size:11px;letter-spacing:.17em;text-transform:uppercase}
.ptag{color:var(--navy-70);margin-top:3px}
.pprice{margin-top:5px;font-size:11.5px;letter-spacing:.08em}
.heart{background:none;border:0;padding:2px;color:var(--navy-45)}
.heart:hover,.heart.on{color:var(--clay)}

/* thẻ quảng cáo chèn giữa grid — GLL làm y hệt */
.promo{position:relative;aspect-ratio:3/4;overflow:hidden;display:grid;place-items:center;
  text-align:center;color:#fff;background:var(--navy)}
.promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
.promo>div{position:relative;padding:20px}

/* ── Carousel ngang ─────────────────────────────────────────────────────── */
/* Dải này TRÀN SÁT MÉP màn hình và cố ý cắt cụt thẻ cuối — đó là tín hiệu thị
   giác cho biết còn kéo được, đúng cách Grace Loves Lace làm. Vì vậy nó phải
   thoát ra khỏi .wrap chứ không nằm gọn bên trong. */
.railwrap{position:relative}
.rail{display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:4px;scroll-behavior:smooth;
  padding-left:var(--gut)}
.rail::-webkit-scrollbar{display:none}
.rail>*{flex:0 0 clamp(260px,27vw,430px);scroll-snap-align:start}
.rail>*:last-child{margin-right:var(--gut)}

/* Mũi tên đè lên ảnh, canh giữa theo chiều cao phần ảnh (không tính nhãn) */
.railbtn{position:absolute;top:calc(50% - 26px);transform:translateY(-50%);
  z-index:3;width:44px;height:44px;display:grid;place-items:center;border:0;
  background:rgba(255,255,255,.82);color:var(--navy);border-radius:50%;
  box-shadow:0 1px 10px rgba(0,43,65,.14);transition:.2s var(--ease)}
.railbtn:hover{background:#fff}
.railbtn.prev{left:calc(var(--gut) - 22px)}
.railbtn.next{right:calc(var(--gut) - 22px)}
.railbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.4}
@media(max-width:820px){.railbtn{display:none}}   /* mobile thì vuốt tay */

/* ── Press ──────────────────────────────────────────────────────────────── */
.press{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:34px;text-align:center}
.press blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:14.5px;
  line-height:1.45}
.press .outlet{margin-top:12px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:400;color:var(--navy-70)}

/* ── Banner full-bleed ──────────────────────────────────────────────────── */
.band{position:relative;min-height:clamp(400px,64vh,620px);display:flex;align-items:center;
  overflow:hidden;background:var(--navy)}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.5),transparent 65%)}
.band-in{position:relative;z-index:2;color:#fff;padding:0 var(--gut);max-width:600px}
.band-in p{color:rgba(255,255,255,.88);margin:16px 0 26px;max-width:44ch;font-size:14px}

/* ── Section head có kẻ ngang (kiểu Journal của GLL) ────────────────────── */
.shead{display:flex;align-items:center;gap:32px;margin-bottom:36px}
.shead .ln{flex:1;height:1px;background:var(--line)}

/* ── Trang sản phẩm ─────────────────────────────────────────────────────── */
.pdp{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(340px,.85fr);gap:0}
.pdp-media{display:grid;grid-template-columns:1fr 1fr;gap:2px;min-width:0}
.pdp-media img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--sand)}
.pdp-media .gvideo{position:relative;aspect-ratio:3/4;background:#000;overflow:hidden}
.pdp-media .gvideo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pdp-media .gvideo video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background:#000}
.thumbs{display:flex;gap:2px;overflow-x:auto;margin-top:2px;scrollbar-width:none;
  min-width:0;max-width:100%}
.thumbs::-webkit-scrollbar{display:none}
.thumbs img{width:88px;aspect-ratio:3/4;object-fit:cover;flex:0 0 auto;cursor:pointer;
  opacity:.5;transition:.2s}
.thumbs img:hover,.thumbs img.on{opacity:1}
.pdp-info{padding:clamp(20px,3vw,44px);position:sticky;top:calc(var(--head-h) + 8px);
  align-self:start;max-height:calc(100vh - var(--head-h) - 16px);overflow-y:auto}
.crumb{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--navy-45);
  margin-bottom:16px}
.price{font-size:13px;letter-spacing:.1em;margin:10px 0 20px}
.acc{border-top:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:14px 0;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;display:flex;justify-content:space-between;
  align-items:center;gap:12px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:'+';font-size:14px;color:var(--navy-45)}
.acc[open] summary::after{content:'–'}
.acc .body{padding:0 0 18px;color:var(--navy-70)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:44px 0 40px}
.seg.seg-3 button:nth-child(3){grid-column:1/-1;border-left:1px solid var(--navy);
  border-top:0}
.seg.seg-3 button:nth-child(3).on{border-color:var(--gold)}
.seg button{padding:13px 8px;border:1px solid var(--navy);background:#fff;font-size:10px;
  letter-spacing:.17em;text-transform:uppercase;transition:.2s}
.seg button+button{border-left:0}
.seg button.on{background:var(--gold);color:#fff;border-color:var(--gold)}
.seg button:disabled{opacity:.3;cursor:not-allowed}
.condsel{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0 0}
.condbox{position:relative;width:100%;padding:11px 8px;border:1px solid var(--navy);
  background:#fff;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;transition:.2s;color:var(--navy);text-align:center}
.condbox.on{background:var(--gold);color:#fff;border-color:var(--gold)}
.condbox.off{cursor:not-allowed;border-style:dashed;color:var(--navy-45)}
.condbox.off::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'><line x1='0' y1='0' x2='100' y2='100' stroke='%23B0483C' stroke-width='1.5' vector-effect='non-scaling-stroke'/></svg>") no-repeat center/100% 100%}
.price-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:10px 0 20px}
.price-row .price{margin:0}
.price-old{text-decoration:line-through;color:var(--navy-45);font-size:12px;
  letter-spacing:.08em}
.cond-sale{border-color:#B0483C;color:#B0483C;background:#fff}
.condbox .pre{display:block;font-size:8px;letter-spacing:.12em;color:#B0483C;
  margin-top:3px}
.condbox.on .pre{color:#fff}
label.fl{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy-45);margin:16px 0 5px}
select,input,textarea{width:100%;padding:11px 2px;border:0;border-bottom:1px solid var(--line);
  background:transparent;font:inherit;color:inherit;border-radius:0;appearance:none}
select{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' \
viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23002B41' stroke-width='1.2'/></svg>") \
no-repeat right 2px center/11px}
input:focus,select:focus,textarea:focus{outline:0;border-bottom-color:var(--gold)}
input::placeholder,textarea::placeholder{color:var(--navy-45)}
.trustline{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;
  color:var(--navy-70);margin-top:12px}
.trustline svg{flex:0 0 15px;margin-top:2px}

/* ── Form ───────────────────────────────────────────────────────────────── */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 22px}
.fgrid .full{grid-column:1/-1}
.note{font-size:11.5px;color:var(--navy-45);margin-top:8px}
.err{color:#9A3324;font-size:12px}
.ok-box{background:var(--sand);padding:26px 28px;border-left:2px solid var(--gold)}

/* ── Quy trình đánh số (How it works / trust) ───────────────────────────── */
.steps{counter-reset:s;display:grid;gap:2px}
.step{counter-increment:s;display:grid;grid-template-columns:60px 1fr;gap:22px;
  padding:26px 0;border-top:1px solid var(--line)}
.step::before{content:counter(s,decimal-leading-zero);font-family:var(--serif);
  font-size:26px;color:var(--navy-45);line-height:1}
.step h3{margin-bottom:6px}
.step p{margin:0;color:var(--navy-70);max-width:62ch}

/* ── Swatch ─────────────────────────────────────────────────────────────── */
.swgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px}
.sw{text-align:center;cursor:pointer;border:1px solid transparent;padding:8px;
  transition:.2s;background:none;width:100%}
.sw .chip{aspect-ratio:1;border:1px solid var(--line);position:relative}
.sw .chip::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;
  color:#fff;font-size:20px;opacity:0;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.sw.on{border-color:var(--gold)}
.sw.on .chip::after{opacity:1}
.sw .nm{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;margin-top:9px}
.swbar{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);
  padding:14px var(--gut);display:flex;justify-content:space-between;align-items:center;
  gap:16px;z-index:30}

/* ── Real brides ────────────────────────────────────────────────────────── */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.bcard .m{aspect-ratio:3/4;overflow:hidden;background:var(--sand)}
.bcard .m img{width:100%;height:100%;object-fit:cover}
.bcard .meta{font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy-45);margin-top:10px}
.bcard blockquote{font-family:var(--serif);font-style:italic;font-size:14px;margin:8px 0 0}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.chip-f{padding:9px 18px;border:1px solid var(--line);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;transition:.2s;white-space:nowrap}
.chip-f:hover{border-color:var(--navy)}
.chip-f.on{background:var(--gold);color:#fff;border-color:var(--gold)}

/* ── Bảng ───────────────────────────────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{text-align:left;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy-45);font-weight:400;padding:10px 12px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:hover td{background:var(--sand)}
.scroll-x{overflow-x:auto}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.icons3{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;padding:52px 0}
.ic3{display:flex;gap:14px;align-items:flex-start}
.ic3 h4{font-family:var(--sans);font-size:10px;letter-spacing:.19em;text-transform:uppercase;
  margin-bottom:5px}
.ic3 p{margin:0;color:var(--navy-70);font-size:12px;max-width:34ch}
.ft{background:var(--sand);padding:64px 0 28px}
.ft-grid{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr)) 1.5fr;gap:38px}
.ft h5{font-size:10px;letter-spacing:.19em;text-transform:uppercase;font-weight:400;
  padding-bottom:9px;border-bottom:1px solid var(--navy);margin:0 0 14px}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{margin-bottom:9px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.ft li a:hover{opacity:.6}
.nl{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-top:6px}
.nl input{flex:1;min-width:180px}
.social{display:flex;gap:16px;margin-top:22px}
.social a{opacity:.75}.social a:hover{opacity:1}
.ft-btm{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-45)}

/* ── Drawer giỏ hàng ────────────────────────────────────────────────────── */
.ov{position:fixed;inset:0;background:rgba(0,43,65,.35);opacity:0;pointer-events:none;
  transition:.3s;z-index:80}
.ov.on{opacity:1;pointer-events:auto}
.drw{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:#fff;z-index:90;
  transform:translateX(100%);transition:.35s var(--ease);display:flex;flex-direction:column}
.drw.on{transform:none}
.drw-h{display:flex;justify-content:space-between;align-items:center;padding:20px var(--gut);
  border-bottom:1px solid var(--line)}
.drw-b{flex:1;overflow-y:auto;padding:20px var(--gut)}
.drw-f{border-top:1px solid var(--line);padding:20px var(--gut)}
.ci{display:grid;grid-template-columns:76px 1fr;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--line)}
.ci img{aspect-ratio:3/4;object-fit:cover;width:100%}
.x{background:none;border:0;font-size:18px;line-height:1;padding:2px 6px;color:var(--navy-45)}
.x:hover{color:var(--navy)}

/* ── Admin ──────────────────────────────────────────────────────────────── */
.adm{display:grid;grid-template-columns:210px 1fr;min-height:100vh}
.adm-side{background:var(--navy);color:#fff;padding:22px 0}
.adm-side .lg{font-family:var(--serif);font-size:15px;letter-spacing:.2em;
  text-transform:uppercase;padding:0 20px 20px}
.adm-side a{display:flex;justify-content:space-between;gap:8px;padding:10px 20px;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.adm-side a:hover,.adm-side a.on{background:rgba(255,255,255,.1);color:#fff}
.adm-side b{background:var(--clay);color:#fff;border-radius:9px;font-size:9px;
  padding:1px 7px;letter-spacing:0}
.adm-main{padding:26px 30px;background:#fbfaf9;overflow-x:hidden}
.card{background:#fff;border:1px solid var(--line);padding:22px;margin-bottom:18px}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.kpi .k{background:#fff;border:1px solid var(--line);padding:18px}
.kpi .k b{display:block;font-family:var(--serif);font-size:30px;font-weight:400;
  line-height:1.1;margin-bottom:3px}
.pill{display:inline-block;padding:3px 10px;border:1px solid var(--line);font-size:9px;
  letter-spacing:.13em;text-transform:uppercase}
.pill.hot{background:var(--gold);color:#fff;border-color:var(--gold)}
.adm input,.adm textarea{border:1px solid var(--line);padding:9px 11px;background:#fff}
/* select giữ mũi tên — chỉ đổi viền/padding, không ghi đè background-image */
.adm select{border:1px solid var(--line);padding:9px 28px 9px 11px;
  background-color:#fff;background-position:right 9px center}
.adm label.fl{margin-top:12px}

/* ── Responsive ─────────────────────────────────────────────────────────── */
/* Laptop 13–15": nav 6 mục + logo + 2 CTA không đủ chỗ nếu giữ nguyên khoảng cách */
@media(max-width:1460px){
  .nav{gap:15px}
  .nav a{letter-spacing:.11em}
  .hd-r{gap:11px}
}
@media(max-width:1240px){
  .hd-r .desk:not(.btn){display:none}   /* bỏ link chữ, giữ nút Book a fitting */
}

@media(max-width:1100px){
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .pdp{grid-template-columns:minmax(0,1fr)}
  .pdp-info{position:static;max-height:none;padding:28px var(--gut) 40px}
  .ft-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  :root{--gut:18px}
  /* Ẩn link điều hướng nhưng GIỮ nút hamburger — nó nằm trong .nav */
  .nav a,.hd-r .desk{display:none}
  .nav{gap:0}
  .burger{display:block}
  .hd-in{grid-template-columns:auto 1fr auto}
  .logo{text-align:left}
  .pgrid,.pgrid.g3{grid-template-columns:repeat(2,1fr);gap:2px}
  .pgrid.g3{gap:14px}
  .icons3{grid-template-columns:1fr;gap:24px;padding:36px 0}
  .fgrid{grid-template-columns:1fr}
  .step{grid-template-columns:44px 1fr;gap:14px}
  .adm{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .adm-side{display:flex;gap:4px;overflow-x:auto;padding:8px;
    -webkit-overflow-scrolling:touch}
  .adm-side .lg{display:none}
  .adm-side div{display:none}            /* vạch ngăn dọc — thừa khi nằm ngang */
  .adm-side a{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
    white-space:nowrap;padding:8px 12px;border-radius:99px;font-size:10px}
  .adm-side a.on{background:rgba(255,255,255,.16)}
  .adm-side b{flex:0 0 auto;line-height:1.5;padding:0 6px;border-radius:8px}
  .adm-main{padding:16px}
  .kpi .k b{font-size:22px;word-break:break-all}
  /* Giữ 2 cột trên điện thoại. Xếp dọc thì hai ảnh lớn chiếm hơn 1000px
     chiều cao, khách phải cuộn rất xa mới thấy dải ảnh nhỏ để đổi ảnh —
     mà đó mới là chỗ xem hết các góc chụp của chiếc váy.
     minmax(0,…) để cột vẫn co được, tránh tràn ngang như lỗi trước. */
  .pdp-media{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:520px){
  .ft-grid{grid-template-columns:1fr}
  .press{grid-template-columns:1fr 1fr;gap:24px}
}

/* Mobile menu */
.mm{position:fixed;inset:0;background:#fff;z-index:95;transform:translateX(-100%);
  transition:.32s var(--ease);padding:20px var(--gut);overflow-y:auto}
.mm.on{transform:none}
.mm a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-size:12px;
  letter-spacing:.16em;text-transform:uppercase}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── Thân bài viết chuyển từ web cũ ──────────────────────────────────────── */
/* HTML gốc từ WordPress không có class của web này, nên style theo thẻ. */
.post-body{font-size:14.5px;line-height:1.8;color:var(--navy-70)}
.post-body h2,.post-body h3,.post-body h4{color:var(--navy);margin:38px 0 12px}
.post-body h2{font-size:clamp(21px,2.1vw,28px)}
.post-body h3{font-size:clamp(18px,1.7vw,22px)}
.post-body h4{font-size:16px}
.post-body p{margin:0 0 16px}
.post-body img{width:100%;height:auto;margin:26px 0;background:var(--sand)}
.post-body figure{margin:26px 0}
.post-body figcaption{font-size:11.5px;color:var(--navy-45);margin-top:8px;text-align:center}
.post-body ul,.post-body ol{margin:0 0 18px;padding-left:20px}
.post-body li{margin-bottom:7px}
.post-body a{color:var(--gold-deep);border-bottom:1px solid rgba(140,107,47,.35)}
.post-body a:hover{border-bottom-color:var(--gold-deep)}
.post-body strong,.post-body b{color:var(--navy);font-weight:600}
.post-body blockquote{margin:26px 0;padding:4px 0 4px 22px;border-left:2px solid var(--gold);
  font-family:var(--serif);font-size:17px;color:var(--navy)}
.post-body table{width:100%;border-collapse:collapse;font-size:13px;margin:24px 0}
.post-body th,.post-body td{padding:10px 12px;border:1px solid var(--line);text-align:left}
.post-body th{background:var(--sand);font-weight:600;color:var(--navy)}
.post-body iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;margin:26px 0}
.post-body>*:first-child{margin-top:0}


/* ── Khung cắt ảnh: giữ mặt người trong khung ───────────────────────────────
   Mọi chỗ đặt ảnh dọc 2:3 vào ô ngang/vuông đều phải neo lên trên, nếu không
   object-fit:cover cắt vào giữa thân và mất đầu. */
.bcard .m img{object-position:50% 12%}
.pgrid.g3 img,.railwrap .pmedia img{object-position:50% 12%}
.promo img{object-position:50% 20%}
.thumbs img{object-position:50% 12%}

/* ── Khối liên hệ ở footer ─────────────────────────────────────────────────
   Web cũ để địa chỉ/hotline/email ngay chân trang. Giữ lại vì khách Việt quen
   tìm ở đó, và với khách nước ngoài thì một địa chỉ thật là bằng chứng đây là
   xưởng có thật chứ không phải trang trung gian. */
.ft-brand address{font-style:normal;font-size:12px;line-height:1.9;
  color:var(--navy-70);margin:18px 0 0}
.ft-brand address strong{font-weight:500;color:var(--navy)}
.ft-brand address a{border-bottom:1px solid var(--line)}
.ft-brand address a:hover{opacity:.6}
.ft-brand .logo{font-size:22px}
.ft-brand h5{border-bottom:none;padding-bottom:0;margin-bottom:0}
.ft-grid{grid-template-columns:1.6fr repeat(3,minmax(130px,1fr)) 1.4fr}
@media(max-width:1100px){
  .ft-grid{grid-template-columns:1fr 1fr;gap:30px}
  .ft-brand{grid-column:1/-1}
}

/* ── Hero trên màn hình hẹp ────────────────────────────────────────────────
   Chữ nằm ĐÈ TRÊN ảnh như bản máy tính, không tách xuống khung riêng.

   Đánh đổi phải chấp nhận: ảnh hero là dải ngang 2.6:1, muốn đè chữ thì khung
   phải cao, mà khung cao thì object-fit:cover cắt bớt hai bên — trên điện
   thoại sẽ thấy khoảng ba người mẫu giữa thay vì đủ năm.
   Chọn 58vh: đủ cao để chữ đọc thoải mái, mà chưa cắt tới mức chỉ còn một
   người. object-position 50% 42% giữ phần thân váy trong khung. */
@media(max-width:820px){
  .hero{min-height:clamp(400px,58vh,560px)}
  .hero>img{object-position:50% 42%}
  /* Lớp phủ tối dày hơn ở đáy để chữ trắng nổi trên nền váy sáng */
  .hero::after{background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.34) 46%,
    rgba(0,0,0,.12))}
  .hero .hero-in{padding-bottom:clamp(26px,5vh,44px)}
  .hero .hero-in p{margin:12px 0 18px}
  /* Ảnh hero sáng: lớp phủ sáng, chữ navy */
  .hero.light::after{background:linear-gradient(0deg,rgba(255,255,255,.88),
    rgba(255,255,255,.5) 46%,rgba(255,255,255,.15))}
}



/* ══ Trang Về Vivian ═══════════════════════════════════════════════════════
   Bám theo bố cục trang gốc aocuoivivian.com/ve-vivian: ba cột ở đầu, các khối
   ảnh–chữ so le trên nền kem, ảnh bo góc có viền vàng lệch, mép sóng giữa các
   khối, và một khung hồng chứa câu trích. */
:root{--blush:#F7EDE9;--cream:#FBF7F0;--gold-line:#C9A24D}

.ab-top{padding:clamp(36px,6vh,72px) 0 clamp(40px,7vh,86px)}
.ab-wrap{max-width:1240px;margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:170px minmax(0,1fr) minmax(0,460px);
  gap:clamp(24px,4vw,58px);align-items:start}

/* Mục lục dính bên trái */
.ab-toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px}
.ab-toc a{font-size:11px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--navy-70)}
.ab-toc a:hover{color:var(--gold-deep)}

/* Chữ giữa — canh đều hai bên như bản gốc */
.ab-mid p{text-align:justify;color:var(--navy-70);margin:0 0 16px;font-size:14px;
  line-height:1.85}
.ab-mid p strong,.ab-why-txt p strong{color:var(--navy);font-weight:500}
.ab-h{font-family:var(--sans);font-size:clamp(16px,1.5vw,19px);font-weight:500;
  letter-spacing:.01em;line-height:1.45;color:var(--navy);margin:0 0 18px}
.ab-h-up{font-size:clamp(15px,1.5vw,18px);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;line-height:1.5;color:var(--navy);margin:0 0 16px}
.ab-mid h2.ab-h{margin-top:34px}
.ab-sig{display:block;height:auto;margin:26px 0 4px;opacity:.95}

/* Khung ảnh: bo góc + viền vàng lệch ra sau, như bản gốc */
.ab-frame{position:relative;border-radius:6px 26px 6px 26px;overflow:hidden}
.ab-frame::after{content:'';position:absolute;inset:8px;pointer-events:none;
  border:1px solid rgba(201,162,77,.55);border-radius:4px 20px 4px 20px}
.ab-frame picture,.ab-frame img{display:block;width:100%;height:100%;
  object-fit:cover;object-position:50% 24%}
.ab-tall{aspect-ratio:3/4.15}

/* Nền kem + mép sóng */
.ab-cream{position:relative;background:var(--cream);
  padding:clamp(52px,9vh,104px) 0 clamp(44px,8vh,92px);margin-top:44px}
.ab-wave{position:absolute;top:-1px;left:0;right:0;height:44px;
  background:var(--paper);
  -webkit-mask:radial-gradient(58% 100% at 50% 0,#000 99%,transparent) 50% 0/34% 100% repeat-x;
  mask:radial-gradient(58% 100% at 50% 0,#000 99%,transparent) 50% 0/34% 100% repeat-x}

.ab-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4.5vw,64px);
  align-items:center}
.ab-row+.ab-row{margin-top:clamp(44px,7vh,86px)}
.ab-row-rev .ab-frame{order:2}

.ab-quote-line{color:var(--gold);font-size:15px;line-height:1.7;margin:0 0 20px}
.ab-list{list-style:none;margin:0;padding:0}
.ab-list li{position:relative;padding-left:18px;margin-bottom:14px;
  color:var(--navy-70);font-size:13.5px;line-height:1.75}
.ab-list li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--gold-mid)}

/* Khung hồng chứa câu trích */
.ab-invite .ab-row{align-items:center}
.ab-blush{background:var(--blush);padding:clamp(24px,3.4vw,46px);
  display:grid;grid-template-columns:150px 1fr;gap:clamp(18px,2.6vw,34px);
  align-items:center}
.ab-blush>img:first-child{width:100%;height:auto;display:block}
.ab-blush blockquote{margin:0;font-family:var(--serif);font-weight:300;
  font-size:clamp(19px,2.1vw,27px);line-height:1.34;color:#B98C86}
.ab-blush .ab-sig{grid-column:2;margin:14px 0 0;justify-self:end}
.ab-cta-line{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--navy);margin-top:22px}

/* Điều làm nên thương hiệu — ảnh trái, chữ phải trên nền kem */
.ab-why{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  background:var(--cream)}
.ab-why-img picture,.ab-why-img img{display:block;width:100%;height:100%;
  object-fit:cover;min-height:280px}
.ab-why-txt{padding:clamp(26px,3.6vw,52px)}
.ab-why-txt p{color:var(--navy-70);font-size:13.5px;line-height:1.8;margin:0 0 16px}

/* Kết */
.ab-end{padding:clamp(30px,5vh,58px) 0 clamp(56px,9vh,104px);text-align:center}
.ab-qmark{display:block;font-family:var(--serif);font-size:56px;line-height:.6;
  color:var(--navy);opacity:.5;margin-bottom:22px}
.ab-end p{font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--navy);
  margin:0 0 6px;line-height:1.7}

@media(max-width:980px){
  .ab-wrap{grid-template-columns:1fr}
  .ab-toc{position:static;flex-direction:row;flex-wrap:wrap;gap:16px;
    padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:24px}
  .ab-tall{aspect-ratio:3/4;margin-top:28px}
  .ab-row{grid-template-columns:1fr}
  .ab-row-rev .ab-frame{order:0}
  .ab-blush{grid-template-columns:1fr}
  .ab-blush>img:first-child{max-width:180px}
  .ab-blush .ab-sig{grid-column:1;justify-self:start}
  .ab-why{grid-template-columns:1fr}
}

/* Lưới ảnh sàn xưởng — ảnh chụp ngang nên để khung 4:3, kèm chú thích cho biết
   đang nhìn công đoạn nào. Bốn ảnh chia hai hàng cho cân. */
.floor-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2.2vw,28px)}
.floor-grid figure{margin:0}
.floor-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  background:var(--white)}
.floor-grid figcaption{margin-top:12px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--navy-70)}
@media(max-width:760px){.floor-grid{grid-template-columns:1fr}}


/* Dải ảnh cô dâu và không gian — dùng chung thành phần .rail của khối bộ sưu
   tập, chỉ khác bề rộng mỗi tấm. */
.rail-5>*{flex:0 0 clamp(260px,27vw,430px)}   /* bằng dải bộ sưu tập */
.rail-4>*{flex:0 0 clamp(240px,30vw,460px)}
.bslide{margin:0}
.bslide picture,.bslide img{display:block;width:100%;aspect-ratio:3/4;
  object-fit:cover;object-position:50% 15%}
.bslide figcaption{margin-top:12px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy-70)}
.sslide img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.ab-space .railwrap{margin-top:0}
@media(max-width:820px){
  .rail-5>*{flex:0 0 70vw}
  .rail-4>*{flex:0 0 82vw}
}

/* Sơ đồ đo — nền kem, ảnh SVG nên co giãn không vỡ nét */
.measure-fig{margin:0 0 34px;background:var(--sand);padding:clamp(18px,3vw,34px);
  text-align:center}
.measure-fig img{width:100%;max-width:560px;height:auto}
.measure-fig figcaption{margin-top:14px;font-size:12px;color:var(--navy-70)}

/* ══ Điện thoại: cỡ chữ và vùng bấm ════════════════════════════════════════
   Đo trên khung 390px cho thấy hai vấn đề lặp ở MỌI trang vì nằm trong phần
   dùng chung:
     • 17 link chân trang chỉ cao 15px — ngón tay bấm rất dễ trượt sang link
       bên cạnh. Hướng dẫn của Apple và Google đều lấy mốc 44px.
     • Thanh phụ dưới header cỡ chữ 9px, cùng vài chỗ 10px — dưới ngưỡng đọc
       thoải mái trên màn hình cầm tay.
   Chỉ nới ở màn hình hẹp; bản máy tính giữ nguyên tỷ lệ đã cân. */
@media(max-width:820px){
  /* Vùng bấm chân trang: dùng padding để cao ~40px mà không giãn khoảng cách */
  .ft li{margin-bottom:2px;font-size:12px}
  .ft li a{display:block;padding:11px 0}
  .ft-brand address{font-size:13px;line-height:2}
  .ft-brand address a{display:inline-block;padding:4px 0}
  .social a{padding:8px;margin:-8px}          /* nới vùng chạm, không dịch icon */

  /* Cỡ chữ tối thiểu */
  .sub{font-size:10.5px;letter-spacing:.14em;padding:9px var(--gut)}
  .eyebrow{font-size:11px;letter-spacing:.18em}
  .btn,.btn-sm{font-size:12px;padding:14px 22px}
  .ul{font-size:12px}
  .ft-btm{font-size:11px}

  /* Header: nới vùng chạm cho giỏ hàng và các icon */
  .hd-r>a,.hd-r button,.cartc{padding:10px;margin:-10px}
  .burger{padding:10px;margin:-10px}

  /* Chip lọc: 9,5px quá nhỏ để đọc lẫn để bấm */
  .chip-f{font-size:11px;padding:10px 16px}
  /* Link gạch chân trong nội dung: cho cao đủ chạm */
  .ul{display:inline-block;padding:6px 0}
  /* Nút đóng ngăn kéo giỏ hàng */
  .drw .x,.mm .x{padding:10px;margin:-10px;font-size:22px}
  /* Đường dẫn phân cấp và mục lục trang About: chữ 9,5px và cao 13px */
  .crumb{font-size:11px}
  .crumb a{display:inline-block;padding:8px 0}
  .ab-toc a{padding:9px 0}
}

/* ══ Video ═════════════════════════════════════════════════════════════════
   Toàn bộ clip là video DỌC (1080×1920). Không ép vào khung ngang — cắt mất
   thân váy là mất đúng thứ cần khoe. Thay vào đó dựng theo chiều dọc sẵn có. */
.vwrap{position:relative;overflow:hidden;background:var(--sand-deep)}
.vwrap video{display:block;width:100%;height:100%;object-fit:cover}

/* Trang chủ: clip dọc bên trái, chữ bên phải */
.vhome{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,64px);align-items:center}
.vhome .vwrap{aspect-ratio:9/16;max-height:600px;margin-inline:auto;width:100%}
.vhome h2{margin:0 0 14px}
.vhome p{color:var(--navy-70);max-width:46ch;margin:0 0 22px}

/* Xưởng may: ba clip dọc xếp hàng */
.vtrio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,20px)}
.vtrio .vwrap{aspect-ratio:9/16}
.vtrio figcaption{margin-top:12px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--navy-70)}
.vtrio figure{margin:0}

/* Trang phim: lưới clip bấm mới phát */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:clamp(12px,2vw,24px)}
.vgrid .vwrap{aspect-ratio:9/16}
.vgrid video{cursor:pointer}

/* Nút phát: chỉ hiện ở clip có tiếng, ẩn khi đang chạy */
.vplay{position:absolute;inset:0;display:grid;place-items:center;border:0;
  background:rgba(0,0,0,.18);cursor:pointer;transition:.2s}
.vplay:hover{background:rgba(0,0,0,.3)}
.vplay span{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92);
  display:grid;place-items:center;color:var(--navy);font-size:15px;padding-left:4px}
.vwrap.playing .vplay{opacity:0;pointer-events:none}

@media(max-width:900px){
  .vhome{grid-template-columns:1fr}
  .vhome .vwrap{max-height:480px}
  .vtrio{grid-template-columns:1fr}
  .vtrio .vwrap{max-height:70vh}
}

/* ══ Màn hình rất hẹp (≤360px — iPhone SE đời cũ, Android nhỏ) ══════════════
   Ba chỗ vẫn tràn vài chục pixel ở khổ này: thẻ trong dải trượt có bề rộng tối
   thiểu 260px, nút có chữ dài không xuống dòng, và ngăn kéo giỏ hàng rộng bằng
   đúng màn hình. Chỉ nới ở khổ này, không đụng các khổ lớn hơn. */
@media(max-width:380px){
  .rail>*,.rail-5>*,.rail-4>*{flex:0 0 min(260px,84vw)}
  .btn,.btn-sm{max-width:100%;white-space:normal;text-align:center;
    padding-left:16px;padding-right:16px}
  .drw{width:min(320px,92vw)}
}

/* Ba con số so sánh giá ở trang chủ */
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  max-width:760px;margin:0 auto}
.stat3>div{background:var(--sand);padding:26px 14px}
@media(max-width:620px){
  /* Ba cột trên điện thoại chỉ còn ~115px mỗi cột — con số thì vừa, nhưng dòng
     chú thích bên dưới bị bẻ vụn. Xếp dọc để mỗi mục có đủ bề ngang. */
  .stat3{grid-template-columns:1fr}
  .stat3>div{padding:20px 18px;display:flex;align-items:baseline;gap:14px}
  .stat3>div>div:last-child{margin-top:0}
}

/* Trang phim: ảnh nền nằm dưới, video chèn lên trên khi bấm phát */
.vgrid .vwrap img{display:block;width:100%;height:100%;object-fit:cover}
.vgrid .vwrap video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background:#000}

/* ══ Lớp phủ xem video ═════════════════════════════════════════════════════
   Bấm clip là nền tối lại, video phóng to ra giữa. Video dọc nên giới hạn theo
   CHIỀU CAO màn hình chứ không theo chiều rộng — giới hạn theo rộng thì trên
   máy tính video tràn quá khung nhìn. */
.vlight{position:fixed;inset:0;z-index:200;display:none;place-items:center;
  background:rgba(12,14,18,.92);padding:clamp(16px,4vh,48px);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vlight.on{display:grid}
.vlight-in{max-height:100%;display:grid;place-items:center}
.vlight video{height:min(88vh,1040px);width:auto;max-width:100%;
  aspect-ratio:9/16;background:#000;display:block;
  box-shadow:0 24px 70px rgba(0,0,0,.5)}
.vlight-x{position:absolute;top:clamp(10px,2vh,24px);right:clamp(10px,2vw,28px);
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;
  display:grid;place-items:center;transition:.2s}
.vlight-x:hover{background:rgba(255,255,255,.26)}
@media(max-width:640px){
  .vlight{padding:0}
  .vlight video{max-height:100vh;width:100%}
}

/* ══ Bảng trên điện thoại ══════════════════════════════════════════════════
   Bảng 4 cột ép vào 390px thì mỗi ô chỉ còn một hai chữ mỗi dòng — đọc rất mệt
   và nhìn như vỡ bố cục. Trên màn hình hẹp, đổi mỗi HÀNG thành một THẺ xếp
   dọc, mỗi ô một dòng có nhãn cột đứng trước.
   Chỉ áp dụng cho bảng có khai data-l ở ô, để không phá các bảng khác. */
@media(max-width:700px){
  .tbl:has(td[data-l]){display:block}
  .tbl:has(td[data-l]) thead{display:none}
  .tbl:has(td[data-l]) tbody,
  .tbl:has(td[data-l]) tr{display:block}
  .tbl:has(td[data-l]) tr{padding:18px 0;border-bottom:1px solid var(--line)}
  .tbl:has(td[data-l]) tr:last-child{border-bottom:0}
  .tbl:has(td[data-l]) td{display:block;border:0;padding:0 0 10px}
  .tbl:has(td[data-l]) td:last-child{padding-bottom:0}
  .tbl:has(td[data-l]) td::before{content:attr(data-l);display:block;
    font-size:10px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--navy-45);margin-bottom:4px}
  /* Ô đầu là tên gói — cho nổi hơn, khỏi cần nhãn */
  .tbl:has(td[data-l]) td:first-child::before{display:none}
  .tbl:has(td[data-l]) td:first-child{font-size:15px;padding-bottom:12px}
}
@media(max-width:700px){
  /* Ô canh phải (giá) khi bảng xếp dọc thì trả về canh trái cho thẳng hàng */
  .tbl:has(td[data-l]) td.ta-r{text-align:left}
}

/* Hàng tiêu đề mục (tiêu đề · gạch ngang · nút "Xem tất cả").
   Trên điện thoại nút chiếm chỗ làm tiêu đề chỉ còn ~190px, bị bẻ thành ba
   dòng. Xếp dọc và giấu gạch ngang trang trí. */
@media(max-width:700px){
  .shead{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:26px}
  .shead .ln{display:none}
}

/* Khối bán sỉ ở trang chủ: chữ bên trái, nút bên phải */
.b2b-row{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
@media(max-width:700px){
  .b2b-row{grid-template-columns:1fr;gap:20px}
}

/* Lưới bài viết (.pgrid.g3) trên máy hẹp: 2 cột thì mỗi thẻ chỉ ~155px, tiêu đề
   bài bị bẻ 4–5 dòng. Lưới SẢN PHẨM giữ 2 cột vì ảnh vẫn xem được, còn thẻ bài
   viết chủ yếu là chữ nên cho về 1 cột. */
@media(max-width:560px){
  .pgrid.g3{grid-template-columns:1fr;gap:26px}
}

/* ══ Dải trượt trên điện thoại: đúng MỘT thẻ mỗi màn hình ══════════════════
   Trước đây thẻ rộng 260px nên thẻ kế bên luôn thò vào mép phải — nhìn như bố
   cục bị cắt chứ không ra ý "vuốt để xem tiếp". Trên màn hình hẹp cho mỗi thẻ
   chiếm trọn bề ngang (trừ lề hai bên), và dừng đúng vị trí khi vuốt. */
@media(max-width:700px){
  .rail{padding-left:var(--gut);padding-right:var(--gut);
    scroll-padding-left:var(--gut);gap:var(--gut)}
  /* 100% ở đây là bề rộng VÙNG NỘI DUNG của dải (đã trừ lề hai bên), nên
     không trừ lề thêm lần nữa — trừ hai lần thì thẻ hụt và thẻ kế thò vào. */
  /* Dừng CANH TRÁI, không canh giữa: canh giữa thì thẻ nằm chính giữa màn
     hình nên luôn hở mép thẻ trước và thẻ sau ở hai bên. Canh trái + lề cuộn
     bằng đúng lề của dải thì thẻ trước bị đẩy hẳn ra ngoài. */
  .rail>*,.rail-5>*,.rail-4>*{flex:0 0 100%;scroll-snap-align:start}
  /* Lề phải đã có sẵn từ padding của dải, bỏ margin thừa của thẻ cuối */
  .rail>*:last-child{margin-right:0}
}

/* ══ Banner mẫu vải trên điện thoại ════════════════════════════════════════
   Ảnh rộng 2400px, người mẫu đứng ở khoảng 75% bên phải, hai phần ba bên trái
   là tường trống để chừa chỗ đặt chữ trên máy tính. Trên điện thoại khung hẹp
   cắt ở giữa nên chỉ còn thấy tường — mất người.
   Dời khung nhìn sang phải để lấy người mẫu, và dồn chữ xuống đáy với lớp phủ
   tối dần từ dưới lên để chữ vẫn đọc rõ. */
@media(max-width:700px){
  .band{align-items:flex-end;min-height:clamp(440px,64vh,580px)}
  .band img{object-position:76% 32%}
  .band::after{background:linear-gradient(0deg,rgba(0,0,0,.84),rgba(0,0,0,.42) 50%,
    rgba(0,0,0,.08))}
  .band-in{padding-bottom:clamp(30px,5vh,46px);max-width:none}
  .band-in p{margin:12px 0 20px}
}

/* ══ Cách xuống dòng ═══════════════════════════════════════════════════════
   Đo trên 5 ngôn ngữ ở khổ 390px cho thấy tiêu đề nào cũng bị "trơ chữ cuối":
   dòng cuối chỉ còn một từ ngắn — "Handcrafted in / Vietnam", "Bạn không bao
   giờ trả / tiền". Đây là lỗi trình bày cơ bản, và càng rõ ở màn hình hẹp. */

/* balance: trình duyệt cân lại số chữ giữa các dòng thay vì đổ đầy dòng trên
   rồi hất phần thừa xuống. Chỉ dùng cho tiêu đề — nó tốn công tính nên trình
   duyệt tự bỏ qua với khối dài. */
h1,h2,h3,h4,.d1,.d2,.d3,.d4{text-wrap:balance}

/* pretty: giữ nguyên cách đổ dòng bình thường nhưng tránh để dòng cuối trơ
   một chữ. Hợp với đoạn văn dài. */
p,li,figcaption,blockquote,.lede,.note{text-wrap:pretty}

/* Chuỗi dài không có khoảng trắng (email, đường dẫn) phải được phép bẻ, nếu
   không nó đẩy rộng cả khối và làm tràn ngang. */
p,li,td,address,.lede{overflow-wrap:break-word}

/* Tiếng Hàn: mặc định nhiều trình duyệt ngắt ở BẤT KỲ ký tự nào, cắt đôi cả
   từ. keep-all buộc chỉ ngắt ở khoảng trắng, đúng cách đọc tiếng Hàn. */
html:lang(ko) body{word-break:keep-all}

/* Tiếng Nhật/Trung: bật luật cấm ngắt chặt — không để dấu câu rơi xuống đầu
   dòng, không để dấu mở ngoặc đứng cuối dòng. */
html:lang(ja) body,html:lang(zh) body{line-break:strict}

/* ══ Trang khách quét QR ═══════════════════════════════════════════════════
   Khách đang ĐỨNG TRƯỚC chiếc váy, cầm điện thoại. Nên ưu tiên tuyệt đối:
   ảnh lớn, giá to rõ, trạng thái còn/hết, rồi mới đến chi tiết. */
.itm{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.itm-media picture,.itm-media img{display:block;width:100%;height:100%;
  object-fit:cover;aspect-ratio:3/4}
.itm-info{padding:clamp(24px,4vw,56px);display:flex;flex-direction:column;
  justify-content:center}
.itm-code{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--navy-45);margin-bottom:10px}
.itm-tag{color:var(--navy-70);margin:6px 0 22px}

.itm-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin-bottom:14px}
.itm-price .now{font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);
  color:var(--navy);line-height:1}
.itm-price .was{text-decoration:line-through;color:var(--navy-45);font-size:15px}
.itm-price .off{background:var(--gold);color:#fff;font-size:11px;padding:4px 9px;
  letter-spacing:.1em}

.itm-status{display:inline-block;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;padding:7px 14px;border:1px solid var(--line);
  align-self:flex-start;margin-bottom:22px}
.itm-status.s-in_stock,.itm-status.s-display{border-color:var(--gold-mid);
  color:var(--gold-deep)}
.itm-status.s-sold,.itm-status.s-reserved,.itm-status.s-rented{color:var(--navy-45)}
.itm-gone{color:var(--navy-70);margin:0 0 18px}
.itm-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}

.itm-facts{border-top:1px solid var(--line);padding-top:18px;display:grid;gap:12px}
.itm-facts div{display:grid;grid-template-columns:110px 1fr;gap:14px;font-size:13px}
.itm-facts b{font-weight:500;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--navy-45)}
.itm-facts span{color:var(--navy-70)}

.itm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.itm-grid picture,.itm-grid img{display:block;width:100%;aspect-ratio:3/4;
  object-fit:cover}

@media(max-width:820px){
  .itm{grid-template-columns:1fr}
  .itm-grid{grid-template-columns:repeat(2,1fr)}
}
.itm-asof{font-size:11px;color:var(--navy-45);margin:-14px 0 22px}

/* Form kho từng chiếc — label bọc input, khác .fgrid của CRUD chung */
.adm .f-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px}
.adm .f-grid label{display:flex;flex-direction:column;gap:6px;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy-45)}
.adm select{border:1px solid var(--line);padding:9px 11px;background:#fff;
  font:inherit;font-size:13px;color:var(--navy)}
@media(max-width:900px){
  .adm .f-grid{grid-template-columns:1fr}
  .inv-2col{grid-template-columns:1fr!important}
}
/* Chữ admin: đen hẳn — nhân viên nhập liệu cả ngày, xám là mỏi mắt */
.adm input,.adm textarea,.adm select{color:#111}
.adm .f-grid input,.adm .f-grid select,.adm .f-grid textarea{
  color:#111;font-weight:500;font-size:14px}
.adm .f-grid label,.adm label.fl{color:#111}
.adm .tbl td{color:#111}
.adm .note{color:#333}
.adm .eyebrow{color:#444}
.adm input[type=checkbox]{width:16px;height:16px;accent-color:#8C6B2F;
  appearance:auto;-webkit-appearance:checkbox;flex:0 0 auto}

/* Dải tiêu đề shop-first trên trang chủ (kiểu BHLDN) */
.shopbar{padding:clamp(26px,3.5vw,48px) 0 clamp(18px,2.5vw,30px);text-align:center}
.shopbar .note{margin:8px auto 0;max-width:56ch}
.shopbar-links{display:flex;gap:8px 22px;justify-content:center;flex-wrap:wrap;
  margin-top:16px}
.shopbar-links a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy-70);border-bottom:1px solid var(--line);padding-bottom:3px}
.shopbar-links a:hover{color:var(--navy);border-color:var(--gold)}

/* Chip dáng váy dưới giá — vị trí BHLDN đặt ô màu */
.schip{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border:1px solid var(--line);border-radius:50%;
  margin-top:8px;background:#fff}
.schip img{display:block}
.pcard:hover .schip{border-color:var(--gold-mid,#C9A24D)}
@media(max-width:820px){
  .pgrid{grid-template-columns:repeat(2,1fr);gap:20px 10px}
}

/* ══ Hero video trang chủ ══ */
.hero-v{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:var(--sand)}
.hero-v-txt{display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;padding:clamp(40px,6vw,90px) clamp(24px,5vw,80px)}
.hero-v-txt p{color:var(--navy-70);margin:18px 0 26px;max-width:46ch}
.hero-v-med{min-height:clamp(440px,74vh,700px)}
.hero-v-med video{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:820px){
  .hero-v{grid-template-columns:1fr;position:relative}
  .hero-v-med{min-height:0;aspect-ratio:9/13;max-height:78vh;overflow:hidden;order:-1}
  .hero-v-txt{position:absolute;inset:auto 0 0 0;z-index:2;padding:22px var(--gut) 26px;
    background:linear-gradient(transparent,rgba(10,20,30,.62))}
  .hero-v-txt h1{color:#fff}
  .hero-v-txt p{color:rgba(255,255,255,.92);margin:10px 0 16px}
}

/* Thẻ kiểu Uniqlo: chấm-màu = icon dáng, tên viết thường, giá đậm */
.pinfo.uq{padding:8px 2px 30px}
.uq-dots{display:flex;align-items:center;gap:7px;margin:2px 0 8px}
.uq-dots .schip{width:22px;height:22px;margin:0;border-radius:50%}
.uq-sil{font-size:10.5px;color:var(--navy-45)}
.uq-code{font-size:10.5px;color:var(--navy-45);letter-spacing:.06em}
.uq-name{font-size:13.5px;color:var(--navy);margin-top:3px;line-height:1.45;
  letter-spacing:0;text-transform:none}
.uq-price{font-weight:700;font-size:14.5px;color:var(--navy);margin-top:7px;
  letter-spacing:.01em}
.uq-price span{font-weight:400;font-size:11px;color:var(--navy-70)}
.fbar{border-bottom:1px solid var(--line);padding:10px 0}
.frow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:5px 0}
.flab{font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy-45);min-width:76px}
.fchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  padding:6px 12px;font-size:11px;color:var(--navy-70);border-radius:999px;
  white-space:nowrap}
.fchip img{opacity:.75}
.fchip i{font-style:normal;color:var(--navy-45);font-size:10px}
.fchip.on{border-color:var(--navy);color:var(--navy);font-weight:600}
.fchip:hover{border-color:var(--gold)}
@media(max-width:820px){
  .frow{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .flab{min-width:auto;flex:0 0 auto}
}

/* ══ Trang chủ kiểu Uniqlo: ô dáng váy · billboard · kệ · nút lật ảnh ══ */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:22px 12px;max-width:880px;margin:0 auto}
.tile{display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-align:center;
  color:var(--navy)}
.tile-im{display:block;width:104px;height:104px;overflow:hidden;border-radius:10px;
  background:var(--sand)}
.tile-ic{display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line)}
/* Icon KHÔNG được ăn theo luật ảnh phủ ô (width/height 100% + cover) —
   bị kéo tràn là cụt đầu cụt gấu váy */
.tile-im.tile-ic img{width:auto;height:76%;object-fit:contain}
.tile:hover .tile-ic{border-color:var(--gold)}
.tile-im img,.tile-im picture{width:100%;height:100%;object-fit:cover;display:block}
.tile:hover span:last-child{text-decoration:underline}

.formblk{margin:clamp(30px,4vw,56px) 0}
.billb{position:relative;display:block}
.billb-camp{display:block;width:100%;height:auto;object-fit:cover}
@media(max-width:820px){
  .billb-camp{height:min(64vw,340px)}
  .billb-in{padding:0 16px 16px}
  .billb-in h2{font-size:30px}
}
.billb picture,.billb img{display:block;width:100%;
  height:clamp(460px,62vw,780px);object-fit:cover;object-position:center 18%}
.billb::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,18,28,.55),rgba(10,18,28,0) 55%)}
.billb-in{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;
  padding:0 var(--gut) clamp(24px,3.5vw,48px)}
.billb-in h2{color:#fff}
.billb-in p{color:rgba(255,255,255,.92);margin:8px 0 10px;font-size:13px}
.billb-price{display:block;font-weight:700;font-size:clamp(17px,2vw,22px);
  margin-bottom:12px}
.billb-price small{font-weight:400;font-size:12px;opacity:.85}

.shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:22px 0 6px}
.shelf .pinfo{padding-bottom:14px}

.pnav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.88);
  color:var(--navy);font-size:17px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s}
.pnav.prev{left:8px}.pnav.next{right:8px}
.pmedia:hover .pnav{opacity:1}
.pnav:hover{background:#fff}
@media(max-width:820px){
  .shelf{grid-auto-columns:calc((100% - 12px)/2);gap:12px}
  .tile-im{width:76px;height:76px}
  .pnav{opacity:.85;width:26px;height:26px}
}

/* Dải ảnh trong thẻ */
.pslides{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pslides::-webkit-scrollbar{display:none}
.pslide{flex:0 0 100%;scroll-snap-align:start;height:100%}
.pmedia .pslide picture{position:static;inset:auto;display:block;width:100%;height:100%}
.pmedia .pslide img{width:100%;height:100%;object-fit:cover;object-position:50% 8%;
  transition:none;transform:none}
@media(max-width:820px){
  .pnav{display:none}                       /* điện thoại: vuốt thay nút */
  /* Kệ theo dáng: 2 cột như Uniqlo mobile */
  .shelf{grid-template-columns:repeat(2,1fr);gap:22px 10px}
}
/* Nhãn tình trạng váy kho — góc phải khối tên/giá trên trang sản phẩm */
.cond{flex:0 0 auto;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);padding:8px 14px;color:var(--navy-70);
  margin-top:6px;white-space:nowrap}
.cond-new{border-color:var(--gold-mid,#C9A24D);color:#8C6B2F}

/* ══ Mega menu kiểu Pronovias (chỉ máy tính) ══ */
.mnav{display:contents}
@media(min-width:821px){
  .mnav{display:block}
  .mpanel{position:absolute;left:0;right:0;top:100%;background:#fff;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    opacity:0;visibility:hidden;z-index:60;
    /* visibility trễ 0.35s khi RỜI chuột: đủ thời gian kéo chuột từ tab xuống
       panel mà không bị sập giữa đường */
    transition:opacity .15s ease,visibility 0s linear .35s;
    box-shadow:0 18px 30px -18px rgba(15,25,35,.18)}
  /* dải vô hình nối mép panel với thanh menu — chuột đi qua khe không bị rơi */
  .mpanel::before{content:'';position:absolute;left:0;right:0;top:-30px;height:30px}
  .mnav:hover .mpanel,.mpanel:hover{opacity:1;visibility:visible;
    transition:opacity .15s ease,visibility 0s}
  .mpanel-in{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));
    gap:34px;padding-top:26px;padding-bottom:30px}
  .mpanel h4{font-size:10px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--navy-45);margin:0 0 12px;font-weight:500}
  .mpanel a{display:block;font-size:13px;color:var(--navy-70);padding:4px 0}
  .mpanel a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
  .mtiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .mtile{position:relative;display:block;padding:0!important}
  .mtile img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 12%;display:block}
  .mtile span{position:absolute;left:8px;bottom:8px;background:#fff;padding:6px 12px;
    font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
}

/* Hero kiểu Pronovias: BST viết hoa, câu tuyên ngôn giãn chữ nhẹ */
.hero-cap{text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(30px,3.6vw,52px);margin-top:12px}
@media(max-width:820px){
  .hero-cap{font-size:24px;letter-spacing:.03em}
  .hero-line{font-size:11.5px!important}
}
.hero-line{letter-spacing:.06em;text-transform:uppercase;font-size:13px!important}
/* Điện thoại: mega menu là của desktop — panel phải ẩn hẳn, menu điện thoại
   dùng ngăn kéo burger như cũ */
@media(max-width:820px){
  .mpanel{display:none}
}

/* Khu ảnh PDP: máy tính = lưới 2 ảnh đầu; điện thoại = dải vuốt từng tấm */
.gslide{min-width:0}
.gslide picture{display:block;width:100%;height:100%}
@media(min-width:821px){
  .pdp-media:not(.has-vid) .gslide:nth-child(n+3){display:none}
  /* có video: ô trái = ảnh đầu, ô phải = video (ẩn các ảnh còn lại) */
  .pdp-media.has-vid .gimg:not(.gfirst){display:none}
}
.vid-low{display:none}
@media(max-width:820px){
  .pdp-media{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:0;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
  .pdp-media::-webkit-scrollbar{display:none}
  .pdp-media .gslide{flex:0 0 100%;scroll-snap-align:start}
  .pdp-media img{width:100%;height:auto;aspect-ratio:auto}
  /* Điện thoại: trên = carousel ẢNH; video dời xuống dưới, GIỮ TỈ LỆ GỐC
     (không ép khung 3/4 nên không bị zoom/crop) */
  .vid-low{display:block;margin:6px 0 10px;background:#000}
  .vid-low .gvideo{position:static;aspect-ratio:auto;background:#000}
  .vid-low video{position:static;width:100%;height:auto;display:block;object-fit:contain}
}

/* Băng 3 sự thật + khối chuyện trang chủ */
.hero-claim{color:var(--navy);font-size:13.5px;margin:-10px 0 24px;max-width:44ch}
.facts{border-bottom:1px solid var(--line);background:#fff}
.facts-in{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  padding-top:clamp(26px,3.5vw,44px);padding-bottom:clamp(26px,3.5vw,44px)}
.facts b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,3.4vw,46px);color:var(--navy);line-height:1.1}
.facts span{display:block;margin-top:8px;font-size:12.5px;color:var(--navy-70);
  max-width:30ch}
.facts-addr{text-align:center;white-space:nowrap;overflow:hidden;
  font-size:12px;letter-spacing:.08em;color:var(--navy-45);
  padding:0 var(--gut) clamp(20px,3vw,34px);margin:0}
.story{background:var(--sand)}
.story-in{text-align:center;padding-top:clamp(48px,7vw,90px);
  padding-bottom:clamp(48px,7vw,90px)}
.story-in p{max-width:52ch;margin:16px auto 26px;color:var(--navy-70)}
@media(max-width:820px){
  .facts-in{gap:10px;padding-top:24px;padding-bottom:8px}
  .facts b{font-size:24px}
  .facts span{font-size:10.5px;max-width:none}
  .hero-claim{color:rgba(255,255,255,.95);margin:-6px 0 16px}
}
.plan3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  max-width:820px;margin:0 auto 30px;text-align:left}
.plan3 div{background:#fff;border:1px solid var(--line);padding:18px}
.plan3 b{display:block;font-family:var(--serif);font-weight:400;font-size:24px;
  color:var(--gold-deep,#8C6B2F)}
.plan3 span{display:block;margin-top:6px;font-size:13px;color:var(--navy-70)}
@media(max-width:820px){.plan3{grid-template-columns:1fr}}

/* ── Ô tìm theo mã váy (chốt 11/09) ── */
.srch summary{display:flex;align-items:center;cursor:pointer;list-style:none}
.srch summary::-webkit-details-marker{display:none}
.srch-menu{padding:14px;width:250px}
.srch-menu form{display:flex;flex-direction:column;gap:8px}
.srch-menu input{width:100%;border:1px solid var(--line);padding:9px 11px;font-size:13px}
.mm-srch{display:flex;gap:8px;margin:0 0 14px}
.mm-srch input{flex:1;border:1px solid var(--line);padding:9px 11px;font-size:13px}

/* Nút đăng nhập nhân viên — chỉ hiện trên điện thoại (chốt 29/09) */
.mob-login{display:none;align-items:center}
@media(max-width:820px){.mob-login{display:flex}}
.mob-scan{display:none;align-items:center}
@media(max-width:820px){.mob-scan{display:flex}}

/* chốt 30/09: dải KPI kho + chi tiết váy chỉ hiện trên máy tính */
@media(max-width:820px){.an-mobile{display:none!important}}