/* WEDDINGBOOK · Venue Portfolio 2026 — Lớp 1
   Token đo từ WEDDINGBOOK_Venue_Portfolio_2026.pptx. Không thêm màu ngoài bảng (trừ --error theo brief mục 5). */

@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/bvp-400.woff2) format("woff2")}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/bvp-500.woff2) format("woff2")}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/bvp-600.woff2) format("woff2")}
/* Font dự phòng đã chỉnh cỡ theo số đo của Be Vietnam Pro để chữ không nhảy khi font tải xong */
@font-face{font-family:"BVP Fallback";src:local("Arial"),local("Helvetica Neue"),local("Helvetica"),local("Liberation Sans"),local("Roboto");size-adjust:106.7%;ascent-override:93.7%;descent-override:24.8%;line-gap-override:0%}

:root{
  /* ===== DESIGN TOKENS (12/10, theo feedback UIUX Director phần 3) =====
     Màu: nền sáng chính --paper · nền ấm --paper-2 · nền tối --dark (mở đầu, trang kết)
     Vàng: --gold-l chỉ cho mảng/đường/nút (không cho chữ nhỏ) · --gold-lg chữ vàng cỡ lớn ≥24px (3,6:1)
           · --gold-t chữ vàng cỡ nhỏ trên nền sáng (≥4,5:1) · --gold-d champagne trên nền tối (8,4:1) */
  --paper:#F3F3F3; --paper-2:#ECEAE6; --dark:#181818; --ink:#0F0F0D; --body:#46413A;
  --gold-l:#B08A46; --gold-lg:#96743A; --gold-t:#84652C; --gold-d:#CDAE74;
  --gold:var(--gold-lg);
  --quote:#5E574E; --caption:#6E675E; --label:#6F6458; --on-dark:#FFFFFF; --on-dark-2:#D8D2C8;
  --ph:#767067;               /* chữ gợi ý trong ô nhập: 4,9:1 trên #fff */
  --error:#A3422F;            /* đỏ đất, 6.0:1 trên --paper, 6.6:1 trên #fff */
  --success:#2F6B4F;
  --focus:var(--ink);
  --line:rgba(15,15,13,.14); --line-dark:rgba(255,255,255,.16);
  --font:"Be Vietnam Pro","BVP Fallback",system-ui,sans-serif;
  --radius:2px; --shadow:0 1px 2px rgba(15,15,13,.06),0 8px 24px -12px rgba(15,15,13,.18);
  --ease:cubic-bezier(.2,.7,.2,1);
  /* Khoảng cách theo bước 8px: 8 · 16 · 24 · 32 · 40 · 48 · 64 · 80 · 96 · 120 */
  --gx:20px;                 /* lề hai bên điện thoại (20–24px) */
  --sec:64px;                /* khoảng cách dọc của mục (điện thoại 48–72px) */
  --gg:12px;                 /* khoảng cách giữa các ảnh trong một bộ ảnh */
  --hdr:64px;                /* thanh trên cùng điện thoại 64px, desktop 80px */
  /* Thang chữ điện thoại: hero 36–44 · tiêu đề mục 28 · h3 20–22 · thân 16 · nhãn 11 · chú thích 13 */
  --f-hero:33px; --f-h2:28px; --f-case:22px; --f-lead:19px; --f-num:44px; --f-quote:19px;
  --f-body:16px; --lh-body:1.7; --f-meta:12px; --f-label:12px;   /* 13/10 vòng 10: nhãn, thông tin nhỏ trên điện thoại 11 → 12px (feedback_2 mục 10) */
  --f-cap:13px; --f-item:20px; --f-big:24px;
}
@media (min-width:360px){:root{--f-hero:38px}}
@media (min-width:375px){:root{--f-hero:40px}}
@media (min-width:390px){:root{--gx:24px}}
@media (min-width:640px){:root{--gx:40px;--sec:72px;--f-hero:48px;--f-h2:30px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 8px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--font);font-size:var(--f-body);line-height:var(--lh-body);font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;text-decoration:none}
.skip:focus{top:8px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* nền giấy + nhiễu (ảnh lặp nhỏ cắt từ deck) */
.paper{background:var(--paper) url(../img/noise-light.webp) repeat;background-size:512px 512px}
.darkbg{background:var(--dark) url(../img/noise-dark.webp) repeat;background-size:512px 512px;color:var(--on-dark-2);--gold:var(--gold-d);--gold-t:var(--gold-d);--focus:var(--gold-d)}
.drawer,.hdr.on-dark{--gold:var(--gold-d);--focus:var(--gold-d)}
.formbox{--gold:var(--gold-lg);--gold-t:#84652C;--focus:var(--ink)}
/* tông nền thứ hai: đổi theo chương (mục giới thiệu, từng case), chung cho desktop và điện thoại */
.tb{background:var(--paper-2) url(../img/noise-tone2.webp) repeat;background-size:512px 512px}
/* khối chỉ hiện ở một cỡ màn hình (cùng chữ, khác vị trí) */
@media (max-width:1023.98px){.only-d{display:none!important}}
@media (min-width:1024px){.only-m{display:none!important}}

/* ngắt dòng chủ đích: [d] desktop · [m] điện thoại · \n từ 640px (điện thoại tự xuống dòng, có cân dòng) */
.bd,.bm,.bt{display:none}
@media (max-width:1023.98px){br.bm{display:inline}}
@media (min-width:1024px){br.bd{display:inline}}
@media (min-width:640px){br.bt{display:inline}}
.g{color:var(--gold)}
.nw{white-space:nowrap}

/* chữ chung */
.lbl{font-size:var(--f-label);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--label);line-height:1.5}
.ttl{font-weight:400;color:var(--ink);font-size:var(--f-h2);line-height:1.3;letter-spacing:-.005em;text-wrap:balance}
.lead{font-size:var(--f-lead);color:var(--gold-t);line-height:1.5;font-weight:400}
.cap{font-size:var(--f-cap);color:var(--caption);line-height:1.5}
.p{font-size:var(--f-body);line-height:var(--lh-body);color:var(--body);text-align:left;hyphens:manual}
.p + .p{margin-top:1em}
.p,.lead,.facts dd,figcaption,.quote p,.cap{text-wrap:pretty}
/* Đoạn văn từ 2 dòng trở lên: căn đều hai bên (Chau chốt 09/10). Dòng cuối vẫn căn trái, nên đoạn một dòng không đổi.
   Không áp cho tiêu đề, câu dẫn vàng, câu trích dẫn (chữ lớn, dòng ngắn), bảng thông tin, chú thích ảnh: căn đều sẽ hở chữ. */
.p,.list4 p,.consent{text-align:justify;text-justify:inter-word;hyphens:none;-webkit-hyphens:none}
.p.jl,.list4 p.jl,.consent.jl{text-align:left}   /* đoạn căn đều bị hở chữ: trả về căn trái (app.js) */
.wrap{padding-inline:var(--gx)}
.sec{padding-block:var(--sec)}

/* ==== thanh brand cố định ==== */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:12px;padding-inline:var(--gx);color:var(--ink);transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.hdr.on-dark{color:#fff}
.hdr.solid{background:rgba(243,243,243,.92);box-shadow:0 1px 0 var(--line);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px)}
.hdr.solid.on-dark{background:rgba(24,24,24,.86);box-shadow:0 1px 0 var(--line-dark)}
.brand{display:flex;align-items:baseline;gap:.6em;text-decoration:none;min-height:44px;align-items:center;white-space:nowrap}
.brand b{font-weight:600;font-size:15px;letter-spacing:.08em;line-height:1}
.brand span{font-size:10.5px;font-weight:600;letter-spacing:.18em;opacity:.72}
.nav{display:none}
.hdr-r{display:flex;align-items:center;gap:6px}
.btn-cta{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border:1px solid currentColor;border-radius:999px;font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background-color .25s,color .25s,border-color .25s}
.hdr .btn-cta{background:var(--ink);border-color:var(--ink);color:#fff}
.hdr.on-dark .btn-cta{background:#fff;border-color:#fff;color:var(--ink)}
.hdr.on-dark .prog{background:var(--gold-d)}
@media (hover:hover){.hdr .btn-cta:hover{background:#2E2C28;border-color:#2E2C28}.hdr.on-dark .btn-cta:hover{background:#EDE6D9;border-color:#EDE6D9}}
@media (max-width:389.98px){.hdr .btn-cta{padding:0 14px;font-size:13px}.hdr{gap:8px}}
.hdr .btn-cta .cs{display:none}
@media (max-width:374.98px){.hdr .btn-cta .cf{display:none}.hdr .btn-cta .cs{display:inline}}
.burger{width:44px;height:44px;display:inline-grid;place-items:center;background:none;border:0;padding:0;cursor:pointer;color:inherit}
.burger i{display:block;width:20px;height:1.5px;background:currentColor;position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
.burger i::before{top:-6px}.burger i::after{top:6px}
.prog{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--gold-l);transform-origin:0 50%;transform:scaleX(0)}
@media (max-width:420px){.brand span{display:none}}

/* menu điện thoại */
.drawer{position:fixed;inset:0;z-index:60;background:var(--dark);color:#fff;display:flex;flex-direction:column;padding:calc(var(--hdr) + 16px) var(--gx) 32px;visibility:hidden;opacity:0;transition:opacity .3s var(--ease),visibility 0s .3s}
.drawer.open{visibility:visible;opacity:1;transition:opacity .3s var(--ease)}
.drawer .x{position:absolute;top:6px;right:calc(var(--gx) - 10px)}
.drawer .x i{background:transparent}.drawer .x i::before{transform:translateY(6px) rotate(45deg)}.drawer .x i::after{transform:translateY(-6px) rotate(-45deg)}
.drawer ul{display:flex;flex-direction:column}
.drawer li a{display:flex;align-items:center;min-height:52px;font-size:20px;text-decoration:none;border-bottom:1px solid var(--line-dark);color:var(--on-dark-2)}
.drawer li:last-child a{color:var(--gold)}
.drawer .dbrand{position:absolute;top:0;left:var(--gx);height:var(--hdr);display:flex;align-items:center;font-weight:600;letter-spacing:.06em;font-size:14px}

/* ==== ảnh ==== */
.ph{position:relative;overflow:hidden;background:var(--bg,#dcdad5);aspect-ratio:var(--ar);border-radius:var(--radius)}
.ph picture,.ph img{width:100%;height:100%}
.ph img{object-fit:cover;opacity:0;transition:opacity .6s var(--ease)}
.ph.ok img{opacity:1}
.no-js .ph img{opacity:1}
.ph.sh{box-shadow:var(--shadow)}
.tag{position:absolute;left:10px;bottom:10px;z-index:2;padding:4px 8px;font-size:10px;white-space:nowrap;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.3;color:#fff;background:rgba(15,15,13,.55);border-radius:2px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none}
figcaption{margin-top:8px}
.static-grid .tag,.tl .s4 .ims div:not(.wide) .tag{left:6px;bottom:6px;padding:3px 5px;font-size:8px;letter-spacing:.08em}

/* ==== hiệu ứng hiện khi cuộn ==== */
.js .rv{opacity:0;transform:translate3d(0,12px,0);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1!important;transform:none!important;transition:none}.ph img{transition:none}}

/* ==== 1. mở đầu ==== */
/* Ảnh nền riêng cho desktop (ngang) và điện thoại (dọc), lớp phủ tối theo chiều dọc: đủ tương phản cho chữ
   và thanh trên cùng, vẫn giữ chi tiết ảnh. Cao 85svh (điện thoại) / 88vh (desktop): lộ phần đầu mục kế tiếp. */
.hero{position:relative;min-height:85vh;min-height:85svh;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;overflow:hidden;background-color:#1b1a18}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg .ph{height:100%;aspect-ratio:auto;border-radius:0;background:#2a2824}
.hero-bg::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(14,13,12,.58) 0%,rgba(14,13,12,.2) 22%,rgba(14,13,12,.16) 42%,rgba(14,13,12,.5) 66%,rgba(14,13,12,.82) 100%)}
.hero-in{position:relative;z-index:1;padding:calc(var(--hdr) + 24px) var(--gx) calc(48px + env(safe-area-inset-bottom))}
.hero h1{font-weight:400;font-size:var(--f-hero);line-height:1.2;color:#fff;letter-spacing:-.01em;text-wrap:balance;max-width:11em}
.hero h1 .g{white-space:nowrap;color:#fff}   /* cụm chính không bị tách dòng; 12/10 vòng 5: tiêu đề mở đầu toàn trắng (Chau chốt) */
.hero .tag-line{margin-top:20px;font-size:17px;color:#EDE8DF;line-height:1.5;max-width:30em}

/* ==== 2. quan điểm ==== */
.view .ttl{font-size:var(--f-big);line-height:1.45;margin-top:20px;text-wrap:pretty}
.view .rule{width:56px;height:1px;background:var(--gold-l);margin:28px 0 22px}

/* ==== 3. về weddingbook ==== */
.about .media .ph{aspect-ratio:var(--ar);border-radius:0}
.about .txt{margin-top:32px}
.about .ttl{margin-top:14px}
.about .body{margin-top:22px}
.stats{margin-top:36px;display:grid;gap:22px}
.stat{padding-top:18px;border-top:1px solid var(--line)}
.stat b{display:block;font-weight:400;font-size:var(--f-num);line-height:1.15;color:var(--gold);letter-spacing:-.01em}
.stat span{display:block;margin-top:6px}
.markets{margin-top:30px}

/* ==== 4. vì sao chọn ==== */
.why .ttl{margin-top:14px}
.four{margin-top:36px;display:grid}
.four li{padding:22px 0;border-top:1px solid var(--line)}
.four li:last-child{border-bottom:1px solid var(--line)}
.num{font-size:12px;font-weight:600;color:var(--gold-t);letter-spacing:.06em}
.four h3{font-size:var(--f-item);font-weight:400;color:var(--ink);line-height:1.4;margin-top:8px}
.four p{margin-top:8px}
.partners{margin-top:36px;display:grid;gap:26px}
.partners ul{margin-top:10px;display:flex;flex-wrap:wrap;column-gap:0;row-gap:2px;font-size:12px;letter-spacing:.06em;color:var(--caption);line-height:1.9}
.partners li{white-space:nowrap}
.partners li:not(:last-child)::after{content:"·";margin:0 .7em;color:var(--caption)}

/* accordion / "xem tất cả": chỉ thu gọn trên điện thoại; desktop hiển thị đầy đủ */
.acc-h{display:block;width:100%;padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;text-align:left;letter-spacing:inherit;cursor:default}
.ph-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}

/* ==== 5. năng lực ==== */
.cap7 .ttl{margin-top:14px}
.cap7 .intro .p{margin-top:20px}
.rows{margin-top:32px}
.rows li{display:grid;grid-template-columns:34px 1fr;column-gap:10px;padding:18px 0;border-bottom:1px solid var(--line)}
.rows li:last-child{border-bottom:0}   /* 12/10: bỏ đường kẻ đầu và cuối danh sách (feedback 5.5) */
.rows .n{font-size:11px;font-weight:600;color:var(--caption);padding-top:5px;letter-spacing:.06em}
.rows h3{font-size:var(--f-item);font-weight:400;color:var(--ink);line-height:1.4}
.rows p{grid-column:2;margin-top:6px}

/* ==== dự án ==== */
.case{padding-top:var(--sec)}
.case + .case{border-top:1px solid var(--line)}
.opener{display:block;text-decoration:none}
.opener .ph{aspect-ratio:var(--ar)}
.opener .meta{margin-top:20px;display:flex;flex-direction:column;padding-inline:var(--gx)}
.opener .ph{border-radius:0}
.opener .count{font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--caption)}
.opener .svc{margin-top:16px}
.opener .svc .lbl{display:block}
.opener .svc .s{display:block;color:var(--gold-t);font-size:var(--f-lead);line-height:1.4;margin-top:4px}
.opener h2{font-weight:400;color:var(--ink);font-size:var(--f-h2);line-height:1.3;margin-top:10px;text-wrap:balance}
.opener .cc{margin-top:8px}
.brief{margin-top:48px}
.brief .kicker{display:block}
.brief h3.cn{font-weight:400;color:var(--ink);font-size:var(--f-case);line-height:1.35;margin-top:10px}
.brief .lead{margin-top:14px}
.blocks{margin-top:28px;display:grid;gap:22px}
.blocks h2,.blocks h4{font-size:var(--f-label);font-weight:600;letter-spacing:.18em;color:var(--label);text-transform:uppercase}
.blocks p{margin-top:6px}
.facts{margin-top:32px;border-top:1px solid var(--line)}
.facts div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:var(--f-meta);font-weight:600;color:var(--label);letter-spacing:.12em;padding-top:3px;line-height:1.5}
.facts dd{font-size:16px;color:var(--ink);line-height:1.55}
.facts dd span{display:block}
.gal{margin-top:40px}
.gal .head{display:none}

/* carousel (chỉ ảnh thật) */
.car{position:relative;margin-inline:calc(var(--gx) * -1)}
.car .track{display:flex;gap:var(--gg);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 var(--gx) 4px;scroll-padding-inline:var(--gx)}
.car .track::-webkit-scrollbar{display:none}
.car .it{flex:0 0 auto;scroll-snap-align:start;width:min(80vw,560px)}
.car .it .ph{width:100%}
.posters .it{width:min(64vw,320px)}
/* 5 poster dự án 01: mỗi ảnh là liên kết mở video (tab mới). Rê chuột: phủ tối nhẹ + nút phát đổi màu; không phóng to, không đổi bố cục */
.vlink{display:block;position:relative;color:inherit;text-decoration:none;border-radius:var(--radius)}
.vlink .ph::after{content:"";position:absolute;inset:0;background:rgba(15,15,13,0);transition:background-color .25s var(--ease);pointer-events:none}
.play{position:absolute;right:10px;top:10px;z-index:2;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(15,15,13,.58);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .25s var(--ease),color .25s var(--ease)}
.play svg{width:22px;height:22px}
.vt{color:inherit;text-decoration:none}
.vsrc{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:12px;font-weight:500;line-height:1.4;color:var(--gold-t);letter-spacing:.02em}
.vsrc svg{width:12px;height:12px;flex:0 0 auto}
@media (hover:hover){
  .vlink:hover .ph::after{background:rgba(15,15,13,.14)}
  .vlink:hover .play{background:var(--gold-d);color:var(--ink)}
  .posters .it:hover .vt{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
}
.posters .it .ph{aspect-ratio:476/714}
.atelier .it .ph{aspect-ratio:3/2}
.bento .it .ph{aspect-ratio:4/5}
.car .it figcaption{margin-top:10px}
.car .it b{display:block;font-size:13px;font-weight:600;color:var(--ink);line-height:1.4}
.car .it small{display:block;font-size:var(--f-label);font-weight:600;letter-spacing:.14em;color:var(--caption);margin-top:2px}

/* lưới tĩnh cho phối cảnh (không tương tác) */
.static-main .ph{aspect-ratio:var(--ar)}
.static-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px var(--gg);margin-top:14px}
.static-grid .ph{aspect-ratio:904/546}
.static-grid figure:last-child:nth-child(odd){grid-column:1/-1}
.quote{position:relative;margin-top:28px}
.quote::before{content:"“";display:block;font-size:56px;line-height:.9;color:var(--gold-l);height:30px}
.quote p{font-size:var(--f-quote);line-height:1.6;color:var(--quote)}
.quote p + p{margin-top:.6em}
.legend{margin-top:16px}

/* timeline Capella */
.tl{margin-top:32px;position:relative}
.tl li{position:relative;padding:0 0 28px 28px}
.tl li::before{content:"";position:absolute;left:4px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--gold-l)}
.tl li::after{content:"";position:absolute;left:8px;top:22px;bottom:4px;width:1px;background:var(--line)}
.tl li:last-child::after{display:none}
.tl .h{font-size:var(--f-label);font-weight:600;letter-spacing:.16em;color:var(--label)}
.tl .h .n{color:var(--gold-t);margin-right:.6em}
.tl .b{margin-top:4px}
.tl .ims{display:grid;grid-template-columns:repeat(var(--n,1),1fr);gap:8px;margin-top:12px}
.tl .ims .wide{grid-column:1/-1}

/* trước / sau The Chapel */
.ba{display:grid;gap:18px;margin-top:40px}
.ba .ph{aspect-ratio:742/1246}
.bento{display:block}

/* ==== hai hình thức hợp tác ==== */
.coop .ttl{margin-top:14px}
.cards{display:grid;gap:40px;margin-top:36px}
.card .ph{aspect-ratio:16/10}
.card .lbl{display:block;margin-top:20px}
.card h3,.card h2{font-weight:400;color:var(--ink);font-size:var(--f-case);line-height:1.35;margin-top:6px}
.card .sub{color:var(--gold-t);font-size:16px;margin-top:6px;line-height:1.5}
.card .p{margin-top:12px}
.card .fit{margin-top:18px}
.card .fit p{margin-top:6px}

/* ==== bước đầu tiên ==== */
.steps .media .ph{aspect-ratio:4/4.2;border-radius:0}
.steps .txt{margin-top:36px}
.steps .ttl{margin-top:14px;font-size:var(--f-h2)}
.steps .sub{margin-top:8px;font-size:16px;color:var(--caption);line-height:1.5}
.list4{margin-top:28px;border-top:1px solid var(--line)}
.list4 li{display:grid;grid-template-columns:48px 1fr;gap:4px 8px;padding:18px 0;border-bottom:1px solid var(--line)}
.list4 .n{font-size:26px;color:var(--gold);line-height:1.1;grid-row:span 2}
.list4 h3{font-size:var(--f-item);font-weight:400;color:var(--ink);line-height:1.4}
.list4 p{color:var(--caption);font-size:15px;line-height:1.6}
.steps .rule{width:56px;height:1px;background:var(--ink);opacity:.5;margin:28px 0 18px}
.btn-main{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;width:100%;margin-top:28px;background:var(--ink);color:#fff;border:0;border-radius:999px;font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;transition:background-color .25s,transform .25s}
.btn-main:hover{background:#2a2a27}
.btn-main svg{width:16px;height:16px}

/* ==== trang kết: liên hệ hợp tác ==== */
.contact{color:var(--on-dark-2);padding-top:var(--sec)}
.contact .lbl{color:var(--on-dark-2)}
.contact h2{font-weight:400;color:#fff;font-size:calc(var(--f-h2) + 10px);line-height:1.25;letter-spacing:-.01em}
.contact .closing{margin-top:24px;font-size:var(--f-lead);line-height:1.55;color:#fff}
.clist{margin-top:48px;display:grid;gap:0;border-top:1px solid var(--line-dark)}
.clist div{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--line-dark);align-items:baseline}
.clist dt{font-size:var(--f-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-2);opacity:.8}
.clist dd{color:#fff;font-size:15px;line-height:1.55;overflow-wrap:anywhere}
.clist a{text-decoration:none;display:inline-flex;min-height:32px;align-items:center;gap:6px;transition:color .2s;text-underline-offset:4px}
.clist a:hover{color:var(--gold-d);text-decoration:underline}
.clist a svg,.foot a svg{width:12px;height:12px;flex:0 0 auto;opacity:.75}
.btn-zalo{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;margin-top:24px;border-radius:999px;border:1px solid rgba(255,255,255,.5);color:#fff;text-decoration:none;font-size:15px;font-weight:500;transition:background-color .25s,border-color .25s}
.btn-zalo:hover{background:rgba(255,255,255,.08);border-color:#fff}
.btn-zalo svg{width:22px;height:22px}
.formbox{margin:40px calc(var(--gx) * -1) 0;background:#fff;color:var(--body);padding:32px var(--gx) 36px;border-radius:0}
.formbox h3{font-weight:400;color:var(--ink);font-size:var(--f-case);line-height:1.35}
.fgrid{display:grid;gap:20px;margin-top:20px}
.fld label{display:block;font-size:14px;font-weight:500;color:var(--ink);margin-bottom:8px;line-height:1.4}
.fld label .req{color:var(--gold-t);margin-left:2px}
.fld label .opt{color:var(--caption);font-weight:400}
/* Ô nhập theo Material 3 (outlined): cao 56px, bo 4px, viền 1px → 2px khi đang nhập / lỗi, hover đậm viền.
   Nhãn đặt trên ô (không dùng nhãn nổi) vì nhãn là câu hỏi dài, nhãn nổi sẽ bị cắt trên điện thoại. */
.inp{display:block;width:100%;min-height:56px;padding:14px 16px;border:1px solid #8F887E;border-radius:4px;background:#fff;font-size:16px;line-height:1.4;color:var(--ink);-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.inp::placeholder{color:var(--ph);opacity:1}
.inp:hover{border-color:var(--ink)}
.inp:focus{outline:0;border-color:var(--gold-l);box-shadow:inset 0 0 0 1px var(--gold-l)}
select.inp{padding-right:48px;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5l5.5 5.5 5.5-5.5' fill='none' stroke='%230F0F0D' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center;text-overflow:ellipsis}
select.inp.empty{color:var(--ph)}
.inp:disabled,.inp[readonly]{background-color:#F4F3F1;border-color:#C9C4BC;color:#8F887E;cursor:not-allowed}
select.inp option{color:var(--ink)}
.fld.bad .inp{border-color:var(--error);box-shadow:inset 0 0 0 1px var(--error)}
/* Lỗi không chỉ bằng màu: viền dày 2px + biểu tượng "!" + câu báo lỗi ngay dưới ô */
.err{display:none;margin-top:6px;font-size:13px;line-height:1.45;color:var(--error);font-weight:500}
.fld.bad .err{display:flex;gap:6px;align-items:flex-start}
.fld.bad .err::before{content:"";flex:0 0 auto;width:16px;height:16px;margin-top:1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23A3422F'/%3E%3Cpath d='M8 4v5' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.6' r='1.1' fill='%23fff'/%3E%3C/svg%3E") no-repeat center/16px}
.fld.bad label{color:var(--error)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Nút hành động chính (M3 filled button): nền vàng, chữ đen 6:1; lớp trạng thái 8% khi rê, 12% khi bấm */
.submit{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;margin-top:28px;border:0;border-radius:999px;background:var(--gold-l);color:var(--ink);font-size:16px;font-weight:600;letter-spacing:.01em;cursor:pointer;transition:box-shadow .2s,opacity .25s}
.submit::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:0;transition:opacity .15s}
.submit:hover::after{opacity:.08}.submit:active::after{opacity:.12}
.submit:hover{box-shadow:0 1px 3px rgba(0,0,0,.18)}
.submit:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.submit[disabled]{cursor:progress}
.submit[disabled]::after{opacity:.08}
/* đang gửi: vòng quay nhỏ trước chữ "Đang gửi…" */
.submit.busy::before{content:"";width:16px;height:16px;margin-right:10px;border-radius:50%;border:2px solid rgba(15,15,13,.25);border-top-color:var(--ink);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.submit.busy::before{animation-duration:2.4s}}
form.busy .inp{pointer-events:none;background-color:#F8F7F5}
.consent{margin-top:14px;font-size:12px;line-height:1.55;color:var(--caption)}
.consent a{color:var(--body);text-underline-offset:2px}
.neterr{display:none;margin-top:14px;padding:10px 12px;font-size:13px;color:var(--error);background:rgba(163,66,47,.06);border-left:2px solid var(--error)}
.neterr.on{display:block}
.thanks{display:none;padding:12px 0 4px}
.thanks p{font-size:var(--f-lead);line-height:1.6;color:var(--ink)}
.thanks::before{content:"";display:block;width:44px;height:44px;margin-bottom:20px;border-radius:50%;background:var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat center/24px}
.formbox.done form{display:none}
.formbox.done .thanks{display:block}


/* nút nổi (điện thoại) */
.fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;display:flex;flex-direction:column;gap:10px;align-items:center;transition:opacity .3s,transform .3s}
.fab a,.fab button{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:0;cursor:pointer;box-shadow:0 6px 18px -6px rgba(0,0,0,.35);text-decoration:none}
.fab .z{background:#0068FF;color:#fff}
.fab .z svg{width:30px;height:30px}
.fab .up{width:44px;height:44px;background:rgba(255,255,255,.95);color:var(--ink);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .3s,transform .3s}
.fab .up.on{opacity:1;pointer-events:auto;transform:none}
.fab .up svg{width:16px;height:16px}
.fab.hide{opacity:0;pointer-events:none;transform:translateY(12px)}

/* ======================================================================
   DESKTOP ≥1024px — bố cục theo slide 20in (1in = 5vw; 1pt = 100vw/1440)
   ====================================================================== */
@media (min-width:1024px){
  :root{
    /* 12/10: chữ và lưới dừng tăng ở 1440px; màn lớn hơn giữ khung nội dung tối đa 1296px ở giữa (feedback 3.2) */
    --p:clamp(.72px,calc(100vw / 1440),1px);
    --in:min(5vw,72px);             /* 1 inch của slide */
    --vw:min(100vw,2000px);
    --cx:max(var(--in),calc((var(--vw) - 1296px) / 2));   /* lề hai bên của khung nội dung chung */
    --gx:var(--cx);
    --hdr:80px;
    --sec:clamp(88px,8vw,120px);    /* đệm dọc mục thường 80–120px */
    --sec-x:clamp(104px,10vw,144px);/* mục nhấn 120–160px */
    --gg:16px;
    --f-hero:clamp(52px,calc(72 * var(--p)),76px);
    --f-h2:clamp(28px,calc(34 * var(--p)),36px);
    --f-case:max(24px,calc(28 * var(--p)));
    --f-lead:max(18px,calc(21 * var(--p)));
    --f-num:max(36px,calc(44 * var(--p)));
    --f-quote:max(18px,calc(21 * var(--p)));
    --f-body:max(15px,calc(16 * var(--p))); --lh-body:1.65;
    --f-meta:max(11px,calc(11.5 * var(--p))); --f-label:max(11px,calc(11.5 * var(--p))); --f-cap:max(13px,calc(13 * var(--p)));
    --f-item:max(17px,calc(20 * var(--p)));
    --f-big:max(30px,calc(38 * var(--p)));
  }
  .page{max-width:2000px;margin-inline:auto}
  .hdr{padding-inline:var(--cx)}
  .brand b{font-size:16px}
  .nav{display:flex;gap:clamp(14px,1.6vw,28px);margin-right:8px}
  .nav{gap:clamp(20px,2.4vw,40px);margin-right:20px}
  .nav a{font-size:15px;font-weight:500;letter-spacing:.01em;text-decoration:none;opacity:.86;min-height:44px;display:inline-flex;align-items:center;position:relative;transition:opacity .2s}
  .nav a::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
  .nav a:hover,.nav a[aria-current="true"]{opacity:1}
  .nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}
  .hdr .btn-cta{font-size:14px;min-height:44px;padding:0 24px}
  .acc-h{pointer-events:none}
  /* 12/10: bỏ quy tắc "mỗi trang cao một màn hình" cho mục chữ (feedback 3.1): mục cao theo nội dung + đệm --sec.
     Chỉ trang mở dự án, Về WEDDINGBOOK, Bước đầu tiên (ảnh tràn một cột) giữ chiều cao theo tỉ lệ slide, tối đa một màn hình. */
  .view,.why,.coop,.gwrap{display:flex;flex-direction:column;justify-content:center}
  .burger{display:none}
  .fab{display:none}

  .hero{min-height:clamp(560px,88vh,1040px)}
  .hero-bg::after{background:linear-gradient(180deg,rgba(14,13,12,.55) 0%,rgba(14,13,12,.12) 24%,rgba(14,13,12,.1) 46%,rgba(14,13,12,.52) 72%,rgba(14,13,12,.8) 100%),linear-gradient(90deg,rgba(14,13,12,.42) 0%,rgba(14,13,12,0) 62%)}
  .hero-in{padding:calc(var(--hdr) + 40px) var(--cx) clamp(56px,7vh,88px)}
  .hero h1{font-size:var(--f-hero);line-height:1.15;max-width:12em}
  .hero .tag-line{font-size:max(18px,calc(22 * var(--p)));margin-top:24px}

  .grid20{display:grid;grid-template-columns:repeat(20,1fr);column-gap:0}

  /* quan điểm: chữ lớn bắt đầu ở x=5in */
  .view{padding-block:var(--sec-x)}
  .view .vin{padding-left:288px;max-width:calc(var(--in) * 18.6);margin-top:48px}
  .view .ttl{margin-top:0;font-size:var(--f-big);line-height:1.4}
  .view .rule{margin:32px 0 24px}
  .view .p{max-width:calc(var(--in) * 11.5)}

  /* về weddingbook: chữ trái, ảnh phải 7.8in */
  .about{display:grid;grid-template-columns:1fr calc(var(--in) * 7.8);min-height:min(100vh,calc(var(--in) * 11.25));padding:0}
  .about .media{order:2}
  .about .media .ph{aspect-ratio:auto;height:100%;border-radius:0}
  .about .txt{order:1;margin:0;padding:var(--sec) var(--in) calc(var(--sec) * .8) var(--cx);display:flex;flex-direction:column}
  .about .ttl{font-size:var(--f-h2)}
  .about .body{margin-top:auto;padding-top:64px;max-width:calc(var(--in) * 10.2)}
  .stats{grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px}
  .stat{border-top:0;padding-top:0}
  .stat span{max-width:calc(var(--in) * 3.1)}
  .markets{margin-top:32px}

  /* vì sao chọn: 4 cột */
  .why{padding-block:var(--sec)}
  .why .ttl{font-size:var(--f-h2)}
  .four{grid-template-columns:repeat(4,1fr);column-gap:56px;margin-top:88px}
  .four li,.four li:last-child{border:0;padding:0}
  .four h3{min-height:2.8em}
  .four p{font-size:max(14px,calc(14 * var(--p)));margin-top:16px}
  .partners{grid-template-columns:1fr 1fr;column-gap:40px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line)}

  /* năng lực: trái 6.2in, phải bảng */
  .cap7{display:grid;grid-template-columns:calc(var(--in) * 5.9) 1fr;column-gap:48px;padding-block:var(--sec);align-content:center}
  .cap7 .intro{display:flex;flex-direction:column}
  .cap7 .ttl{font-size:var(--f-h2)}
  .cap7 .intro .p{margin-top:24px;max-width:calc(var(--in) * 5.1)}
  .rows{margin-top:0}
  .rows li:first-child{padding-top:0}
  /* mô tả năng lực ngắn (1–2 dòng) trong cột hẹp: căn trái cho cả 7 dòng, tránh dòng bị giãn chữ (feedback 5.6) */
  .rows .acc-p .p{text-align:left}
  .rows li{grid-template-columns:calc(var(--in) * .9) calc(var(--in) * 4.7) 1fr;padding:16px 0 24px;align-items:start}
  .rows .acc-p{grid-column:3;padding-top:2px}
  .rows .acc-p p{margin-top:0}
  .pm,.more:not(.ph-h){display:none}

  /* dự án */
  .case{padding-top:0}
  .case + .case{border-top:0}
  /* trang mở dự án: ảnh chủ đạo tỉ lệ ~4:3–3:2, cao tối đa 86% màn hình; cột chữ bám lề phải của khung chung */
  .opener{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--cx) + var(--in) * 5);height:clamp(520px,86vh,calc(var(--vw) * .54));position:relative}
  .opener .ph{aspect-ratio:auto;height:100%;border-radius:0}
  .opener .ph picture{position:absolute;inset:0}   /* ảnh dọc không được đẩy cao trang mở case */
  .opener .meta{min-width:0;margin:0;padding:var(--in) var(--cx) 40px 48px;justify-content:flex-end;position:relative}
  .opener .svc{margin-top:0}
  .opener .svc .s{font-size:max(17px,calc(20 * var(--p)))}
  .opener h2{font-size:var(--f-h2);margin-top:16px}
  .opener .cc{margin-top:16px}
  .brief{margin:0;padding:var(--sec) var(--cx);align-content:center;display:grid;grid-template-columns:calc(var(--in) * 9.2) 1fr;column-gap:64px;grid-template-areas:"l b" "f f"}
  .brief .kicker{grid-area:k}
  .brief h3.cn{grid-area:n;font-size:var(--f-h2);margin-top:14px}
  .brief .lead{grid-area:l;margin-top:24px;font-size:var(--f-lead);max-width:calc(var(--in) * 8)}
  .brief > div.only-d{grid-area:f}
  .blocks{grid-area:b;margin-top:24px;gap:24px;max-width:72ch}
  .blocks p{margin-top:8px}
  .facts{grid-area:f;margin-top:48px;display:grid;grid-template-columns:calc(var(--in) * 2.95) calc(var(--in) * 2.25) calc(var(--in) * 2.4) calc(var(--in) * 2.5) 1fr;padding-top:24px}
  .facts div{display:block;border:0;padding:0 24px 0 0}
  .facts dt{padding:0}
  .facts dd{margin-top:8px;font-size:max(15px,calc(16 * var(--p)))}
  .facts .multi dd span{display:inline}
  .facts .multi dd span:not(:last-child)::after{content:"\00a0·  "}
  .gwrap{padding-inline:0}
  .gal{margin:0;padding:var(--sec) var(--cx)}
  .gwrap .gal,.gwrap .ba{padding-top:0}   /* nối liền phần giới thiệu dự án: khoảng cách = đệm dưới của brief */
  .gal .head{display:block;margin-bottom:40px}
  .gal .head h3{font-weight:400;color:var(--ink);font-size:var(--f-case);line-height:1.3;margin-top:calc(var(--in) * .06)}

  /* case 01: 5 poster so le (tĩnh trên desktop) */
  .car{margin:0}
  .car .it{width:auto}
  .car .track{overflow:visible;padding:0;scroll-snap-type:none}
  .posters .track{display:grid;grid-template-columns:repeat(5,1fr);column-gap:var(--gg)}
  .posters .it .ph{height:auto;width:100%;aspect-ratio:476/714}
  .posters .it figcaption{max-width:none;margin-top:12px}
  .posters .it:nth-child(even){margin-top:32px}

  /* case 02: collage 6 ảnh + trích dẫn */

  /* case 03: chuỗi 4 bước (theo slide 14: cột 5.9in | 7.3in | 3.5in) */
  .capella{display:grid;grid-template-columns:5.9fr 7.3fr 3.5fr;column-gap:var(--gg);grid-template-rows:auto auto auto;align-items:start}
  .capella .qwrap{grid-column:1;grid-row:1;padding-right:32px}
  .capella .quote{margin-top:0}
  .capella .quote::before{font-size:44px;height:30px}
  .tl{display:contents;margin:0}
  .tl li{padding:0;display:flex;flex-direction:column}
  .tl li::before,.tl li::after{display:none}
  .tl li .ims{order:-1;margin:0 0 8px}
  .tl .s1{grid-column:1;grid-row:2;margin-top:16px}
  .tl .s2{grid-column:1;grid-row:3;margin-top:16px}
  .tl .s3{grid-column:2;grid-row:1/4;padding-left:64px}
  .tl .s4{grid-column:3;grid-row:1/4}
  .tl .s1 .ph{aspect-ratio:5.9/2.75}
  .tl .s3 .ph{aspect-ratio:7.3/5}
  .tl .s4 .ims{grid-template-columns:1fr 1fr;gap:calc(var(--gg) / 2)}
  .tl .s4 .ims .wide .ph{aspect-ratio:3.5/3.1}
  .tl .s4 .ims .ph{aspect-ratio:1.7/1.6}
  .tl .h{font-size:var(--f-label)}
  .tl .b{font-size:var(--f-cap);margin-top:4px;line-height:1.5}

  /* case 04: atelier (slide 17: ảnh lớn 11.9in + 2 ảnh 5.8in, hàng 4 ảnh 4.28in) */
  .atelier .track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gg)}
  .atelier .it{min-width:0}
  .atelier .it .ph{height:auto;width:100%}
  .atelier .it figcaption{max-width:none}
  .atelier .it:nth-child(1){grid-column:1/4;grid-row:1/3;display:flex;flex-direction:column}
  .atelier .it:nth-child(1) .ph{flex:1;aspect-ratio:auto;min-height:0}
  .atelier .it:nth-child(2){grid-column:4;grid-row:1}
  .atelier .it:nth-child(3){grid-column:4;grid-row:2}
  .atelier .it:nth-child(2) .ph,.atelier .it:nth-child(3) .ph{aspect-ratio:5.8/2.5}
  .atelier .it:nth-child(n+4){grid-row:3}
  .atelier .it:nth-child(n+4) .ph{aspect-ratio:4.28/2.3}

  /* case 05: trước/sau + trích dẫn, bento 5 ảnh */
  .ba{grid-template-columns:5.3fr 5.3fr 6fr;column-gap:var(--gg);margin:0;padding:var(--sec) var(--cx) calc(var(--sec) * .5)}
  .ba .qcol{padding-left:64px;display:flex;flex-direction:column;justify-content:center}
  .ba .quote{margin-top:0}
  .ba .quote::before{font-size:72px;height:42px}
  .ba .head{margin-bottom:40px}
  .ba .head h3{font-weight:400;color:var(--ink);font-size:var(--f-case);line-height:1.3;margin-top:calc(var(--in) * .06)}

  .ph img{object-position:var(--posd,50% 50%)}
  .posters .it figcaption.cap{font-size:max(12px,calc(12.5 * var(--p)))}
  /* hai hình thức hợp tác */
  .coop{padding-block:var(--sec)}
  .coop .ttl{font-size:var(--f-h2)}
  .cards{grid-template-columns:1fr 1fr;column-gap:var(--in);margin-top:48px}
  .card .ph{aspect-ratio:8.5/3.3}
  .card .lbl{margin-top:24px}
  .card h3,.card h2{font-size:max(22px,calc(26 * var(--p)));margin-top:12px}
  .card .sub{margin-top:8px}
  .card .p{margin-top:20px;max-width:68ch}
  .card .fit{margin-top:24px}

  /* bước đầu tiên: ảnh trái 8.2in */
  .steps{display:grid;grid-template-columns:calc(var(--in) * 8.2) 1fr;min-height:min(100vh,calc(var(--in) * 11.25));padding:0}
  .steps .txt{align-self:center}
  .steps .media .ph{aspect-ratio:auto;height:100%;border-radius:0}
  .steps .txt{margin:0;padding:var(--sec) var(--cx) calc(var(--sec) * .8) 88px}
  .steps .ttl{font-size:var(--f-h2)}
  .steps .sub{font-size:max(16px,calc(18 * var(--p)))}
  .list4{border-top:0;margin-top:48px}
  .list4 li{grid-template-columns:calc(var(--in) * 1.4) 1fr;border-bottom:0;padding:0 0 32px}
  .list4 .n{font-size:max(24px,calc(28 * var(--p)))}
  .list4 h3{font-size:max(16px,calc(18 * var(--p)))}

  /* liên hệ hợp tác: hai cột */
  .contact{padding:0;display:flex;flex-direction:column}
  .cwrap{flex:1;display:grid;grid-template-columns:1fr minmax(440px,calc(var(--in) * 8.6));column-gap:88px;padding:var(--sec) var(--cx);align-items:center}
  .contact h2{font-size:max(44px,calc(56 * var(--p)))}
  .contact .closing{font-size:max(19px,calc(22 * var(--p)));margin-top:32px}
  .clist{margin-top:64px;max-width:calc(var(--in) * 9)}
  .formbox{margin:0;padding:32px 40px;border-radius:var(--radius);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
  .fgrid{grid-template-columns:1fr 1fr;column-gap:16px;row-gap:20px}
  .fld{grid-column:1/-1}
  .fld.half{grid-column:auto}
  .inp{min-height:48px;padding:11px 16px}   /* M3 mật độ -2 cho desktop */
  .submit{width:100%;margin-top:24px;min-height:52px}
}
@media (min-width:1024px) and (hover:hover){
  .opener .ph img,.card .ph img{transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
  .card:hover .ph img{transform:scale(1.015)}
}
/* ≥640 và <1024: khung đọc rộng hơn nhưng vẫn bố cục điện thoại */
@media (min-width:640px) and (max-width:1023.98px){
  .stats{grid-template-columns:repeat(3,1fr)}
  .four{grid-template-columns:1fr 1fr;column-gap:32px}
  .partners{grid-template-columns:1fr 1fr;gap:32px}
  .cards{grid-template-columns:1fr 1fr;gap:32px}
  .ba{grid-template-columns:1fr 1fr}
  .ba .qcol{grid-column:1/-1}
  .formbox{margin-inline:0;border-radius:var(--radius)}
  .fgrid{grid-template-columns:1fr 1fr;column-gap:16px}
  .fld{grid-column:1/-1}.fld.half{grid-column:auto}
  .static-grid{grid-template-columns:repeat(3,1fr)}
}
/* ======================================================================
   ĐIỆN THOẠI & TABLET <1024px · nhịp khoảng cách theo bước 8px (tham khảo HBA, wb-venue-proposal)
   label → tiêu đề 16 · tiêu đề → đoạn 24 · đoạn → đoạn 16 · khối → khối 40–48 · mép mục 80
   Hạn chế đường kẻ: tách nội dung bằng khoảng trắng; chỉ giữ đường kẻ ở khối liên hệ và chân trang.
   ====================================================================== */
@media (max-width:1023.98px){
  .ttl{line-height:1.3}
  .lbl + .ttl,.lbl + h2{margin-top:16px}
  .p + .p{margin-top:16px}
  .hdr .btn-cta{min-height:44px;padding:0 18px}
  .burger{width:48px;height:48px}
  .fab .up{width:48px;height:48px}

  /* 2 · quan điểm */
  .view .ttl{margin-top:16px;font-size:var(--f-big);line-height:1.42}
  .view .rule{margin:28px 0 24px}

  /* 3 · về weddingbook */
  .about .txt{margin-top:40px;padding-bottom:var(--sec)}
  .about .body{margin-top:24px}
  .stats{margin-top:40px;gap:28px}
  .stat{border-top:0;padding-top:0}
  .stat span{margin-top:8px}
  .markets{margin-top:32px}

  /* 4 · vì sao chọn: khối chữ lớn xếp dọc, không khung, không đường kẻ */
  .four{margin-top:40px;gap:40px}
  .four li,.four li:last-child,.four li:nth-last-child(2){border:0;padding:0}
  .four .num{font-size:14px;letter-spacing:.08em}
  .four h3{font-size:22px;line-height:1.36;margin-top:12px}
  .four p{font-size:17px;line-height:1.65;margin-top:12px}
  /* đối tác: thẻ gọn, xem trước 6 tên, nút "Xem tất cả" có mũi tên (khác kiểu accordion ở trang 5) */
  .partners{margin-top:56px;gap:16px}
  .pcard{background:#FAFAF8;border-radius:12px;padding:22px 20px 0;box-shadow:0 1px 2px rgba(15,15,13,.05)}
  .pcard .lbl{color:var(--label);font-size:12px}
  .pcard ul{position:relative;margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;font-size:12px;letter-spacing:.1em;line-height:1.45;color:var(--body)}
  .pcard li{white-space:normal}
  .pcard li:not(:last-child)::after{content:none}
  .pcard:not(.open) li:nth-child(n+7){display:none}
  .pcard:not(.open) ul::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:30px;background:linear-gradient(rgba(250,250,248,0),#FAFAF8);pointer-events:none}
  .more{display:flex;align-items:center;justify-content:center;gap:10px;width:calc(100% + 40px);margin:16px -20px 0;min-height:52px;border:0;border-top:1px solid var(--line);border-radius:0 0 12px 12px;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .more:active{background:rgba(15,15,13,.04)}
  .more i{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)}
  .pcard.open .more i{transform:translateY(2px) rotate(-135deg)}

  /* 5 · bảy mảng năng lực: accordion kiểu danh sách (dấu + / −), không đánh số */
  .cap7 .intro .p{margin-top:24px}
  .rows{margin-top:32px;display:block}
  .rows li{display:block;padding:0;border-bottom:1px solid var(--line)}
  .rows li:last-child{border-bottom:0}
  .rows .n{display:none}
  .rows h3{font-size:19px;line-height:1.35}
  .acc-h{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:18px 4px 18px 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .acc-h:active{background:rgba(15,15,13,.03)}
  .acc-h:focus-visible{outline-offset:-2px}
  .pm{position:relative;flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:1px solid rgba(15,15,13,.22);transition:background-color .2s,border-color .2s}
  .pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;background:var(--ink);transition:transform .3s var(--ease)}
  .pm::after{transform:rotate(90deg)}
  .acc.open .pm{background:var(--ink);border-color:var(--ink)}
  .acc.open .pm::before,.acc.open .pm::after{background:#fff}
  .acc.open .pm::after{transform:rotate(0deg)}
  .acc-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
  .acc-p > div{overflow:hidden;min-height:0}
  .acc-p p{margin:0;padding:0 44px 22px 0}
  .acc.open .acc-p{grid-template-rows:1fr}

  /* dự án */
  .case{padding:0 0 calc(var(--sec) + 8px)}
  .case + .case{border-top:0}
  .ph img{object-position:var(--pos,50% 50%)}
  .opener .ph.pc{aspect-ratio:4/5}
  .opener .meta{margin-top:28px}
  .opener .kicker{display:block}
  .opener h2{font-size:28px;line-height:1.3;margin-top:12px}
  .opener .cc{margin-top:8px}
  /* thứ tự cố định cho cả 5 dự án (feedback mobile 6.1): ảnh → nhãn → tên → giới thiệu → thông tin → trích dẫn → bộ ảnh */
  .brief{margin-top:24px}
  .brief .lead{margin-top:0;font-size:20px;line-height:1.45}
  .blocks{margin-top:28px;gap:28px}
  .blocks p{margin-top:8px}
  .gwrap{margin-top:40px}
  .gal{margin-top:0}
  .mgal{margin-top:40px}
  .mfacts{margin-top:40px}
  /* bảng thông tin dự án: đường kẻ mảnh giữa các dòng (như HBA) */
  .facts{margin-top:0;border-top:1px solid var(--line);display:block}
  .facts div{grid-template-columns:112px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
  .facts dt{padding-top:3px}
  .facts dd{font-size:16px}
  .mquote{margin-top:48px}
  .mquote .quote{margin-top:0}

  /* carousel: cùng chiều cao, ảnh giữ tỉ lệ gốc, lộ ảnh kế tiếp */
  .car .track{gap:var(--gg);padding-bottom:0}
  .car.vw .it{width:var(--w)}
  .car.vw .it .ph{height:var(--h);width:100%;aspect-ratio:auto}
  .car .it figcaption{margin-top:12px;padding-right:8px}
  .car .it figcaption.cap{font-size:13px;font-weight:400;line-height:1.55;color:var(--caption);letter-spacing:0}
  .car .it b{font-size:14px;font-weight:500;line-height:1.5}
  .car .it small{font-size:12px;letter-spacing:.14em;margin-top:4px;line-height:1.5}
  .car .it b + small{margin-top:4px}
  .car .it small .n{color:var(--gold);margin-right:.6em}
  .car .it .cb{display:block;margin-top:6px;font-size:13px;line-height:1.55;color:var(--caption)}
  .tslide{height:var(--h);display:flex;align-items:flex-end;padding:24px;background:rgba(15,15,13,.045)}
  .tslide p{font-size:20px;line-height:1.45;color:var(--ink);text-wrap:balance}
  .tri{display:grid;grid-template-columns:1.12fr .88fr;grid-template-rows:1fr 1fr;gap:var(--gg);height:var(--h)}
  .tri > div{min-height:0}
  .tri .c0{grid-row:1/3}
  .tri .ph{height:100%;aspect-ratio:auto}

  /* 22 · hai hình thức hợp tác */
  .cards{gap:56px;margin-top:40px}
  .card .ph{border-radius:4px;aspect-ratio:4/5}
  .card .lbl{margin-top:24px}
  .card h3,.card h2{font-size:22px;margin-top:8px}
  .card .sub{font-size:16px;margin-top:8px}
  .card .p{margin-top:16px}
  .card .fit{margin-top:24px}
  .card .fit p{margin-top:8px}

  /* 23 · bước đầu tiên */
  .steps .txt{margin-top:40px;padding-bottom:var(--sec)}
  .steps .ttl{margin-top:16px}
  .steps .sub{margin-top:12px}
  .list4{margin-top:32px;border:0;display:grid;gap:24px}
  .list4 li{padding:0;border:0;gap:4px 12px}
  .list4 .n{font-size:28px}
  .list4 h3{font-size:20px}
  .list4 p{font-size:16px}
  .steps .rule{margin:32px 0 24px}

  /* 24 · liên hệ hợp tác */
  .contact{padding-top:0}
  .contact h2{font-size:34px}
  .clist{border-top:0;gap:8px}
  /* nhãn đặt trên giá trị: email, địa chỉ dài không bị ngắt giữa chữ (feedback mobile 9.1) */
  .clist div{display:block;border:0;padding:0}
  .clist dt{margin-bottom:0}
  .clist dd{font-size:16px}
  .clist a{min-height:44px;overflow-wrap:normal}
  .clist div:last-child dd{padding-top:6px}
  .btn-zalo{margin-top:24px;min-height:52px}
  .contact .cwrap{padding-bottom:0}
  .contact .closing{margin-top:24px}
  .clist{margin-top:32px;gap:16px}
  .formbox{margin-top:48px;padding:40px var(--gx) 48px}
}
@media (min-width:640px) and (max-width:1023.98px){
  /* tablet: ảnh dọc không cao quá một màn hình */
  .about .media .ph,.opener .ph.pc{aspect-ratio:1/1}
  .opener .ph:not(.pc){max-height:80vh;width:100%}
  .four{grid-template-columns:1fr 1fr;column-gap:40px}
  .partners ul{grid-template-columns:repeat(3,1fr)}
}

/* ======================================================================
   12/10 (vòng 2) · TRANG CHỦ TÓM TẮT DỰ ÁN (kiểu HBA) · TRANG DỰ ÁN RIÊNG · FAQ
   Mỗi khối chỉ dựng một lần trong code: desktop xếp lưới, điện thoại xếp dọc / carousel bằng CSS.
   ====================================================================== */
.oimg{display:block}
.opener h2 a{color:inherit;text-decoration:none}
.opener h2 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.sumlead{margin-top:16px;font-size:var(--f-body);line-height:1.6;color:var(--body);text-wrap:pretty}
.mini{margin-top:24px;border-top:1px solid var(--line)}
.mini div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.mini dt{font-size:var(--f-meta);font-weight:600;letter-spacing:.12em;color:var(--label);padding-top:3px;line-height:1.5}
.mini dd{font-size:15px;color:var(--ink);line-height:1.5}
.mini dd br,.sumlead br{display:none}
.btn-more{display:inline-flex;align-items:center;justify-content:center;gap:10px;align-self:flex-start;min-height:48px;margin-top:28px;padding:0 24px;border:1px solid var(--ink);border-radius:999px;color:var(--ink);font-size:15px;font-weight:500;text-decoration:none;transition:background-color .2s,color .2s}
.btn-more svg{width:16px;height:16px}
@media (hover:hover){.btn-more:hover{background:var(--ink);color:#fff}}
.opener h1{font-weight:400;color:var(--ink);font-size:32px;line-height:1.25;margin-top:12px;text-wrap:balance;letter-spacing:-.005em}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;font-size:13px;line-height:1.5;color:var(--caption)}
.crumbs li+li::before{content:"/";margin:0 8px;color:#B9B3AA}
.crumbs a{display:inline-flex;align-items:center;min-height:32px;color:var(--body);text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current]{color:var(--caption)}
.ppage main{padding-top:var(--hdr)}

/* bộ ảnh dự án: chung điện thoại */
.gal .qcol .quote,.gal .qwrap .quote{margin-top:0}
.capella .tl .h{font-size:var(--f-label);font-weight:600;letter-spacing:.16em;color:var(--label)}
.capella .tl .h .n{color:var(--gold-t);margin-right:.6em}

/* liên quan */
.related .ttl{margin-top:14px}
.rcard a{display:block;color:inherit;text-decoration:none}
.rcard .ph{aspect-ratio:4/3}
.rcard .lbl{display:block;margin-top:16px}
.rcard h3{font-weight:400;color:var(--ink);font-size:19px;line-height:1.35;margin-top:6px}
@media (hover:hover){.rcard a:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}}

/* dải kêu gọi cuối trang dự án */
.cta-band{color:var(--on-dark-2)}
.cta-band h2{font-weight:400;color:#fff;font-size:34px;line-height:1.25;letter-spacing:-.01em}
.cta-band .closing{margin-top:24px;font-size:var(--f-lead);line-height:1.55;color:#fff}
.cta-band .cr{margin-top:32px;display:flex;flex-direction:column;align-items:flex-start}
.btn-gold{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;background:var(--gold-l);color:var(--ink);font-size:16px;font-weight:600;text-decoration:none;transition:background-color .2s}
.btn-gold svg{width:16px;height:16px}
@media (hover:hover){.btn-gold:hover{background:#C29A55}}
.cta-band .btn-zalo{margin-top:16px}
.clines{margin-top:24px;display:flex;flex-wrap:wrap;gap:4px 24px}
.clines a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:#fff;text-decoration:none;font-size:15px;text-underline-offset:4px}
.clines a:hover{color:var(--gold-d);text-decoration:underline}
.clines svg{width:12px;height:12px;opacity:.75}

/* hỏi đáp */
.faq .ttl{margin-top:16px}
.qas{margin-top:32px}
.qa{border-bottom:1px solid var(--line)}
.qa:last-child{border-bottom:0}
.qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:18px 4px 18px 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.qa summary::-webkit-details-marker{display:none}
.qa summary:focus-visible{outline-offset:-2px}
.qa summary h3{font-weight:400;color:var(--ink);font-size:19px;line-height:1.4}
.faq .pm{display:block;position:relative;flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:1px solid rgba(15,15,13,.22);transition:background-color .2s,border-color .2s}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;background:var(--ink);transition:transform .3s var(--ease)}
.faq .pm::after{transform:rotate(90deg)}
.qa[open] .pm{background:var(--ink);border-color:var(--ink)}
.qa[open] .pm::before,.qa[open] .pm::after{background:#fff}
.qa[open] .pm::after{transform:rotate(0deg)}
@media (hover:hover){.qa summary:hover .pm{border-color:var(--ink)}}
.qa .ans .p{padding:0 44px 24px 0}
mark.todo{background:#FFF1B8;color:var(--ink);padding:0 4px;border-radius:2px;outline:1px dashed #C9A227}

@media (max-width:1023.98px){
  /* dòng dịch vụ: một dòng nhãn "DỊCH VỤ · VISUAL MERCHANDISING" */
  .opener .svc{margin:0;font-size:var(--f-label);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--label);line-height:1.5}
  .opener .svc .lbl,.opener .svc .s{display:inline;font-size:inherit;color:inherit;margin:0;letter-spacing:inherit;line-height:inherit}
  .opener .svc .s::before{content:"  ·  ";white-space:pre}
  .opener .svc br{display:none}
  .csum .btn-more{width:100%}
  .pcase .crumbs{margin-bottom:16px}
  .pcase{padding-bottom:var(--sec)}
  .pcase .brief{margin-top:28px}
  .brief .facts{margin-top:40px}
  .gal .qcol,.gal .qwrap{margin-bottom:40px}
  /* Capella: chuỗi 4 bước thành carousel (tên bước chỉ hiện trên desktop) */
  .capella .tl{margin:0}
  .capella .tl li{padding:0}
  .capella .tl li::before,.capella .tl li::after{display:none}
  .capella .tl .h{display:none}
  .capella .tl .b{margin-top:12px;padding-right:8px;font-size:13px;line-height:1.55;color:var(--caption)}
  .capella .tl .ims{display:block;margin:0}
  .capella .tl .ims:not(.tri) .ph{height:var(--h);width:100%;aspect-ratio:auto}
  .capella .tl .ims.tri{display:grid}
  .capella .tl .txt .b{height:var(--h);margin:0;display:flex;align-items:flex-end;padding:24px;background:rgba(15,15,13,.045);font-size:20px;line-height:1.45;color:var(--ink);text-wrap:balance}
  .related .car{margin-top:32px}
  .related .it{width:min(70vw,360px)}
  .cta-band .cwrap{padding-block:var(--sec)}
  .cta-band .btn-gold,.cta-band .btn-zalo{width:100%}
}
@media (min-width:1024px){
  .csum{padding-block:clamp(40px,4vw,64px)}
  .csum .oimg{height:100%;position:relative}
  .csum .meta .svc{margin-bottom:0}
  .csum .opener h2{margin-top:16px}
  .opener h1{font-size:clamp(34px,calc(44 * var(--p)),48px);margin-top:16px}
  .ppage .opener{height:clamp(520px,calc(100vh - var(--hdr)),calc(var(--vw) * .54))}
  .pcase .meta .crumbs{margin-bottom:auto;padding-bottom:24px}
  /* bộ ảnh: track hòa vào lưới */
  .collage .car,.collage .track,.chapel .car,.chapel .track,.capella .car,.capella .tl.track{display:contents}
  .collage{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gg)}
  .collage .m0{grid-column:1/4;grid-row:1}
  .collage .m0 .ph{aspect-ratio:var(--ar)}
  .collage .qcol{grid-column:4/6;grid-row:1;padding-left:40px}
  .collage .quote::before{font-size:72px;height:42px}
  .collage .it:not(.m0){grid-row:2}
  .collage .it:not(.m0) .ph{aspect-ratio:904/546}
  .chapel{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));column-gap:0;row-gap:var(--gg);grid-template-rows:auto calc(var(--sec) * .5 - var(--gg) * 2) calc(var(--in) * 4.2) calc(var(--in) * 4.2)}
  .chapel .it{min-width:0;display:flex;flex-direction:column}
  .chapel .bf .ph{aspect-ratio:742/1246}
  .chapel .it[data-i="0"]{grid-column:1/7;grid-row:1;margin-right:var(--gg)}
  .chapel .it[data-i="1"]{grid-column:7/13;grid-row:1;margin-right:var(--gg)}
  .chapel .qcol{grid-column:13/21;grid-row:1;padding-left:64px;display:flex;flex-direction:column;justify-content:center}
  .chapel .quote::before{font-size:72px;height:42px}
  .chapel .b1{grid-column:1/7;grid-row:3/5;margin-right:var(--gg)}
  .chapel .b2{grid-column:7/15;grid-row:3;margin-right:var(--gg)}
  .chapel .b3{grid-column:7/15;grid-row:4;margin-right:var(--gg)}
  .chapel .b4{grid-column:15/21;grid-row:3}
  .chapel .b5{grid-column:15/21;grid-row:4}
  .chapel [class*=" b"] .ph{flex:1;height:100%;aspect-ratio:auto;min-height:0}
  .related .car{margin-top:40px}
  .related .track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;overflow:visible}
  .related .it{width:auto}
  .cta-band .cwrap{display:grid;grid-template-columns:1fr auto;column-gap:88px;align-items:end;padding:var(--sec) var(--cx)}
  .cta-band h2{font-size:max(40px,calc(52 * var(--p)))}
  .cta-band .cr{margin-top:0}
  .faq{display:grid;grid-template-columns:calc(var(--in) * 5.9) 1fr;column-gap:48px;padding-block:var(--sec);align-items:start}
  .faq .ttl{font-size:var(--f-h2)}
  .qas{margin-top:0}
  .qa:first-child summary{padding-top:0;min-height:0}
  .qa summary h3{font-size:max(18px,calc(20 * var(--p)))}
  .qa .ans .p{max-width:72ch}
}
/* ===== 12/10 vòng 3: bản tiếng Anh (/en/), nút đổi ngôn ngữ, Theo dõi ở chân trang ===== */
html[lang="en"] .hero h1 .g{white-space:normal}
@media (max-width:639.98px){html[lang="en"] .hero h1{font-size:min(var(--f-hero),8.6vw)}}   /* EN: "Venue development" giữ trên một dòng, tiêu đề 2 dòng như bản VI */
/* Nút ngôn ngữ (13/10, tham khảo weddingbookatelier.com): desktop ở góc phải ngoài cùng, sau nút liên hệ; điện thoại ở cuối menu, góc phải */
.lsw{display:none;position:relative}
.lsw summary{list-style:none;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 2px;cursor:pointer;font-size:14px;font-weight:500;letter-spacing:.04em;user-select:none}
.lsw summary::-webkit-details-marker{display:none}
.lsw summary svg{width:12px;height:12px;transition:transform .2s}
.lsw summary svg.gl{width:16px;height:16px;margin-right:2px;opacity:.85}
.lsw[open] summary svg:not(.gl){transform:rotate(180deg)}
.lsw-m{position:absolute;right:-12px;top:calc(100% + 8px);min-width:96px;padding:6px 0;background:#181818;color:#fff;box-shadow:0 12px 32px rgba(0,0,0,.18);z-index:5}
.lsw-m a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;font-size:14px;text-decoration:none;color:var(--on-dark-2)}
.lsw-m b{font-weight:600;font-size:12px;letter-spacing:.14em}
.lsw-m a[aria-current]{color:#fff}
.lsw-m a[aria-current] b{color:var(--gold-d)}
@media (hover:hover){.lsw-m a:hover{color:#fff;background:rgba(255,255,255,.06)}}
.hdr.pvh .lsw{display:block}
.drawer .dlangs{margin-top:auto;align-self:flex-end;display:flex;gap:2px}
.drawer .dlangs a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-size:14px;font-weight:600;letter-spacing:.1em;text-decoration:none;color:var(--on-dark-2);opacity:.55}
.drawer .dlangs a[aria-current]{opacity:1;color:#fff;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--gold-d)}
/* tách nút ngôn ngữ khỏi menu: vạch dọc mảnh + biểu tượng quả địa cầu */
@media (min-width:1024px){.hdr .lsw{display:flex;align-items:center;margin-left:22px}.hdr .lsw::before{content:"";width:1px;height:20px;margin-right:20px;background:currentColor;opacity:.3}}

/* Chân trang tối giản (13/10 vòng 7, mẫu Divi): nền đen đặc khác hẳn nền nội dung · WEDDINGBOOK · Địa chỉ | Email | Theo dõi · bản quyền */
.foot{background:#0B0B0A;color:#ABA59C;padding:56px var(--gx) calc(20px + env(safe-area-inset-bottom));font-size:14px;line-height:1.6}
.foot a{color:inherit;text-decoration:none;transition:color .2s}
.foot a:hover{color:#fff}
.fwm{display:inline-flex;align-items:center;min-height:44px;font-weight:600;letter-spacing:.08em;font-size:20px;color:#fff!important}
.fg{display:grid;gap:28px;margin-top:28px}
.fh{font-size:13px;font-weight:600;color:#fff;margin-bottom:6px}
.fv{color:#ABA59C}
.fv a{text-underline-offset:3px}
.fv a:hover{text-decoration:underline}
.fsoc{display:flex;gap:10px;margin-top:2px}
.foot .si{width:44px;height:44px;border:1px solid rgba(255,255,255,.22);border-radius:50%;display:grid;place-items:center;color:#fff;text-decoration:none!important}
.foot .si svg{width:18px;height:18px}
.foot .si:hover{background:#fff;color:#0B0B0A}
.fbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 24px;margin-top:44px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);font-size:12px}
.fbar a{display:inline-flex;align-items:center;min-height:40px}
@media (min-width:640px){.fg{grid-template-columns:1.5fr 1.2fr 1fr;column-gap:32px}}
@media (min-width:1024px){
  .foot{padding:88px var(--cx) 28px}
  .fwm{font-size:24px}
  .fg{margin-top:40px;grid-template-columns:2fr 1.5fr 1fr;column-gap:40px}
  .fbar{margin-top:72px}
}

/* Dải liên hệ cuối trang dự án / Services: nền sáng tông phụ để chân trang đen tách bạch */
.cta-band.paper{color:var(--body)}
.cta-band.paper h2{color:var(--ink)}
.cta-band.paper .closing{color:var(--ink)}

/* Liên hệ hợp tác 2 panel (13/10 vòng 7): trái ảnh + lớp đen (tiêu đề, địa chỉ, email); phải form trên nền sáng */
.contact.csplit{padding:0;display:block;background:var(--paper);color:var(--body)}
.cpan{position:relative;overflow:hidden;color:var(--on-dark-2);padding:56px var(--gx) 48px;background:var(--dark)}
.cpan .cimg{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.cpan .cimg picture{position:absolute;inset:0}
.cpan::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,10,.72),rgba(11,11,10,.62))}
.cpan-in{position:relative;z-index:1}
.cpan h2,.cpan h1{font-weight:400;color:#fff;font-size:calc(var(--f-h2) + 10px);line-height:1.2;letter-spacing:-.01em}
.cpan .clist{margin-top:32px}
.cpan .clist dd a{color:#fff}
.csplit .formbox{margin:0;background:transparent;box-shadow:none;border-radius:0;padding:40px var(--gx) 56px}
.csplit .fgrid{margin-top:0}
textarea.inp{min-height:148px;resize:vertical;line-height:1.55}
.fend{display:flex;flex-direction:column-reverse;gap:14px;margin-top:28px}
.fend .submit{margin-top:0}
.fend .consent{margin-top:0}
.csplit .thanks{color:var(--ink)}
@media (min-width:1024px){
  .contact.csplit{display:grid;grid-template-columns:1fr 1fr;min-height:max(640px,calc(100svh - var(--hdr)))}
  .cpan{padding:calc(var(--sec) * .8) 56px var(--sec) var(--cx)}
  .cpan h2,.cpan h1{font-size:max(44px,calc(56 * var(--p)))}
  .cpan .clist{margin-top:48px;max-width:none}
  .csplit .formbox{padding:calc(var(--sec) * .8) var(--cx) var(--sec) 56px;align-self:stretch}
  .fend{flex-direction:row;align-items:center;justify-content:space-between;gap:32px}
  .fend .consent{max-width:26em}
  .fend .submit{width:auto;min-width:220px;padding:0 36px;flex:0 0 auto}
}

/* Hỏi đáp 4 câu trên trang chủ */
.fhome .fmore{margin-top:28px}
/* 13/10: trang Services */
.svcp .crumbs{margin-bottom:28px}
@media (min-width:1024px){.svcp .crumbs{margin-bottom:40px}}
/* 13/10: căn lưới ngang trên desktop. Tiêu đề lớn ngang cạnh trên của nội dung cột phải
   (dòng năng lực đầu tiên, câu hỏi đầu tiên, ô form, nút chính). Nhãn nhỏ đứng riêng một hàng phía trên. */
@media (min-width:1024px){
  .cap7,.faq{grid-template-rows:auto auto 1fr;align-items:start}
  .cap7 .intro,.faq .intro{display:contents}
  .cap7 .intro .lbl,.faq .intro .lbl{grid-column:1;grid-row:1}
  .cap7 .ttl,.faq .ttl{grid-column:1;grid-row:2;margin-top:16px}
  .cap7 .intro .p{grid-column:1;grid-row:3}
  .cap7 .rows{grid-column:2;grid-row:2/span 2;margin-top:16px}
  .faq .qas{grid-column:2;grid-row:2/span 2;margin-top:16px}
  .cwrap,.cta-band .cwrap{align-items:start}
}
/* ======================================================================
   13/10 vòng 9 · UIUX feedback_2 + ý kiến Chau
   P0: Quan điểm thành câu tuyên ngôn · tách bạch Quan điểm / Về chúng tôi / Vì sao / Năng lực / Dự án
       · cụm ảnh trái + chữ phải nằm trong cùng khung, tỉ lệ 60:40
   Khoảng cách theo bước 8px: trong mục 8–16–24–32–48–64 · giữa các mục 96–112 (desktop), 64–72 (điện thoại)
   ====================================================================== */
/* đầu mục thống nhất (13/10 vòng 10): nhãn có chấm vàng nhỏ phía trước, không dùng đường kẻ hết khung.
   Ranh giới giữa các mục do khoảng trắng, dải nền ấm và cỡ chữ đảm nhận.
   Quy tắc đường kẻ toàn site: chỉ dùng khi có chức năng (danh sách Năng lực, Hỏi đáp dạng mở/đóng, bảng thông tin dự án, ô nhập, chân trang) */
.eb{display:flex;align-items:center;gap:10px}
.eb::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--gold-l)}
.clist,.clist div{border:0}
.clist{gap:16px}
.clist div{padding:0}
.mini,.mini div{border:0}
.mini{display:grid;gap:12px}
.mini div{padding:0}
/* Vì sao chọn dùng nền ấm .tb (paper-2): dải dừng giữa các mục chữ */
.phead{padding-top:var(--sec);padding-bottom:24px}
.phead h2.lbl{margin:0}
/* Quan điểm: câu tuyên ngôn */
.view .stmt{margin-top:24px;font-size:26px;line-height:1.36;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
.view .vfoot{margin-top:32px}
.view .vfoot .p{max-width:34em}
/* tên năng lực / lý do nổi hơn mô tả */
.rows h3,.four h3{font-weight:500;letter-spacing:-.005em}
.rows .n,.four .num{color:var(--gold-t)}
@media (max-width:1023.98px){
  .lbl.eb + .ttl,.lbl.eb + h2{margin-top:24px}
  .view .stmt{margin-top:24px}
  .about .txt{margin-top:48px}
  .phead{padding-bottom:24px}
}
@media (min-width:640px) and (max-width:1023.98px){.view .stmt{font-size:34px}}
@media (min-width:1024px){
  :root{--sec:96px;--sec-x:112px}
  .partners{border-top:0;padding-top:0;margin-top:64px}
  .eb + .ttl{margin-top:24px}
  .about .ttl,.why .ttl{margin-top:24px}
  /* Quan điểm */
  .view{padding-block:var(--sec-x)}
  .view .stmt{margin-top:48px;font-size:clamp(36px,calc(50 * var(--p)),54px);line-height:1.3;letter-spacing:-.015em;max-width:22em;text-wrap:balance}
  .view .vfoot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:64px}
  .view .vfoot .p{grid-column:7/13;max-width:36em;margin:0}
  /* Năng lực: nhãn + đường kẻ trải hết hai cột */
  .cap7 .intro .lbl,.faq .intro .lbl{grid-column:1/-1}
  .cap7 .ttl,.faq .ttl{margin-top:24px}
  .cap7 .rows,.faq .qas{margin-top:24px}
  .rows h3{font-size:max(19px,calc(22 * var(--p)));line-height:1.35}
  .rows li{padding:24px 0}
  .rows li:first-child{padding-top:0}
  .rows .n{font-size:12px;padding-top:6px}
  .rows .acc-p{padding-top:4px}
  .rows .acc-p .p{font-size:15px;line-height:1.6}
  .four h3{font-size:max(18px,calc(20 * var(--p)))}
  /* Dự án trên trang chủ: ảnh + chữ trong cùng khung lưới, 60:40, ảnh cùng tỉ lệ 5:4 */
  .phead{padding-bottom:16px}
  .csum{padding:48px var(--cx)}
  .csum .opener{grid-template-columns:minmax(0,11fr) minmax(0,9fr);column-gap:64px;height:auto}
  .csum .oimg{position:relative;height:auto;aspect-ratio:5/4;align-self:stretch}
  .csum .oimg .ph{position:absolute;inset:0;height:100%}
  .csum .opener .meta{padding:0;justify-content:flex-start}
  .csum .sumlead{margin-bottom:40px;max-width:32em}
  .csum .mini{margin-top:auto}
  .csum .btn-more{margin-top:32px}
  /* trang mở dự án: ảnh vẫn tràn (vai trò hero) nhưng cột chữ nới lên ~42% */
  .ppage .opener{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  /* Liên hệ hợp tác (Chau 13/10 11:37): panel ảnh tối thu về 5/12 để giảm khối nặng bên trái, form 7/12;
     section cao theo nội dung; tiêu đề neo mép trên, địa chỉ + email neo mép dưới, thẳng hàng với hàng nút gửi */
  .contact.csplit{grid-template-columns:calc(var(--cx) + (var(--vw) - 2 * var(--cx)) * .4 + 64px) minmax(0,1fr);min-height:0}   /* 13/10 vòng 11: panel tối theo khung nội dung, màn rộng không bị dồn chữ sang phải */
  .cpan{display:flex;flex-direction:column;padding:var(--sec) 64px var(--sec) var(--cx)}
  .cpan-in{flex:1;display:flex;flex-direction:column}
  .cpan .clist{margin-top:auto;padding-top:48px}
  .cpan .clist dd{text-wrap:balance}
  .csplit .formbox{padding:var(--sec) var(--cx) var(--sec) 80px;display:flex;flex-direction:column;justify-content:flex-start}
  .ppage .opener .meta{padding-left:64px}
}
@media (min-width:1280px){
  :root{--sec:112px;--sec-x:128px}
  .csum{padding-block:56px}
  .csum .opener{grid-template-columns:minmax(0,3fr) minmax(0,2fr);column-gap:80px}
}
/* P2 (feedback_2): hover và chuyển động tinh gọn, chỉ trên thiết bị có chuột và khi người dùng không tắt chuyển động.
   Ảnh phóng rất nhẹ, mũi tên nút dịch sang phải, tiêu đề dự án gạch chân khi rê vào ảnh hoặc tên. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .csum .oimg,.rcard .ph{overflow:hidden}
  .csum .oimg img,.rcard .ph img{transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
  .csum .opener:has(.oimg:hover) .oimg img,.rcard a:hover .ph img{transform:scale(1.03)}
  .csum .opener:has(.oimg:hover) h2 a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
  .btn-more svg,.btn-gold svg,.fmore svg{transition:transform .3s var(--ease)}
  .btn-more:hover svg,.btn-gold:hover svg{transform:translateX(3px)}
  .qa summary h3{transition:color .2s}
  .qa summary:hover h3{color:var(--gold-t)}
  .rows li h3{transition:color .2s}
}
/* ======================================================================
   13/10 vòng 11 (Chau 14:12): quy tắc chữ toàn site
   1. Đoạn văn căn đều hai bên (như deck), dòng được lấp đầy rồi mới xuống, không tự cân dòng.
   2. Tiêu đề xuống dòng theo cụm ý đã định trong nội dung; không tự cân dòng (trừ mở đầu và câu tuyên ngôn).
   3. Không tách từ ghép hai âm tiết ra hai dòng (build.py nối bằng khoảng trắng không ngắt); không để chữ lẻ ở dòng cuối.
   ====================================================================== */
.p,.sumlead,.list4 p{text-wrap:wrap}
.ttl,.four h3,.rows h3,.opener h2,.rcard h3,.qa summary h3{text-wrap:wrap}
.sumlead{text-align:justify;text-justify:inter-word}
@media (min-width:1024px){
  /* Quan điểm: đoạn mô tả nằm ngay dưới câu chính, cùng lề trái */
  .view .vfoot{display:block;margin-top:40px}
  .view .vfoot .p{max-width:37em;font-size:max(17px,calc(19 * var(--p)));line-height:1.65;color:var(--body)}
  /* Về chúng tôi: thêm khoảng trống trước 3 cụm số */
  .stats{margin-top:72px}
  /* Vì sao chọn: đường kẻ mảnh tách 4 lợi thế với đối tác; cột rộng hơn, chữ 15px như Năng lực */
  .four{column-gap:48px}
  .four p{font-size:15px;line-height:1.6}
  .partners{border-top:1px solid var(--line);padding-top:40px;margin-top:56px}
  /* Năng lực: mô tả căn đều; tên và mô tả cách nhau rõ; lề phải mô tả = lề phải khung (trùng lề phải cột 04 của Vì sao chọn) */
  .rows .acc-p .p{text-align:justify}
  .rows li{grid-template-columns:48px minmax(0,1fr);row-gap:8px}
  .rows .acc-p{grid-column:2;padding-top:0}
}
@media (min-width:1280px){
  .rows li{grid-template-columns:48px 340px minmax(0,1fr);row-gap:0}
  .rows .acc-p{grid-column:3;padding-left:64px}
}
/* 13/10 vòng 11: trang dự án đồng bộ khung với trang chủ */
@media (min-width:1024px){
  /* 13/10 vòng 12: phần mở trang dự án giữ ảnh tràn mép trái (vai trò hero, như vòng 9), cột chữ ~42% */
  /* phần giới thiệu: câu dẫn trải rộng như câu tuyên ngôn, ba khối Bài toán / Thực hiện / Kết quả thành ba cột căn đều */
  .brief{grid-template-columns:minmax(0,1fr);grid-template-areas:"l" "b" "f";padding-block:var(--sec)}
  .brief .lead{margin-top:0;max-width:24em;font-size:max(24px,calc(30 * var(--p)));line-height:1.4}
  .blocks{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px;margin-top:56px;max-width:none}
  .blocks h2{margin:0}
  .blocks p{margin-top:16px;font-size:15px;line-height:1.65}
  .brief .facts{margin-top:64px}
  /* Capella: ba cụm ảnh cùng mép trên, cùng chiều cao; chữ chú thích bên dưới */
  .capella{--gh:calc((var(--vw) - 2 * var(--cx)) * .3);column-gap:var(--gg);grid-template-rows:auto auto auto}
  .capella .qwrap{grid-column:1/3;grid-row:1;padding:0 0 40px;max-width:36em}
  .tl .s1{grid-row:2;margin-top:0}
  .tl .s2{grid-row:3;margin-top:16px}
  .tl .s3{grid-row:2/4;padding-left:0}
  .tl .s4{grid-row:2/4}
  .tl .s1 .ph,.tl .s3 .ph{aspect-ratio:auto;height:var(--gh)}
  .tl .s4 .ims{grid-template-rows:calc(var(--gh) * .58 - var(--gg) / 4) calc(var(--gh) * .42 - var(--gg) / 4);row-gap:calc(var(--gg) / 2)}
  .tl .s4 .ims .ph,.tl .s4 .ims .wide .ph{aspect-ratio:auto;height:100%}
  .tl .s4 .ims > div{min-height:0}
  /* Atelier: ảnh lớn cùng mép trên với ảnh Khu sản xuất, cùng mép dưới với ảnh Không gian trưng bày váy */
  .atelier .it:nth-child(1) .ph{position:relative}
  .atelier .it:nth-child(1) .ph picture{position:absolute;inset:0}
  /* Dự án khác: tên dự án thẳng hàng dù dòng dịch vụ dài 1 hay 2 dòng */
  .rcard .lbl{min-height:3em}
}
/* Khách sạn & venue đối tác: bỏ dòng chữ "Xem video · Facebook", giữ nút play trên ảnh */
.vsrc{display:none}
/* 13/10 vòng 12: tiêu đề trên điện thoại (<640px) lấp đầy dòng rồi mới xuống; chỉ ngắt cố định ở cuối câu ([n]). Ngắt theo cụm ý chỉ từ 640px. */
@media (max-width:639.98px){.view .stmt,.cta-band .closing,.contact .closing{text-wrap:wrap}}
/* 13/10 vòng 12: thẻ đối tác thu gọn (điện thoại): chỉ hiện tiêu đề nhóm + dấu mở; desktop là tiêu đề tĩnh, danh sách hiện đầy đủ */
.pcard .more.ph-h{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left}
.pcard .more.ph-h .lbl{display:block}
@media (max-width:1023.98px){
  .pcard{padding:0 20px}
  .pcard .more.ph-h{min-height:60px;border-radius:12px;cursor:pointer}
  .pcard .more.ph-h i{flex:0 0 auto;width:8px;height:8px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)}
  .pcard.open .more.ph-h i{transform:translateY(2px) rotate(-135deg)}
  .pcard:not(.open) ul{display:none}
  .pcard ul{margin-top:0;padding-bottom:20px}
  .pcard:not(.open) li:nth-child(n+7){display:block}
  .pcard ul::after{content:none!important}
  .partners{gap:12px}
}
@media (min-width:1024px){
  .pcard .more.ph-h{pointer-events:none;cursor:default}
  .pcard .more.ph-h i{display:none}
}
/* 13/10 vòng 12: trang Chính sách quyền riêng tư cùng khung với các trang khác */
.ppage main.pv{padding-top:calc(var(--hdr) + 48px);padding-bottom:var(--sec)}
.pv .ttl{margin:0}
.pv .upd{margin-top:12px;color:var(--caption);font-size:13px}
.pv-b{margin-top:40px}
.pv-b section + section{margin-top:32px}
.pv-b h2{font-weight:500;color:var(--ink);font-size:18px;line-height:1.4}
.pv-b .p{margin-top:12px;font-size:15px;line-height:1.7}
.pv .back-l{margin-top:48px}
@media (min-width:1024px){
  .pv{display:grid;grid-template-columns:calc(var(--in) * 5.9) minmax(0,1fr);column-gap:48px;align-items:start}
  .ppage main.pv{padding-top:calc(var(--hdr) + var(--sec))}
  .pv-h{position:sticky;top:calc(var(--hdr) + 32px)}
  .pv-b{margin-top:0}
  .pv-b section + section{margin-top:40px}
  .pv-b h2{font-size:max(18px,calc(20 * var(--p)))}
}

/* ===== 13/10 vòng 14 =====
   1) Màn lớn (≥1440px): khung nội dung nở theo màn hình (86% bề rộng, 1296–1720px) thay vì đứng yên ở 1296px;
      chữ tăng nhẹ theo (tối đa ~10% ở 1920px) để tỉ lệ chữ / khung giữ như bản 1440px. (Chau 13/10: màn LG bị chật, bí.)
   2) Toàn site: không dùng balance/pretty (hai chế độ này chủ động xuống dòng sớm). Chữ lấp đầy dòng rồi mới xuống;
      chống chữ lẻ dòng cuối do nbsp ở 2 chữ cuối đảm nhiệm. */
*,*::before,*::after{text-wrap-style:auto!important}
.ttl,.p,.lead,.sub,.facts dd,figcaption,.quote p,.cap,.hero h1,.opener h1,.opener h2,.tslide p,.sumlead,.capella .tl .txt .b,.view .stmt,.cpan .clist dd,.closing{text-wrap:wrap!important}
@media (min-width:1440px){
  :root{
    --cx:max(var(--in),calc((var(--vw) - clamp(1296px,calc(var(--vw) * .86),1720px)) / 2));
    --p:min(calc(1px + (var(--vw) - 1440px) / 4800),1.11px);
    --f-hero:min(calc(72 * var(--p)),84px);
    --f-h2:min(calc(34 * var(--p)),40px);
  }
  .view .stmt{font-size:min(calc(50 * var(--p)),60px)}
  .opener h1{font-size:min(calc(44 * var(--p)),52px)}
}
/* menu Về chúng tôi / Dự án: nhảy thẳng + hiện dần như trang mới (vòng 14) */
html.jmp main{opacity:0}
html.jmp,html.jmp body{scroll-behavior:auto}
@keyframes pgin{from{opacity:0}to{opacity:1}}
main.pgin{animation:pgin .45s var(--ease) both}
/* nút phụ cuối mỗi hình thức hợp tác (vòng 14) */
.svcp .card{display:flex;flex-direction:column}
.svcp .card .fit{margin-bottom:28px}
.svcp .card .svc-cta{margin-top:auto;align-self:flex-start}   /* hai nút cùng hàng dù nội dung hai gói dài ngắn khác nhau */
@media (min-width:1024px){.facts .multi dd span{white-space:nowrap}.facts .multi dd span::after{white-space:normal}}   /* danh sách Phạm vi: xuống dòng giữa các hạng mục, không tách giữa một hạng mục */
@media (max-width:1023.98px){.capella .car.vw .it.txt{width:min(72vw,300px)}}   /* ô chữ Capella trên điện thoại: đủ rộng, không bị cắt chữ ở màn 320px */
@media (min-width:1024px) and (max-width:1279.98px){   /* thông tin dự án ở 1024–1279px: 4 cột đều + Phạm vi một hàng riêng (cột cũ chỉ ~127px, chữ gãy vụn) */
  .facts{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:28px}
  .facts .multi{grid-column:1/-1}
}
@media (max-width:639.98px){.view .stmt{font-size:clamp(22px,7vw,26px)}}   /* màn 320–370px: cụm 2 chữ cuối của câu Quan điểm vẫn vừa một dòng, không để chữ lẻ */
/* ===== 13/10 vòng 15 =====
   1) Màn mở đầu trang chủ (desktop): cao đúng một màn hình. */
@media (min-width:1024px){.hero{min-height:max(560px,100vh);min-height:max(560px,100svh)}}
/* 2) Thông tin dự án (5 mục) bám lưới 3 cột của Bài toán / WEDDINGBOOK thực hiện / Kết quả:
      ≥1280px: 6 cột con cùng khoảng cách 48px, mỗi cột lớn chia đôi → Loại hình | Địa điểm, Quy mô | Thời gian, Phạm vi (cả cột).
      1024–1279px: 3 cột lớn, 2 hàng → Loại hình | Địa điểm | Quy mô, rồi Thời gian | Phạm vi (2 cột). */
@media (min-width:1024px){
  .pcase .facts{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:48px;row-gap:32px}
  .pcase .facts div{padding:0}
  .pcase .facts .multi{grid-column:span 2}
}
@media (min-width:1024px) and (max-width:1279.98px){
  .pcase .facts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* 3) Dải CTA cuối trang + chân trang bám lưới 4 cột của "Các dự án khác" (khoảng cách 24px):
      nút nằm đầu cột 4 (thẳng chữ The Chapel at Saigon), chân trang: Địa chỉ cột 1–2, Email cột 3, Theo dõi cột 4. */
@media (min-width:1024px){
  .cta-band .cwrap{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px}
  .cta-band .cl{grid-column:1 / 4}
  .cta-band .cr{grid-column:4;align-items:flex-start}
  .fg{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px}
  .fg > :first-child{grid-column:span 2}
}
/* ======================================================================
   v12 (14/10) · Visual QA cuối theo "Visual Design Skill" · bản release
   Chỉ chỉnh visual/layout, không đổi nội dung. Mỗi quy tắc thay thế quy tắc cũ cùng chủ đề ở trên.
   ====================================================================== */

/* ---- 1. Quan điểm (desktop): giữ xếp chồng, nới rộng đoạn mô tả theo bề rộng câu tuyên ngôn ---- */
@media (min-width:1024px){
  .view .stmt{max-width:25em}
  .view .vfoot{margin-top:48px;padding-top:32px;position:relative}
  .view .vfoot::before{content:"";position:absolute;left:0;top:0;width:56px;height:1px;background:var(--gold-l)}
  .view .vfoot .p{max-width:min(46em,100%);font-size:max(17px,calc(19 * var(--p)));line-height:1.7}
}

/* ---- 2. Về chúng tôi (desktop): tiêu đề, đoạn văn, số liệu thành một cụm, căn giữa theo chiều cao ảnh ---- */
@media (min-width:1024px){
  .about{grid-template-columns:minmax(0,1fr) minmax(0,.74fr)}
  .about .txt{justify-content:center;padding:var(--sec) 80px var(--sec) var(--cx)}
  .about .body{margin-top:32px;padding-top:0;max-width:40em}
  .stats{margin-top:48px;padding-top:32px;border-top:1px solid var(--line);max-width:40em}
  .about .markets{margin-top:28px}
}
@media (min-width:1440px){.about .txt{padding-right:112px}}

/* ---- 3. Vì sao chọn: 4 cột chỉ khi mỗi cột đủ rộng (≥1600px); 1024–1599px lưới 2 × 2 ---- */
@media (min-width:1024px) and (max-width:1599.98px){
  .four{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(64px,7vw,112px);row-gap:56px;margin-top:64px}
  .four h3{min-height:0}
  .four p{max-width:36em}
}

/* ---- 4. Năng lực + chữ nhỏ ở màn lớn: mô tả, thông tin tăng theo khung (≥1440px) ---- */
@media (min-width:1440px){
  .rows .acc-p .p,.four p{font-size:calc(15 * var(--p))}
  .blocks p{font-size:calc(15 * var(--p))}
  .csum .sumlead{font-size:calc(16 * var(--p))}
  .mini dd{font-size:calc(15 * var(--p))}
  .partners ul{font-size:calc(12 * var(--p))}
}

/* ---- 5. Dự án trên trang chủ: ảnh trái, cụm chữ căn giữa theo ảnh, không còn khoảng trống giữa mô tả và thông tin ---- */
@media (min-width:1024px){
  .csum .opener{align-items:center}
  .csum .opener .meta{justify-content:center;align-self:center}
  .csum .sumlead{margin-bottom:0}
  .csum .mini{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
  .csum .btn-more{margin-top:32px}
}

/* ---- 6. Trang dự án ---- */
/* ảnh mở trang Capella: giữ trọn logo Capella ở mép trái */
.pcase[data-case="capella-gosset-hall"] .opener .ph img{object-position:12% 50%}
@media (max-width:1023.98px){.pcase[data-case="capella-gosset-hall"] .opener .ph img{object-position:0% 50%}}
/* câu dẫn: tự xuống dòng trong khung đọc, không ngắt cứng */
@media (min-width:1024px){.brief .lead{max-width:26em}}
/* Phạm vi: mỗi hạng mục một dòng, không còn dấu "·" treo cuối dòng */
.facts .multi dd span{display:block;white-space:normal}
.facts .multi dd span::after{content:none!important}
@media (min-width:1024px){.facts .multi dd span + span{margin-top:2px}}

/* ---- 7. Liên hệ hợp tác: lớp phủ chuyển dần, ảnh không bị đục; chữ vẫn đủ tương phản ở đầu và cuối panel ---- */
.cpan::after{background:linear-gradient(180deg,rgba(11,11,10,.70) 0%,rgba(11,11,10,.42) 38%,rgba(11,11,10,.46) 62%,rgba(11,11,10,.80) 100%)}

/* ---- 8. Hình thức hợp tác: ảnh thẻ bớt dẹt, nhịp khoảng cách với Hỏi đáp ---- */
@media (min-width:1024px){
  .svcp .card .ph{aspect-ratio:16/10}
  .svcp + .faq{padding-top:calc(var(--sec) * .5)}
}

/* ---- 9. Tablet 640–1023px: khung đọc vừa mắt, dự án ảnh + chữ hai cột, nút kích thước tự nhiên ---- */
@media (min-width:640px) and (max-width:1023.98px){
  .p,.sumlead,.lead,.view .stmt,.contact .closing,.cta-band .closing{max-width:36em}
  .ttl,.opener h2,.opener h1{max-width:22em}
  .csum .btn-more,.cta-band .btn-gold,.cta-band .btn-zalo{width:auto;align-self:flex-start}
  .fend .submit{width:auto;min-width:240px;align-self:flex-start;padding:0 36px}
  .fend{flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:24px}
}
@media (min-width:768px) and (max-width:1023.98px){
  .csum{padding:48px var(--gx)}
  .csum + .csum{padding-top:0}
  .csum .opener{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:40px;align-items:center}
  .csum .opener .meta{margin:0;padding:0}
  .csum .oimg .ph,.csum .oimg .ph.pc{aspect-ratio:4/5}
  .about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
  .about .media{order:2}
  .about .media .ph{aspect-ratio:auto!important;height:100%}
  .about .txt{order:1;margin:0;padding:var(--sec) 40px var(--sec) var(--gx)}
  .stats{grid-template-columns:1fr;gap:24px}
}

/* ---- 10. Điện thoại: cụm không tách dòng (địa chỉ, tên dịch vụ), cột nhãn thông tin dự án gọn hơn ---- */
@media (max-width:1023.98px){
  .facts div{grid-template-columns:96px 1fr}
}

/* ---- 11. bổ sung sau QA vòng 1 ---- */
.csum[data-case="capella-gosset-hall"] .ph img{object-position:0% 50%}
.stat b{white-space:nowrap}
@media (min-width:1024px) and (max-width:1279.98px){
  .about{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
  .about .txt{padding-right:48px}
  .about .ttl br{display:none}
  .stats{gap:24px}
  .stat b{font-size:clamp(28px,3vw,36px)}
}
@media (min-width:768px) and (max-width:1023.98px){
  .about{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
  .about .txt{padding-right:32px}
  .about .ttl br{display:none}
}
@media (min-width:1024px){.fend .consent{max-width:32em}}
.facts dd br,.mini dd br{display:none}
.facts dd span.u,.mini dd span.u{display:inline-block}
/* đoạn được app.js đánh dấu căn trái (không căn đều được mà không hở chữ): luôn thắng các quy tắc căn đều theo khu vực */
.p.jl,.sumlead.jl,.list4 p.jl,.consent.jl{text-align:left!important}
/* ======================================================================
   v13 (14/10 chiều) · vòng feedback Chau sau v12
   ====================================================================== */

/* ---- Hero: giữ ánh sáng và màu tự nhiên; chỉ làm tối cục bộ ở vùng có chữ (thanh menu phía trên, tiêu đề góc dưới trái) ---- */
.hero-bg::after{background:
  linear-gradient(180deg,rgba(14,13,12,.42) 0,rgba(14,13,12,.18) 96px,rgba(14,13,12,0) 168px),
  linear-gradient(0deg,rgba(14,13,12,.66) 0%,rgba(14,13,12,.44) 24%,rgba(14,13,12,.14) 44%,rgba(14,13,12,0) 58%)}
.hero h1,.hero .tag-line{text-shadow:0 1px 2px rgba(0,0,0,.18),0 2px 28px rgba(0,0,0,.28)}
@media (min-width:1024px){
  .hero-bg::after{background:
    linear-gradient(180deg,rgba(14,13,12,.46) 0,rgba(14,13,12,.2) 96px,rgba(14,13,12,0) 176px),
    radial-gradient(ellipse 30% 24% at 0% 0%,rgba(14,13,12,.5) 0%,rgba(14,13,12,.28) 45%,rgba(14,13,12,0) 100%),
    radial-gradient(ellipse 74% 80% at 0% 100%,rgba(14,13,12,.74) 0%,rgba(14,13,12,.64) 36%,rgba(14,13,12,.4) 60%,rgba(14,13,12,.12) 82%,rgba(14,13,12,0) 100%)}
}
.hdr.on-dark:not(.solid) .brand,.hdr.on-dark:not(.solid) .nav a,.hdr.on-dark:not(.solid) .lsw summary{text-shadow:0 1px 2px rgba(0,0,0,.28),0 0 18px rgba(0,0,0,.32)}

/* ---- Quan điểm: một "màn" trọn vẹn trên desktop; câu tuyên ngôn trải hết khung nội dung ---- */
@media (min-width:1024px){
  .view{min-height:calc(100vh - var(--hdr));min-height:calc(100svh - var(--hdr));display:flex;flex-direction:column;justify-content:center;padding-block:var(--sec)}
  .view .stmt{max-width:none;font-size:clamp(38px,calc(54 * var(--p)),64px);line-height:1.28}
  .view .vfoot{margin-top:56px;padding-top:36px}
  .view .vfoot .p{max-width:min(58%,52em);font-size:max(17px,calc(20 * var(--p)));line-height:1.7}
  .about{border-top:1px solid var(--line)}
}

/* ---- Vì sao chọn: số thứ tự lớn → tên lợi thế → mô tả; lưới 2 × 2 thoáng; đối tác tách thành khối riêng ---- */
.four .num{display:block;font-size:34px;font-weight:400;line-height:1;letter-spacing:-.02em;color:var(--gold)}
.four h3{margin-top:20px}
@media (min-width:1024px){
  .four,.four:is(*){grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(72px,8vw,144px);row-gap:0;margin-top:72px}
  .four li,.four li:last-child{border-top:1px solid var(--line);padding:40px 0 56px}
  .four .num{font-size:clamp(40px,calc(48 * var(--p)),56px)}
  .four h3{margin-top:32px;min-height:0;font-size:clamp(20px,calc(24 * var(--p)),28px);line-height:1.3}
  .four p{margin-top:16px;max-width:34em;font-size:max(15px,calc(16 * var(--p)));line-height:1.7}
  .partners,.partners:is(*){margin-top:48px;padding:48px 56px 52px;border:0;background:rgba(255,255,255,.5);border-radius:var(--radius);column-gap:64px}
  .partners ul{margin-top:16px}
}
@media (max-width:1023.98px){
  .four li{padding-top:28px;border-top:1px solid var(--line)}
  .four h3{margin-top:16px}
  .partners{margin-top:56px}
}

/* ---- Chân trang: lưới 4 cột bằng nhau, cùng trục với lưới "Dự án khác"; thương hiệu cột 1, Địa chỉ · Email · Theo dõi cột 2–4 ---- */
@media (min-width:1024px){
  .foot .fin{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px;align-items:start}
  .foot .fwm{grid-column:1;min-height:0;line-height:1.2;align-self:start}
  .foot .fg{display:contents}
  .foot .fg > div,.foot .fg > :first-child{grid-column:auto;margin:0;padding-right:16px}
  .foot .fh{margin-bottom:10px}
  .foot .fbar{grid-column:1/-1}
}

/* ---- Dải kêu gọi cuối trang: tiêu đề, mô tả và nút thành một cụm, cùng trục trái ---- */
@media (min-width:1024px){
  .cta-band .cwrap,.cta-band .cwrap:is(*){display:block}
  .cta-band .cl{max-width:44em}
  .cta-band .cr{margin-top:40px;display:flex;flex-direction:row;align-items:center;gap:16px}
  .cta-band .closing{margin-top:20px}
}

/* ---- Trang dự án: khối tiêu đề căn giữa theo chiều cao ảnh; câu dẫn đi cùng tiêu đề ---- */
.olead{margin-top:16px;font-size:20px;line-height:1.45;color:var(--gold-t)}
@media (min-width:1024px){
  .ppage .opener .meta{justify-content:center;padding:var(--sec) var(--cx) var(--sec) 64px}
  .ppage .opener .meta .svc{margin-top:0}
  .olead{margin-top:28px;font-size:max(19px,calc(22 * var(--p)));line-height:1.5;max-width:22em}
}
@media (min-width:1024px) and (max-width:1279.98px){.ppage .opener{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}.ppage .opener .meta{padding-left:48px}}

/* Bài toán / Thực hiện / Kết quả: ba hàng biên tập, số thứ tự + nhãn bên trái, nội dung rộng bên phải, đường kẻ mảnh phân tách */
.pcase .brief{display:block}
.pcase .blocks,.pcase .blocks:is(*){display:block;margin:0;max-width:none;counter-reset:blk;border-top:1px solid var(--line)}
.pcase .blocks > div{counter-increment:blk;padding:28px 0 32px;border-bottom:1px solid var(--line)}
.pcase .blocks h2{display:flex;align-items:baseline;gap:14px}
.pcase .blocks h2::before{content:counter(blk,decimal-leading-zero);font-size:15px;letter-spacing:.04em;color:var(--gold-t);font-weight:600}
.pcase .blocks p{margin-top:12px}
@media (min-width:1024px){
  .pcase .brief{padding-block:var(--sec) calc(var(--sec) * .9)}
  .pcase .blocks > div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:64px;padding:44px 0 48px;align-items:start}
  .pcase .blocks h2{grid-column:1;flex-direction:column;gap:14px;font-size:max(12px,calc(12.5 * var(--p)));letter-spacing:.18em}
  .pcase .blocks h2::before{font-size:clamp(36px,calc(44 * var(--p)),52px);font-weight:400;letter-spacing:-.02em;line-height:1;color:var(--gold)}
  .pcase .blocks p{grid-column:2;margin:0;max-width:42em;font-size:max(17px,calc(18 * var(--p)));line-height:1.75}
}
@media (max-width:1023.98px){.pcase .brief{margin-top:32px}}

/* Thông tin dự án: lưới linh hoạt, 4 trường ngắn một hàng; Phạm vi một hàng riêng, hạng mục xếp ngang */
.pinfo{padding-bottom:0}
.pinfo .facts{margin-top:20px}
@media (min-width:1024px){
  .pcase .pinfo{padding-top:0}
  .pcase .pinfo .facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:48px;row-gap:0;margin-top:24px;padding-top:0;border-top:1px solid var(--line)}
  .pcase .pinfo .facts div{padding:32px 24px 32px 0;border:0}
  .pcase .pinfo .facts dd{margin-top:10px;font-size:max(16px,calc(17 * var(--p)));line-height:1.55}
  .pcase .pinfo .facts .multi{grid-column:1/-1;border-top:1px solid var(--line);display:grid;grid-template-columns:subgrid;align-items:baseline}
  .pcase .pinfo .facts .multi{padding-right:0}
  .pcase .pinfo .facts .multi dd{grid-column:2/-1}
  .pcase .pinfo .facts .multi dd{margin:0;display:flex;flex-wrap:wrap;gap:6px 40px}
  .pcase .pinfo .facts .multi dd span{display:inline;white-space:nowrap}
  .pcase .pinfo .facts > div:not(.multi) + div:not(.multi){border-left:0}
}
@media (max-width:1023.98px){
  .pcase .pinfo{padding:48px var(--gx) 0}
  .pcase .pinfo .facts{margin-top:20px}
}

/* ---- Liên hệ hợp tác: ảnh đứng riêng (không đặt chữ lên ảnh), tiêu đề chuyển sang cột form ---- */
.cpan{padding:0;background:var(--paper-2)}
.cpan::after{content:none}
.cpan .cimg{position:relative;inset:auto;aspect-ratio:3/2}
.cpan .cimg picture{position:absolute;inset:0}
.fhead{margin-bottom:32px}
.fhead .ttl{margin-top:16px;font-size:calc(var(--f-h2) + 6px);line-height:1.2}
@media (min-width:1024px){
  .cpan{display:block;padding:0;position:relative;min-height:100%}
  .cpan .cimg{position:absolute;inset:0;aspect-ratio:auto;height:100%}
  .contact.csplit{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .csplit .formbox{padding:var(--sec) var(--cx) var(--sec) 80px}
  .fhead{margin-bottom:40px}
  .fhead .ttl{font-size:max(40px,calc(48 * var(--p)))}
}
@media (min-width:1024px) and (max-width:1279.98px){.contact.csplit{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.csplit .formbox{padding-left:56px}}

/* FAQ: nhóm câu hỏi có nhãn nhỏ; câu trả lời dạng danh sách */
.qgrp + .qgrp{margin-top:40px}
.qgrp > .lbl{display:block;padding-bottom:4px;color:var(--gold-t)}
.qgrp .qa:last-child{border-bottom:1px solid var(--line)}
.qa .ans .alist{margin:4px 44px 0 0;padding:0 0 0 1.25em}
.qa .ans ul.alist{list-style:disc}
.qa .ans ol.alist{list-style:decimal}
.qa .ans .alist li{font-size:var(--f-body);line-height:var(--lh-body);color:var(--body);padding-left:4px}
.qa .ans .alist li + li{margin-top:6px}
.qa .ans .alist li::marker{color:var(--gold-t)}
.qa .ans .p + .alist,.qa .ans .alist + .p{margin-top:12px}
.qa .ans .p:has(+ .alist),.qa .ans .p:not(:last-child){padding-bottom:0}
.qa .ans > :last-child{padding-bottom:24px}
.qa .ans .alist:last-child{margin-bottom:0}
.qa .ans a{color:var(--ink);text-underline-offset:3px}
@media (min-width:1024px){.faq .qgrp:first-child .qa:first-of-type summary{padding-top:18px;min-height:64px}.qa .ans .alist{max-width:72ch}}
.contact .fhead .ttl{color:var(--ink)}
.contact .fhead .lbl{color:var(--label)}
/* ======================================================================
   v14 (14/10 chiều muộn) · feedback Chau sau v13
   ====================================================================== */
/* Font serif cho từ khóa: Cormorant Garamond (cùng họ font The Chapel đang dùng), có bộ tiếng Việt.
   Toàn site chỉ 2 font: Be Vietnam Pro (chữ chính) + Cormorant Garamond (chỉ 3 từ khóa Quan điểm). */
@font-face{font-family:"WB Serif";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cg-vietnamese-400.woff2) format("woff2");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:"WB Serif";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cg-latin-ext-400.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:"WB Serif";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cg-latin-400.woff2) format("woff2");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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"WB Serif";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cg-vietnamese-500.woff2) format("woff2");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:"WB Serif";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cg-latin-ext-500.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:"WB Serif";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cg-latin-500.woff2) format("woff2");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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--serif:"WB Serif","Cormorant Garamond",Georgia,serif}

/* ---- Quan điểm: 2 font, 2 cỡ chữ. Câu dẫn = Be Vietnam Pro (cỡ tiêu đề mục); 3 từ khóa = Cormorant Garamond chữ in hoa,
        một cỡ duy nhất, xếp bậc thang như trang The Chapel ---- */
.view .stmt.kws{font-size:inherit;line-height:1;letter-spacing:0;max-width:none;color:var(--ink)}
.kws > span{display:block}
.kws .lead2{font-family:var(--font);font-size:var(--f-h2);line-height:1.4;letter-spacing:-.005em;color:var(--ink);max-width:30em}
.kws .kw{font-family:var(--serif);font-weight:500;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(22px,6.6vw,30px);line-height:1.14;color:var(--gold)}
@media (max-width:639.98px){.kws .lead2{font-size:19px;line-height:1.5}}
.kws .lead2 + .kw{margin-top:28px}
.kws .kw + .kw{margin-top:4px}
@media (min-width:640px){.kws .lead2{font-size:24px}.kws .kw{font-size:42px;letter-spacing:.02em}html[lang="en"] .kws .kw{font-size:36px}}
@media (min-width:1024px){
  .kws .lead2{font-size:var(--f-h2);max-width:34em}
  .kws .lead2 + .kw{margin-top:44px}
  .kws .kw{font-size:clamp(48px,calc(68 * var(--p)),80px);line-height:1.08}
  html[lang="en"] .kws .kw{font-size:clamp(42px,calc(56 * var(--p)),66px)}
  .kws .kw:nth-of-type(3){padding-left:1.4em}
  .kws .kw:nth-of-type(4){padding-left:2.8em}
  .view .vfoot{margin-top:56px}
}
/* ---- Trang dự án: bỏ số thứ tự ở Bài toán / Thực hiện / Kết quả ---- */
.pcase .blocks h2::before,.pcase .blocks h2:is(*)::before{content:none}
.pcase .blocks h2{display:block}
@media (min-width:1024px){.pcase .blocks h2{padding-top:6px}}

/* ---- Thông tin dự án: một hàng 5 trường, nhãn trên giá trị (nhất quán), cột bám đúng mép ảnh của gallery phía trên ---- */
@media (min-width:1024px){
  .pcase .pinfo .facts{--g:var(--gg);column-gap:var(--g);grid-template-columns:repeat(5,minmax(0,1fr))}
  .pcase .pinfo .facts div,.pcase .pinfo .facts .multi{display:block;grid-column:auto;border:0;padding:32px 20px 0 0}
  .pcase .pinfo .facts .multi dd{display:block;margin-top:10px}
  .pcase .pinfo .facts .multi dd span,.pcase .pinfo .facts dd span{display:block;white-space:normal}
  .pcase .pinfo .facts .multi dd span + span{margin-top:4px}
  /* Capella: gallery 3 cột 5,9 : 7,3 : 3,5 → Loại hình | Địa điểm trong cột 1, Quy mô | Giai đoạn trong cột 2, Phạm vi cột 3 */
  .pcase[data-case="capella-gosset-hall"] .pinfo .facts{grid-template-columns:
    calc(((100% - 2 * var(--g)) * 5.9 / 16.7 - var(--g)) / 2) calc(((100% - 2 * var(--g)) * 5.9 / 16.7 - var(--g)) / 2)
    calc(((100% - 2 * var(--g)) * 7.3 / 16.7 - var(--g)) / 2) calc(((100% - 2 * var(--g)) * 7.3 / 16.7 - var(--g)) / 2)
    calc((100% - 2 * var(--g)) * 3.5 / 16.7)}
  /* Atelier: gallery 4 cột bằng nhau → Quy mô | Thời gian chia đôi cột 3 */
  .pcase[data-case="weddingbook-atelier"] .pinfo .facts{grid-template-columns:
    calc((100% - 3 * var(--g)) / 4) calc((100% - 3 * var(--g)) / 4)
    calc(((100% - 3 * var(--g)) / 4 - var(--g)) / 2) calc(((100% - 3 * var(--g)) / 4 - var(--g)) / 2)
    calc((100% - 3 * var(--g)) / 4)}
  /* The Chapel: bento 6 : 8 : 6 / 20 cột → Loại hình | Địa điểm, Quy mô | Thời gian, Phạm vi */
  .pcase[data-case="the-chapel-at-saigon"] .pinfo .facts{grid-template-columns:calc(15% - var(--g)) calc(15% - var(--g)) calc(20% - var(--g)) calc(20% - var(--g)) 30%}
}

/* ---- Liên hệ: ảnh dọc 3:4, giữ gần nguyên khung ảnh gốc ---- */
@media (max-width:1023.98px){.cpan .cimg{aspect-ratio:4/5}}
.fhead{margin-bottom:28px}
.fhead .ttl{margin-top:0}

/* ---- Chân trang: WEDDINGBOOK là cấp trên cùng (lớn, riêng một hàng); Địa chỉ · Email · Theo dõi là cấp thông tin, 3 cột bằng nhau ---- */
.foot .fwm{font-size:24px;letter-spacing:.1em}
@media (min-width:1024px){
  .foot .fin{display:block}
  .foot .fwm{display:inline-flex;font-size:clamp(30px,calc(36 * var(--p)),42px);letter-spacing:.1em;line-height:1;min-height:0}
  .foot .fg,.foot .fg:is(*){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px;margin-top:56px;padding-top:32px;border-top:1px solid rgba(255,255,255,.1)}
  .foot .fg > div,.foot .fg > :first-child{grid-column:auto;padding-right:24px}
  .foot .fbar{margin-top:72px}
}

/* ---- Chuyển động khi cuộn (tham khảo HBA, chọn lọc): chữ hiện dần theo nhịp, ảnh mở dần, gallery chuyển nền tối ---- */
/* 1. nhịp xuất hiện lệch nhẹ cho các phần tử cùng nhóm */
.four li.rv:nth-child(2),.rows li.rv:nth-child(2),.qgrp .qa:nth-child(3){transition-delay:.08s}
.four li.rv:nth-child(3),.rows li.rv:nth-child(3){transition-delay:.16s}
.four li.rv:nth-child(4),.rows li.rv:nth-child(4){transition-delay:.24s}
/* 2. câu tuyên ngôn: từng tầng chữ hiện lần lượt, ba từ khóa đến sau cùng */
.js .kws.rv{opacity:1;transform:none}
.js .kws.rv > span{opacity:0;transform:translate3d(0,18px,0);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .kws.rv.in > span{opacity:1;transform:none}
.kws.rv.in > span:nth-child(2){transition-delay:.25s}
.kws.rv.in > span:nth-child(3){transition-delay:.4s}
.kws.rv.in > span:nth-child(4){transition-delay:.55s}
/* 3. ảnh mở dần từ dưới lên + thu nhẹ tỉ lệ */
.js .ph.unv{clip-path:inset(7% 0 0 0);transition:clip-path 1.1s var(--ease)}
.js .ph.unv img{transform:scale(1.06);transition:opacity .6s var(--ease),transform 1.4s var(--ease)}
.js .ph.unv.iv{clip-path:inset(0 0 0 0)}
.js .ph.unv.iv img{transform:none}
/* 4. trang dự án: khi gallery chiếm giữa màn hình, nền chuyển tối để ảnh nổi lên; rời gallery thì trở lại nền sáng */
.pcase{position:relative;isolation:isolate}
.pcase::before{content:"";position:absolute;inset:0;z-index:-1;background:#161513 url(../img/noise-dark.webp) repeat;background-size:512px 512px;opacity:0;transition:opacity .9s var(--ease);pointer-events:none}
.pcase.dk::before{opacity:1}
.pcase .brief,.pcase .brief *,.pcase .gwrap *,.pcase .pinfo,.pcase .pinfo *,.pcase .opener .meta *{transition-property:color,border-color,opacity,transform,clip-path;transition-duration:.9s,.9s,.55s,.55s,1.1s;transition-timing-function:var(--ease)}
.pcase.dk{--ink:#F3EFE8;--body:#CFC8BD;--label:#B9B1A5;--caption:#A9A296;--quote:#E2DCD2;--line:rgba(255,255,255,.16);--gold:var(--gold-d);--gold-t:var(--gold-d)}
@media (prefers-reduced-motion:reduce){
  .js .kws.rv > span{opacity:1!important;transform:none!important;transition:none}
  .js .ph.unv{clip-path:none}.js .ph.unv img{transform:none}
  .pcase::before{display:none}
}
/* The Chapel · bento: ảnh dọc 3:4 giữ đúng tỉ lệ gốc và quyết định chiều cao hai hàng; ảnh ngang 3:2 gần như không bị cắt */
@media (min-width:1024px){
  .chapel{grid-template-rows:auto calc(var(--sec) * .5 - var(--gg) * 2) auto auto}
  .chapel .b1{grid-column:1/8}
  .chapel .b1 .ph,.chapel .b1 .ph:is(*){aspect-ratio:3/4;height:auto;flex:none}
  .chapel .b2{grid-column:8/15}
  .chapel .b3{grid-column:8/15}
  .chapel .b4,.chapel .b5{grid-column:15/21}
  .pcase[data-case="the-chapel-at-saigon"] .pinfo .facts{grid-template-columns:calc(17.5% - var(--g)) calc(17.5% - var(--g)) calc(17.5% - var(--g)) calc(17.5% - var(--g)) 30%}
}
@media (min-width:1024px){.chapel .b2 .ph picture,.chapel .b3 .ph picture,.chapel .b4 .ph picture,.chapel .b5 .ph picture{position:absolute;inset:0}.chapel .b2,.chapel .b3,.chapel .b4,.chapel .b5{min-height:0}}
/* ======================================================================
   v15 (14/10 tối) · feedback Chau sau v14
   ====================================================================== */
/* ---- Footer: bỏ đường kẻ giữa WEDDINGBOOK và 3 cột; phân cấp bằng cỡ chữ và khoảng cách ---- */
@media (min-width:1024px){.foot .fg,.foot .fg:is(*){border-top:0;padding-top:0;margin-top:48px}}

/* ---- Bài toán / Thực hiện / Kết quả: chỉ còn đường kẻ giữa các đoạn, mảnh tối đa (hairline) ---- */
.pcase .blocks,.pcase .blocks:is(*){border-top:0}
.pcase .blocks > div{border-bottom:0}
.pcase .blocks > div + div{border-top:1px solid rgba(15,15,13,.08)}
@media (min-resolution:2dppx){.pcase .blocks > div + div{border-top-width:.5px;border-top-color:rgba(15,15,13,.16)}}
.pcase .blocks > div:first-child{padding-top:0}
.pcase .blocks > div:last-child{padding-bottom:0}

/* ---- The Chapel: gallery từng ảnh đơn (tham khảo HBA). Ảnh trước/sau giữ thành cặp để kể chuyện;
       5 ảnh còn lại mỗi ảnh một hàng, giữ đúng tỉ lệ gốc, cao tối đa một màn hình, căn giữa ---- */
@media (min-width:1024px){
  .chapel,.chapel:is(*){grid-template-rows:none;row-gap:0}
  .chapel :is(.b1,.b2,.b3,.b4,.b5),.chapel :is(.b1,.b2,.b3,.b4,.b5):is(*){grid-column:1/-1;grid-row:auto;margin:0;display:block;margin-top:clamp(72px,12vh,140px)}
  .chapel .b1{margin-top:calc(var(--sec) * .9)}
  .chapel :is(.b1,.b2,.b3,.b4,.b5) .ph,.chapel :is(.b1,.b2,.b3,.b4,.b5) .ph:is(*){flex:none;height:auto;aspect-ratio:var(--ar);margin-inline:auto;
    width:min(100%,calc((100vh - var(--hdr) - 72px) * var(--arn)));width:min(100%,calc((100svh - var(--hdr) - 72px) * var(--arn)))}
  .chapel :is(.b1,.b2,.b3,.b4,.b5) .ph picture{position:absolute;inset:0}
}
@media (max-width:1023.98px){
  .chapel .car.vw{margin:0}
  .chapel .car .track{display:grid;grid-template-columns:1fr 1fr;gap:12px 12px;overflow:visible;padding:0;scroll-snap-type:none}
  .chapel .car.vw .it{width:auto}
  .chapel .car.vw .it .ph{height:auto;aspect-ratio:var(--ar)}
  .chapel .car .it:is(.b1,.b2,.b3,.b4,.b5){grid-column:1/-1;margin-top:28px}
  .chapel .car .it.b1 .ph{width:min(100%,calc((100svh - var(--hdr) - 48px) * var(--arn)));margin-inline:auto}
}
@media (min-width:1024px){.pcase[data-case="the-chapel-at-saigon"] .pinfo .facts,.pcase[data-case="the-chapel-at-saigon"] .pinfo .facts:is(*){grid-template-columns:repeat(5,minmax(0,1fr))}}
/* ======================================================================
   v15 (14/10 tối) · feedback Chau sau v14
   ====================================================================== */
/* ---- The Chapel: gallery trình chiếu từng ảnh (kiểu HBA). Trước/sau + trích dẫn giữ nguyên ở đầu;
        5 ảnh chính hiện lần lượt, mỗi ảnh một "khung hình", đúng tỉ lệ gốc, cao tối đa ~84% màn hình ---- */
@media (min-width:1024px){
  .chapel.show{grid-template-rows:auto;grid-auto-rows:auto;row-gap:0}
  .chapel.show :is(.b1,.b2,.b3,.b4,.b5),.chapel.show :is(.b1,.b2,.b3,.b4,.b5):is(*){grid-column:1/-1;grid-row:auto;margin:clamp(88px,13vh,144px) 0 0;justify-self:center;
    width:min(100%,calc(84vh * var(--a,1.5)));display:block}
  .chapel.show .b1{margin-top:clamp(120px,16vh,176px)}
  .chapel.show :is(.b1,.b2,.b3,.b4,.b5) .ph,.chapel.show :is(.b1,.b2,.b3,.b4,.b5) .ph:is(*){aspect-ratio:var(--ar);height:auto;flex:none;width:100%}
  .chapel.show :is(.b1,.b2,.b3,.b4,.b5) .ph picture{position:absolute;inset:0}
  .chapel.show .scap{display:block;margin-top:18px;font-size:max(15px,calc(16 * var(--p)));letter-spacing:.01em;color:var(--ink)}
}
.scap{color:var(--caption)}
@media (max-width:1023.98px){.chapel .scap{margin-top:12px}}

/* ---- Bài toán / Thực hiện / Kết quả: chỉ một đường kẻ rất mảnh giữa các nhóm, bỏ kẻ trên cùng và dưới cùng ---- */
.pcase .blocks,.pcase .blocks:is(*){border-top:0}
.pcase .blocks > div{border-bottom:0}
.pcase .blocks > div + div{border-top:.5px solid rgba(15,15,13,.12)}
.pcase.dk .blocks > div + div{border-top-color:rgba(255,255,255,.12)}
@media (min-width:1024px){.pcase .blocks > div:first-child{padding-top:0}.pcase .blocks > div:last-child{padding-bottom:0}}
@media (max-width:1023.98px){.pcase .blocks > div:first-child{padding-top:0}}

/* ---- Footer: bỏ đường kẻ giữa WEDDINGBOOK và ba cột thông tin; phân cấp bằng cỡ chữ và khoảng trắng ---- */
@media (min-width:1024px){.foot .fg,.foot .fg:is(*){border-top:0;padding-top:0;margin-top:48px}}

/* ---- Dải "Trao đổi về dự án": điểm kết của trang, căn giữa thành một cụm ---- */
.cta-band .cwrap,.cta-band .cwrap:is(*){text-align:center}
.cta-band .cl{margin-inline:auto}
.cta-band .cr,.cta-band .cr:is(*){align-items:center;justify-content:center}
@media (min-width:1024px){.cta-band .cl{max-width:40em}.cta-band .cr{margin-top:36px}}
@media (min-width:1024px){.pcase[data-case="the-chapel-at-saigon"] .pinfo .facts,.pcase[data-case="the-chapel-at-saigon"] .pinfo .facts:is(*){grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.5fr)}}
@media (min-width:640px) and (max-width:1023.98px){html[lang="en"] .kws .kw{font-size:32px}}
@media (min-width:1024px) and (max-width:1279.98px){html[lang="en"] .kws .kw:nth-of-type(3){padding-left:.7em}html[lang="en"] .kws .kw:nth-of-type(4){padding-left:1.4em}html[lang="en"] .kws .kw{font-size:40px}}
/* The Chapel (điện thoại/tablet): trình chiếu từng ảnh xếp dọc như desktop; cặp trước/sau giữ hai ảnh cạnh nhau */
@media (max-width:1023.98px){
  .chapel.show .car{margin-inline:0}
  .chapel.show .track,.chapel.show .track:is(*){display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gg);row-gap:0;overflow:visible;padding:0;scroll-snap-type:none}
  .chapel.show .it,.chapel.show .it:is(*){width:auto;scroll-snap-align:none}
  .chapel.show .it .ph,.chapel.show .it .ph:is(*){height:auto;aspect-ratio:var(--ar);width:100%}
  .chapel.show :is(.b1,.b2,.b3,.b4,.b5){grid-column:1/-1;margin-top:40px}
  .chapel.show .scap{display:block;margin-top:12px;font-size:14px;color:var(--ink)}
}
@media print{.hdr,.fab,.drawer{display:none}.js .rv{opacity:1;transform:none}.ph img{opacity:1}}
/* ======================================================================
   v18 (19/10) · Gallery trang dự án: từng khung hình đơn (tham khảo HBA)
   - mọi khung cùng tỉ lệ 3:2, căn giữa, không chú thích
   - ảnh dọc ghép cặp hai ảnh trong cùng một khung 3:2
   - bỏ hẳn hiệu ứng chuyển nền tối khi cuộn tới gallery
   ====================================================================== */
.pcase::before{display:none!important}
.sg{--sgap:40px;--pgap:8px;display:block;padding-top:8px}
.sg-q{max-width:34em;margin:0 auto 48px}
.sg-q .quote{margin-top:0}
.sg-f{margin:0;width:100%}
.sg-f + .sg-f{margin-top:var(--sgap)}
.sg-f > .ph,.sg-f > .ph:is(*){aspect-ratio:3/2;width:100%;height:auto;border-radius:var(--radius)}
.sg-f .ph img{object-position:var(--pos,50% 50%)}
.sg-2,.sg-2:is(*){display:grid;grid-template-columns:1fr 1fr;column-gap:var(--pgap);aspect-ratio:3/2}
.sg-2 > .ph,.sg-2 > .ph:is(*){aspect-ratio:auto;height:100%;width:100%}
.sg-2 > .ph picture{position:absolute;inset:0}
@media (min-width:640px){.sg{--sgap:56px;--pgap:12px}}
@media (min-width:1024px){
  .sg{--sgap:clamp(72px,9vw,128px);--pgap:clamp(12px,1.1vw,20px);padding-top:0}
  .sg-q{margin-bottom:clamp(72px,9vw,128px);text-align:left}
  /* khung không cao quá một màn hình (trừ thanh menu và một khoảng thở) */
  .sg-f,.sg-f:is(*){width:min(100%,calc((100vh - var(--hdr) - 96px) * 1.5));width:min(100%,calc((100svh - var(--hdr) - 96px) * 1.5));margin-inline:auto}
}
/* Khách sạn & venue đối tác */
.posters .it .vt,.posters .it:hover .vt,.posters .it:hover .vt:is(*){text-decoration:none;cursor:default}
@media (max-width:1023.98px){
  /* điện thoại/tablet: từng ảnh đơn xếp dọc như The Chapel, giữ tỉ lệ gốc của video dọc */
  .posters,.posters.car{margin-inline:0}
  .posters .track,.posters .track:is(*){display:block;overflow:visible;padding:0;scroll-snap-type:none}
  .posters .it,.posters .it:is(*){width:100%;margin:0}
  .posters .it + .it{margin-top:40px}
  .posters .it .ph,.posters .it .ph:is(*){aspect-ratio:var(--ar);height:auto;width:100%}
  .posters .it figcaption{margin-top:12px}
}
@media (min-width:640px) and (max-width:1023.98px){.posters .it,.posters .it:is(*){width:min(100%,520px);margin-inline:auto}}
.sg-q .quote{max-width:34em}
@media (min-width:1024px){.sg-q,.sg-q:is(*){max-width:none;width:min(100%,calc((100vh - var(--hdr) - 96px) * 1.5));width:min(100%,calc((100svh - var(--hdr) - 96px) * 1.5));margin-inline:auto}}
/* Trống Đồng: ảnh của bản trước, khung theo tỉ lệ gốc */
.sg-nat > .ph,.sg-nat > .ph:is(*){aspect-ratio:var(--ar)}
@media (min-width:1024px){.sg-nat,.sg-nat:is(*){width:min(100%,calc((100vh - var(--hdr) - 96px) * var(--arn,1.66)));width:min(100%,calc((100svh - var(--hdr) - 96px) * var(--arn,1.66)))}}
/* ======================================================================
   v18 · Bước 2 · Trang dự án chi tiết theo bố cục Jetaimeart
   Tên dự án → đoạn mô tả → thông tin dự án → nút Chi tiết ↓ (mở Bài toán / Thực hiện / Kết quả / Phạm vi)
   → gallery khung ngang. Toàn bộ cụm giới thiệu căn giữa, một cột hẹp như trang sách.
   ====================================================================== */
.pintro{text-align:center;padding-top:calc(var(--hdr) + 56px);padding-bottom:0}
.pintro > *{max-width:46rem;margin-inline:auto}
.pintro .psvc{display:flex;justify-content:center;align-items:baseline;gap:10px;flex-wrap:wrap}
.pintro .psvc .lbl{font-size:11px}
.pintro .psvc .s{font-size:13px;letter-spacing:.06em;color:var(--gold-t)}
.pintro h1{margin-top:16px;font-size:clamp(32px,3.6vw,56px);font-weight:500;line-height:1.25;letter-spacing:-.01em;color:var(--ink);max-width:none}
.pintro .pdesc{margin-top:28px;font-size:16px;line-height:1.8;color:var(--body);text-align:justify;text-align-last:center;hyphens:none}
.pfacts{display:flex;flex-wrap:wrap;justify-content:center;margin-top:36px;row-gap:20px}
.pfacts > div{padding:0 24px;border-left:1px solid var(--line)}
.pfacts > div:first-child{border-left:0}
.pfacts dt{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--label)}
.pfacts dd{margin-top:6px;font-size:15px;line-height:1.5;color:var(--ink)}
.pmore{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:36px;padding:0 4px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-t)}
.pmore svg{width:11px;height:13px;transition:transform .45s var(--ease)}
.pmore[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (hover:hover){.pmore:hover{color:var(--ink)}.pmore:hover svg{transform:translateY(3px)}.pmore[aria-expanded="true"]:hover svg{transform:rotate(180deg) translateY(3px)}}
.pmore:focus-visible{outline:1px solid var(--gold-l);outline-offset:4px}
.ppanel{display:grid;grid-template-rows:1fr;max-width:46rem}
.js .ppanel{grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease),opacity .45s var(--ease);opacity:0}
.js .ppanel.open{grid-template-rows:1fr;opacity:1}
.ppin{overflow:hidden;min-height:0}
.js .ppanel:not(.open) .ppin{visibility:hidden;transition:visibility 0s .6s}
.pblk{padding-top:40px}
.pblk:first-child{padding-top:32px}
.pblk h2{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--label)}
.pblk p{margin-top:12px;font-size:15px;line-height:1.75;color:var(--body);text-align:justify;text-align-last:center}
.ptags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 0;margin-top:14px;list-style:none;padding:0}
.ptags li{font-size:15px;color:var(--ink);padding:0 14px;position:relative}
.ptags li + li::before{content:"";position:absolute;left:-2px;top:50%;width:4px;height:4px;border-radius:50%;background:var(--gold-l);transform:translateY(-50%)}
.pblk.pq .quote{margin-top:0;text-align:center}
.pblk.pq .quote::before{margin-inline:auto}
.pblk.pq .quote p{font-size:17px}
.pcase2 .gwrap{margin-top:56px}
.pcase2 .sg-lead{margin-bottom:40px}
@media (max-width:639.98px){
  .pintro{padding-top:calc(var(--hdr) + 40px)}
  .pintro .pdesc{margin-top:22px;font-size:15px;line-height:1.75}
  .pfacts{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;margin-top:28px}
  .pfacts > div{padding:0;border:0}
  .pmore{margin-top:24px}
  .pcase2 .gwrap{margin-top:40px}
}
@media (min-width:1024px){
  .pintro{padding-top:calc(var(--hdr) + clamp(72px,7vw,120px))}
  .pintro .pdesc{font-size:17px}
  .pcase2 .gwrap{margin-top:clamp(72px,7vw,112px)}
  .pcase2 .sg-lead{margin-bottom:clamp(72px,9vw,128px)}
}
.pintro > .pfacts{max-width:72rem}
@media (min-width:1024px){.pfacts > div{padding:0 32px}.pfacts dd{white-space:nowrap}}
@media (min-width:1024px){.pcase2 .gwrap,.pcase2 .gwrap:is(*){padding-inline:var(--gx)}}
@media (min-width:1024px){.pfacts dd{white-space:normal}.pfacts > div{max-width:17em}}
@media (max-width:639.98px){html[lang="en"] .pintro .pdesc,html[lang="en"] .pblk p{hyphens:auto;-webkit-hyphens:auto}}
/* đoạn căn đều bị hở chữ trong cụm giới thiệu căn giữa: trả về căn giữa thay vì căn trái */
.pdesc.jl,.pblk p.jl,.pdesc.jl:is(*),.pblk p.jl:is(*){text-align:center!important}
/* Phạm vi: dạng thẻ viền mảnh, không dùng dấu chấm phân cách (tránh chấm rơi đầu dòng khi xuống hàng) */
.ptags{gap:10px 8px}
.ptags li{padding:7px 14px;border:1px solid var(--line);border-radius:999px;font-size:13px;line-height:1.4}
.ptags li + li::before{display:none}
/* v18 · vòng sửa Bước 2: đường phân tách mảnh hơn; hàng thông tin còn 3 mục */
.pfacts > div{border-left:1px solid rgba(15,15,13,.08)}
@media (min-resolution:2dppx){.pfacts > div{border-left-width:.5px;border-left-color:rgba(15,15,13,.18)}}
.pfacts > div:first-child{border-left:0}
.ppanel.open + .pmore{margin-top:40px}
@media (max-width:639.98px){
  .pfacts{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  .pfacts > div{padding:0 8px;border-left:1px solid rgba(15,15,13,.08)}
  .pfacts > div:first-child{border-left:0}
  .pfacts dd{font-size:14px}
}
@media (max-width:639.98px) and (min-resolution:2dppx){.pfacts > div{border-left-width:.5px;border-left-color:rgba(15,15,13,.18)}}
@media (max-width:639.98px){.pfacts > div:first-child{border-left:0}}
@media (max-width:639.98px){
  .pfacts:has(.wide){grid-template-columns:1fr 1fr;row-gap:18px}
  .pfacts:has(.wide) > .wide{grid-column:1/-1;order:3;border-left:0;padding:18px 0 0;border-top:1px solid rgba(15,15,13,.08)}
}
/* v18 · dòng dịch vụ: viết hoa toàn bộ, màu vàng, nổi bật hơn để phân cấp với tên dự án */
.pintro .psvc{gap:0 .6em}
.pintro .psvc .lbl,.pintro .psvc .s{font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-t)}
@media (min-width:1024px){.pintro .psvc .lbl,.pintro .psvc .s{font-size:14px}}
/* ======================================================================
   v18 · Bước 3 · Cấu trúc site mới theo Jetaimeart
   ====================================================================== */
/* ---- Mở đầu: tiêu đề viết hoa, đậm ---- */
.hero h1{font-weight:600;text-transform:uppercase;letter-spacing:.02em;line-height:1.18;max-width:none;font-size:clamp(26px,7.4vw,34px)}
.hero h1 .g{white-space:normal}
.hero .tag-line{max-width:34em;font-size:16px;line-height:1.6}
@media (min-width:640px){.hero h1{font-size:44px}}
@media (min-width:1024px){.hero h1{font-size:clamp(46px,3.9vw,72px);line-height:1.12}.hero .tag-line{font-size:max(18px,calc(20 * var(--p)));max-width:36em}}

/* ---- Triết lý thương hiệu: một tiêu đề lớn + một đoạn khoảng 5 dòng, căn giữa ---- */
.vw2{text-align:center}
.vw2 .vt2,.vw2 .vt2:is(*){max-width:none;margin:0 auto;font-size:clamp(28px,6.6vw,34px);font-weight:400;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.vw2 .vp2{max-width:40em;margin:28px auto 0;font-size:16px;line-height:1.8;text-align:justify;text-align-last:center}
@media (min-width:1024px){.vw2 .vt2,.vw2 .vt2:is(*){font-size:clamp(40px,3.4vw,60px);line-height:1.22}.vw2 .vp2{margin-top:40px;font-size:18px}}
.vp2.jl{text-align:center!important}

/* ---- Dự án tiêu biểu (trang chủ): 2 ảnh lớn + 3 ảnh nhỏ trên desktop, vuốt ngang trên điện thoại ---- */
.hproj .ttl{margin-top:14px}
.hproj .hgrid{margin-top:32px}
.hcard a{display:block;color:inherit;text-decoration:none}
.hcard .ph{aspect-ratio:3/2;overflow:hidden}
.hcard .ph img{object-position:var(--pos,50% 50%)}
.hcard .hsvc{margin-top:16px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-t)}
.hcard h3{margin-top:8px;font-size:20px;font-weight:400;line-height:1.3;color:var(--ink)}
.hp-more{margin-top:32px;text-align:center}
.hp-more .btn-more{margin-top:0}
.hgrid .it{width:min(78vw,420px)}
@media (min-width:1024px){
  .hproj .hgrid{margin-top:48px;margin-inline:0}
  .hgrid .track,.hgrid .track:is(*){display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:56px 24px;overflow:visible;padding:0;scroll-snap-type:none}
  .hgrid .it,.hgrid .it:is(*){width:auto}
  .hgrid .hc0,.hgrid .hc1{grid-column:span 3}
  .hgrid .hc2,.hgrid .hc3,.hgrid .hc4{grid-column:span 2}
  .hgrid .hc0 h3,.hgrid .hc1 h3{font-size:24px}
  .hp-more{margin-top:56px}
}
@media (hover:hover){.hcard .ph img{transition:opacity .6s var(--ease),transform 1.2s var(--ease)}.hcard a:hover .ph img{transform:scale(1.03)}.hcard a:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}}

/* ---- Video không gian The Chapel ---- */
.hvid{padding-block:var(--sec)}
.hv-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px}
.hv-head .ttl{margin-top:14px}
.hv-head .btn-more{margin-top:0}
.hv-box{position:relative;margin-top:32px;aspect-ratio:16/9;overflow:hidden;background:#1b1a18;border-radius:var(--radius)}
.hv-box .hv-poster,.hv-box .hv-poster img,.hv-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hv-box video{opacity:0;transition:opacity .8s var(--ease)}
.hv-box.playing video{opacity:1}
.hv-tg{position:absolute;right:16px;bottom:16px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(15,15,13,.35);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.hv-tg svg{width:16px;height:16px}
.hv-tg .i-play{display:none}
.hv-box:not(.playing) .hv-tg .i-play{display:block}
.hv-box:not(.playing) .hv-tg .i-pause{display:none}
.hv-tg:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (min-width:1024px){.hv-box{margin-top:48px}.hv-tg{right:24px;bottom:24px}}

/* ---- Dải "Trao đổi về dự án": một câu như Jetaimeart + nút Gửi thông tin ---- */
.cta-band h2{color:var(--ink)}
@media (min-width:1024px){.cta-band h2{font-size:max(36px,calc(44 * var(--p)))}}

/* ---- Trang riêng Về chúng tôi / Dự án: chừa chỗ cho thanh menu ---- */
.spage #main{padding-top:var(--hdr)}
.spage .phead h1{font-size:var(--f-label)}
.apage h1.ttl{font-size:var(--f-h2)}
@media (min-width:1024px){.apage h1.ttl{font-size:var(--f-h2)}}

/* ---- Logo đối tác (Về chúng tôi): mỗi hàng 4–5 logo của cùng một nhóm ---- */
.plogos .ttl{margin-top:14px}
.pl-wrap{margin-top:40px}
.pl-row + .pl-row{margin-top:8px}
.pl-cat{min-height:1.5em;margin:28px 0 12px}
.pl-row:first-child .pl-cat{margin-top:0}
.pl-cat:empty{display:none}
.pl-logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:0}
.pl-logos .logo{display:grid;place-items:center;height:88px;padding:16px;border:1px solid rgba(15,15,13,.07);background:rgba(255,255,255,.35)}
.pl-logos .lw{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#8A8378;text-align:center;line-height:1.35}
.pl-logos img{max-width:100%;max-height:44px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.78;transition:filter .3s,opacity .3s}
@media (hover:hover){.pl-logos .logo:hover img{filter:none;opacity:1}}
@media (min-width:640px){.pl-logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){
  .pl-wrap{margin-top:56px}
  .pl-row{display:grid;grid-template-columns:220px 1fr;column-gap:48px;align-items:center}
  .pl-row + .pl-row{margin-top:12px}
  .pl-cat,.pl-cat:empty{display:block;margin:0}
  .pl-logos{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
  .pl-logos .logo{height:104px}
}

/* ---- Dịch vụ: 2 dịch vụ xếp từ trên xuống ---- */
.svc2s{margin-top:40px}
.svc2 + .svc2{margin-top:72px;padding-top:56px;border-top:1px solid rgba(15,15,13,.08)}
.s2-head{display:flex;gap:16px;align-items:flex-start}
.s2-n{font-size:14px;font-weight:600;color:var(--gold-t);letter-spacing:.08em;line-height:2}
.s2-head h2{margin-top:6px;font-size:26px;font-weight:400;line-height:1.25;color:var(--ink)}
.s2-head .sub{margin-top:8px;font-size:16px;color:var(--gold-t)}
.svc2 > .ph{margin-top:28px;aspect-ratio:21/9;overflow:hidden}
.svc2 > .ph img{object-position:var(--pos,50% 50%)}
.s2-body{margin-top:28px}
.s2-body .fit{margin-top:24px}
.s2-body .fit .p{margin-top:8px}
.s2-cta .btn-more{margin-top:28px}
@media (min-width:1024px){
  .svc2s{margin-top:64px}
  .svc2 + .svc2{margin-top:112px;padding-top:96px}
  .s2-head{gap:32px}
  .s2-head h2{font-size:max(32px,calc(40 * var(--p)))}
  .s2-head .sub{font-size:18px}
  .svc2 > .ph{margin-top:40px}
  .s2-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;column-gap:64px;align-items:start;margin-top:40px}
  .s2-body .fit{margin-top:0}
  .s2-cta .btn-more{margin-top:0}
}

/* ---- Chân trang theo bố cục Jetaimeart ---- */
.ft2 .fin{display:grid;grid-template-columns:1fr;gap:40px}
.ft2 .fwm{font-size:30px;letter-spacing:.1em;min-height:0;line-height:1}
.ft2 .faddr{font-style:normal;margin-top:20px;line-height:1.75}
.ft2 .fsoc{display:flex;gap:6px;margin-top:20px}
.ft2 .si,.ft2 .si:is(*){width:40px;height:40px;border:0;border-radius:0;display:grid;place-items:center;color:#D8D2C8;margin-left:-10px;margin-right:6px}
.ft2 .si svg{width:22px;height:22px}
.ft2 .si:hover{background:none;color:#fff}
.ft2 .fnav{display:flex;flex-direction:column;gap:2px}
.ft2 .fnav a{display:inline-flex;align-items:center;min-height:40px;color:#D8D2C8}
.ft2 .fnav a:hover{color:#fff}
.ft2 .fh{font-size:13px;font-weight:600;letter-spacing:.16em;color:#fff;margin:0}
.ft2 .fnl .fv{margin-top:10px;max-width:26em}
.nlf{position:relative;display:flex;margin-top:20px;border-bottom:1px solid rgba(255,255,255,.35);max-width:26em}
.nlf input{flex:1;min-width:0;height:48px;padding:0 4px;background:none;border:0;color:#fff;font:inherit;font-size:15px;outline:0}
.nlf input::placeholder{color:#8F897F}
.nlf button{width:48px;height:48px;background:none;border:0;color:#fff;cursor:pointer;display:grid;place-items:center}
.nlf button svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.nlf button:hover svg{transform:translateX(3px)}
.nlf:focus-within{border-bottom-color:#fff}
.nlf.bad{border-bottom-color:#E08B78}
.nlf.busy{opacity:.6;pointer-events:none}
.nl-msg{min-height:1.4em;margin-top:8px;font-size:13px;color:#D8D2C8}
.nl-msg.err{color:#F0A898}
.nl-c{font-size:12px;color:#8F897F;max-width:28em}
.nl-c a{text-decoration:underline;text-underline-offset:3px}
.ft2 .fbar{margin-top:16px}
@media (min-width:1024px){
  .ft2 .fin{grid-template-columns:5fr 3fr 4fr;column-gap:48px;row-gap:0;align-items:start}
  .ft2 .fwm{font-size:clamp(30px,calc(36 * var(--p)),42px)}
  .ft2 .fnav{padding-top:4px}
  .ft2 .fbar{grid-column:1/-1;margin-top:88px}
}
.cta-band h2{max-width:20em;margin-inline:auto}
.pl-logos .logo{min-width:0}
.pl-logos .lw{overflow-wrap:anywhere;font-size:11px;letter-spacing:.08em}
@media (min-width:640px){.pl-logos .lw{font-size:12px;letter-spacing:.1em}}
br.bp{display:none}
@media (max-width:639.98px){br.bp{display:inline}.hero h1{font-size:clamp(26px,8.4vw,34px)}}
@media (min-width:1024px){.nav a[aria-current="page"]{opacity:1}.nav a[aria-current="page"]::after{transform:scaleX(1)}}
.drawer ul a[aria-current="page"]{color:#fff;text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px;text-decoration-color:var(--gold-d)}
/* ======================================================================
   v18 · Bước 3 vòng 2 (19/10 chiều)
   ====================================================================== */
/* ---- Brand Philosophy: phân cấp như Jetaimeart (tiêu đề serif, 2 đoạn, 3 con số lớn, nút về trang Về chúng tôi) ---- */
.phil{text-align:center}
.phil .eb{justify-content:center}
.phil .phil-h{max-width:20em;margin:18px auto 0;font-family:var(--serif);font-weight:500;font-size:clamp(30px,8vw,38px);line-height:1.14;letter-spacing:-.005em;color:var(--ink);text-wrap:wrap}
.phil .ph-body{max-width:44em;margin:28px auto 0}
.phil .ph-body .p{font-size:15px;line-height:1.8;text-align:justify;text-align-last:center}
.phil .ph-body .p + .p{margin-top:14px}
.phil .ph-body .p.jl{text-align:center!important}
.ph-stats{display:grid;grid-template-columns:1fr;gap:32px;max-width:64rem;margin:48px auto 0;padding:0;list-style:none}
.ph-stats .num{font-family:var(--serif);font-weight:500;font-size:56px;line-height:1;color:var(--ink);letter-spacing:-.01em;font-variant-numeric:lining-nums}
.ph-stats .pre{font-size:.42em;letter-spacing:0;margin-right:.18em;vertical-align:.32em;font-family:var(--font);font-weight:400;color:var(--gold-t)}
.ph-stats .suf{color:var(--gold-l)}
.ph-stats .cap{max-width:15em;margin:10px auto 0;font-size:14px;line-height:1.5;color:var(--caption)}
.ph-cta{margin-top:40px}
.ph-cta .btn-more{margin-top:0}
@media (min-width:640px){.ph-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}.ph-stats li + li{border-left:1px solid rgba(15,15,13,.08)}.ph-stats .num{font-size:60px}}
@media (min-width:1024px){
  .phil .phil-h{margin-top:24px;font-size:clamp(46px,3.7vw,68px)}
  .phil .ph-body{margin-top:40px}
  .phil .ph-body .p{font-size:17px}
  .ph-stats{margin-top:72px}
  .ph-stats .num{font-size:clamp(72px,5.6vw,96px)}
  .ph-stats .cap{font-size:15px;margin-top:14px}
  .ph-cta{margin-top:64px}
}
@media (min-resolution:2dppx){.ph-stats li + li{border-left-width:.5px;border-left-color:rgba(15,15,13,.18)}}

/* ---- Video quảng bá: tràn mép, không chữ, không nút ---- */
.hvid2{padding:0}
.hvid2 .hv-box{margin:0;border-radius:0;aspect-ratio:16/9;cursor:pointer}
@media (max-width:639.98px){.hvid2 .hv-box{aspect-ratio:4/3}}

/* ---- Form liên hệ: desktop ảnh vuông hiện trọn, mobile ảnh dọc 3:4 ---- */
.cpan .cimg2{aspect-ratio:3/4}
@media (min-width:1024px){
  .cpan .cimg2{aspect-ratio:auto}
  .contact.csplit:has(.cimg2){min-height:50vw}
  .contact.csplit:has(.cimg2) .formbox{justify-content:center}
}
@media (min-width:1024px) and (max-width:1279.98px){.contact.csplit:has(.cimg2){min-height:41.6vw}}

/* ---- Đối tác: một khối logo nguyên khối, giữ bố cục 5 cột ở mọi màn hình ---- */
.lwall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;justify-items:center;gap:clamp(22px,5vw,64px) clamp(10px,3vw,48px);margin:clamp(32px,5vw,64px) auto 0;padding:0;list-style:none;max-width:64rem}
.lwall li{display:grid;place-items:center;width:100%;height:clamp(34px,8vw,84px)}
.lwall img{max-width:min(100%,170px);max-height:100%;width:auto;height:auto;object-fit:contain;opacity:.82}
.lwall li:first-child img{max-height:100%}

/* ---- Dịch vụ: desktop hình bên trái, toàn bộ chữ bên phải; mobile giữ hình dọc ---- */
.svc2 > .ph{aspect-ratio:4/5}
@media (max-width:1023.98px){
  .s2-head h2{white-space:nowrap;font-size:min(26px,5.1vw)}
}
@media (min-width:1024px){
  .svc2{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"img head" "img body";grid-template-rows:auto 1fr;column-gap:clamp(48px,5vw,96px);align-items:start}
  .svc2 > .ph{grid-area:img;margin:0;aspect-ratio:4/3}
  .svc2 .s2-head{grid-area:head;align-self:end}
  .svc2 .s2-body{grid-area:body;display:block;margin-top:28px}
  .svc2 .s2-body .fit{margin-top:24px}
  .svc2 .s2-cta .btn-more{margin-top:32px}
  .svc2 .s2-head h2{font-size:max(30px,calc(36 * var(--p)))}
}
@media (max-width:1023.98px){
  .s2-head{flex-direction:column;gap:6px}
  .s2-head h2{font-size:min(26px,4.5vw)}
}
/* v18 · vòng 3: con số và chữ "Gần" cùng màu mực; logo đều hàng; Dịch vụ mobile: hình trước, chữ sau */
.ph-stats .pre,.ph-stats .suf{color:var(--ink)}
.phil .phil-h{margin-top:0}
.lwall li,.lwall li:is(*){height:auto;aspect-ratio:2/1;display:flex;align-items:center;justify-content:center}
.lwall img,.lwall img:is(*){max-width:none;max-height:90%;height:auto;object-fit:contain}
@media (max-width:1023.98px){
  .svc2{display:flex;flex-direction:column}
  .svc2 > .ph{order:-1;margin-top:0;margin-bottom:24px}
}
@media (max-width:639.98px){.cta-band h2{font-size:28px}}
/* v18 · vòng 4 (20/10) */
/* Footer: icon Material Symbols trước địa chỉ và email */
.ft2 .faddr{display:flex;flex-direction:column;gap:10px}
.ft2 .fl{display:flex;align-items:flex-start;gap:10px}
.ft2 .fl .mi{flex:0 0 18px;width:18px;height:18px;margin-top:3px;color:#D8D2C8}
/* Vì sao chọn WEDDINGBOOK: bỏ đường phân cách ở mọi màn hình, phân nhóm bằng số thứ tự và khoảng trắng */
.four li,.four li:last-child,.four li:nth-last-child(2),.four li:is(*){border:0!important;padding-top:0!important;padding-bottom:0!important}
.four{row-gap:40px}
@media (min-width:1024px){.four{row-gap:64px}}
/* Hỏi đáp: khoảng cách giữa các câu hỏi đều nhau sau khi bỏ nhãn nhóm */
.qgrp + .qgrp{margin-top:0!important}
.qgrp > .qa:first-child summary,.qgrp > .qa:first-child summary:is(*){padding-top:18px;min-height:64px}
.qgrp:first-child > .qa:first-child summary{padding-top:0;min-height:0}
@media (max-width:1023.98px){.qgrp:first-child > .qa:first-child summary{padding-top:18px;min-height:64px}}
/* Dịch vụ desktop: ảnh gốc tỉ lệ 3:2, không cắt */
@media (min-width:1024px){.svc2 > .ph,.svc2 > .ph:is(*){aspect-ratio:3/2}}
/* Đối tác: 32 logo, 8 cột x 4 hàng ở mọi màn hình */
.lwall.lw8{grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(14px,3vw,48px) clamp(6px,1.6vw,28px);max-width:none}
.cta-band h2,.cta-band h2:is(*){max-width:26em}

/* v18 img-protect: deterrent only, images stay indexable */
.sg .ph img,.gwrap .ph img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}

/* ======================================================================
   v19 (20/10 chiều) · feedback Chau
   ====================================================================== */
/* Mở đầu: câu phụ ngắt sau "bản sắc," từ 1024px, dòng 1 không bị bó bề ngang */
@media (min-width:1024px){.hero .tag-line{max-width:none}}
/* Triết lý thương hiệu: tiêu đề và 3 con số dùng Be Vietnam Pro như toàn site (bỏ serif) */
.phil .phil-h{font-family:var(--font);font-weight:400;font-size:clamp(24px,6.4vw,30px);line-height:1.32;letter-spacing:-.015em}
@media (min-width:640px){.phil .phil-h{font-size:34px}}
@media (min-width:1024px){.phil .phil-h{font-size:clamp(34px,2.6vw,48px);line-height:1.3}}
.ph-stats .num{font-family:var(--font);font-weight:400;font-size:44px;line-height:1.05;letter-spacing:-.03em;font-variant-numeric:proportional-nums lining-nums}
.ph-stats .pre{font-size:.4em;vertical-align:.38em;letter-spacing:0}
@media (min-width:640px){.ph-stats .num{font-size:48px}}
@media (min-width:1024px){.ph-stats .num{font-size:clamp(56px,4.2vw,76px)}}
/* Dải "Cùng WEDDINGBOOK định hình…": cỡ chữ nhỏ lại cho tinh tế */
.cta-band h2,.cta-band h2:is(*){font-size:26px;line-height:1.35;letter-spacing:-.01em}
@media (max-width:639.98px){.cta-band h2,.cta-band h2:is(*){font-size:22px}}
@media (min-width:1024px){.cta-band h2,.cta-band h2:is(*){font-size:max(28px,calc(34 * var(--p)))}}
/* Thu gọn/mở rộng: dấu v thay dấu +, mở thì xoay lên */
.pm::after,.faq .pm::after,.acc .pm::after{display:none}
.pm::before,.faq .pm::before{width:7px;height:7px;margin:-5px 0 0 -3.5px;background:none!important;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg);transition:transform .3s var(--ease),border-color .2s}
.qa[open] .pm::before,.acc.open .pm::before{transform:translateY(3px) rotate(-135deg);border-color:#fff}
/* Video: ảnh bìa trên điện thoại (khung 4:3) giữ trọn logo và chữ phía trái */
@media (max-width:639.98px){.hvid2 .hv-poster img{object-position:18% 50%}}
.ph-stats .suf{margin-left:-.05em}
@media (min-width:1024px){.cta-band .cl,.cta-band .cl:is(*){max-width:56em}.cta-band h2,.cta-band h2:is(*){max-width:none}}
@media (min-width:640px) and (max-width:1023.98px){.cta-band .cr,.cta-band .cr:is(*){align-items:center}.cta-band .btn-gold,.cta-band .btn-gold:is(*){align-self:center}}