/* ==========================================================================
FAIFO HOSPITALITY — Demo 3 · "Resort mosaic"
Bố cục hoàn toàn khác demo 1 (editorial tối giản) và demo 2 (dải trượt tràn mép).
NGUYÊN TẮC RIÊNG CỦA BẢN NÀY:
· Ảnh là nhân vật chính — mọi section đều có ảnh, ưu tiên khảm nhiều ảnh một lúc.
· Mọi khối ảnh đều BO GÓC MỀM (14–22px) — điểm nhận dạng của bản 3.
· Đầu trang là dải EMERALD đặc, không phải nền kem.
· Chú thích nằm ĐÈ trên ảnh với lớp phủ chuyển sắc, thay vì xếp dưới ảnh.
· Không dùng thanh trượt ngang bấm tay — dùng dải ảnh tự trôi (marquee).
BẢNG MÀU — đúng file khách gửi:
#0A4D34 Emerald · #F9F8F6 Trắng ngà · #D49B37 Vàng kim · #B82525 Đỏ đèn lồng
========================================================================== */
/* ---------- 1. TOKEN ---------- */
:root{
--emerald:#0A4D34;
--emerald-d:#073A27;
--emerald-l:#146B49;
--ivory:#F9F8F6;
--ivory-2:#F2F0EB;
--gold:#D49B37;
--gold-d:#BE8828;
--gold-ink:#9C610C; /* vàng đủ tối để làm chữ nhỏ trên nền sáng */
--on-gold:#06341F;
--lantern:#B82525;
--ink:#16241D;
--ink-2:#4B5A52;
--ink-3:#6E7C74;
--line:rgba(10,77,52,.14);
--line-d:rgba(249,248,246,.18);
--serif:"Newsreader",Georgia,"Times New Roman",serif;
--sans:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
--wrap:1440px;
--pad:clamp(18px,4vw,40px);
--sec:clamp(88px,9.5vw,168px);
--r:0px; /* ảnh & thẻ vuông sắc — theo The Brando */
--r-s:0px;
--r-pill:999px;
--ease:cubic-bezier(.22,.61,.24,1);
--ease-soft:cubic-bezier(.34,.06,.2,1);
--shadow:0 26px 60px -34px rgba(10,77,52,.45);
--hd:76px;
--vw:100vw;
}
/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hd,76px) + 12px)}
body{
margin:0;overflow-x:hidden;background:var(--ivory);color:var(--ink);
font:400 15.5px/1.7 var(--sans);
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;font-family:var(--serif);font-weight:400;color:var(--emerald);line-height:1.16;font-optical-sizing:auto}
p{margin:0}
table{border-collapse:collapse;width:100%}
::selection{background:var(--emerald);color:var(--ivory)}
/* ---------- 3. CHỮ ---------- */
h1{font-size:clamp(2.45rem,4.5vw,4.5rem);letter-spacing:0}
h2{font-size:clamp(2.1rem,3.35vw,3.4rem);letter-spacing:0}
h3{font-size:clamp(1.3rem,1.65vw,1.68rem);font-weight:400}
h4{font-size:clamp(1.1rem,1.3vw,1.32rem);font-weight:400}
/* NHÃN TRÊN TIÊU ĐỀ — hình thoi nhỏ (gợi đèn lồng) + chữ hoa giãn rộng, thay cho gạch ngang cũ */
.eyebrow{
display:inline-flex;align-items:center;gap:11px;
font:500 10.5px/1.5 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-ink);
}
.eyebrow::before{
content:"";width:7px;height:7px;flex:0 0 auto;
border:1px solid var(--gold);transform:rotate(45deg);
}
.eyebrow::after{
content:"";width:26px;height:1px;flex:0 0 auto;margin-left:2px;
background:linear-gradient(to right,var(--gold),rgba(212,155,55,0));
}
.lede{font-size:1.06rem;line-height:1.78;color:var(--ink-2)}
.muted{color:var(--ink-2)}
.on-dark,.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--ivory)}
.on-dark .eyebrow{color:var(--gold)}
.on-dark p{color:rgba(249,248,246,.76)}
/* nút */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
height:44px;padding:0 25px;border-radius:var(--r-pill);
background:none;border:1px solid var(--emerald);color:var(--emerald);
font:500 11px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn:hover{background:var(--emerald);color:var(--ivory)}
.btn-gold{border-color:var(--gold);color:var(--gold-ink)}
.btn-gold:hover{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.btn-out{border-color:var(--line);color:var(--ink-2)}
.btn-out:hover{background:var(--emerald);border-color:var(--emerald);color:var(--ivory)}
.on-dark .btn-out{border-color:var(--line-d);color:var(--ivory)}
.on-dark .btn-out:hover{background:var(--ivory);border-color:var(--ivory);color:var(--emerald)}
.lnk{
display:inline-flex;align-items:center;gap:9px;
font:500 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--emerald);
}
.lnk::after{
content:"";width:16px;height:1.5px;background:currentColor;
transition:width .35s var(--ease);
}
.lnk:hover::after{width:26px}
.on-dark .lnk{color:var(--gold)}
.lnk-gold{color:var(--gold-ink)}
/* ---------- 4. KHUNG ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.sec{padding:var(--sec) 0}
.sec-t{padding-top:var(--sec)}
.bleed{width:var(--vw);margin-left:calc(50% - var(--vw)/2)}
/* khung ảnh chung — bo góc mềm, phóng nhẹ khi rê chuột */
.im{overflow:hidden;border-radius:var(--r);background:var(--ivory-2);position:relative}
.im img,.im video{width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--ease)}
a:hover .im img,.hov:hover .im img{transform:scale(1.06)}
.im-s{border-radius:var(--r-s)}
/* lớp phủ + chú thích ĐÈ trên ảnh */
.ov{
position:absolute;inset:auto 0 0 0;padding:clamp(20px,2.4vw,34px);
background:linear-gradient(to top,rgba(6,42,27,.93) 0%,rgba(6,42,27,.84) 34%,rgba(6,42,27,.5) 64%,rgba(6,42,27,0) 100%);
color:var(--ivory);
}
.ov h2,.ov h3,.ov h4{color:var(--ivory)}
.ov .eyebrow{color:var(--gold)}
.ov p{color:rgba(249,248,246,.8);font-size:.95rem;margin-top:8px;max-width:52ch}
.ov .lnk{color:var(--ivory);margin-top:14px}
/* đầu mục section */
.head{display:block;margin-bottom:clamp(30px,3.4vw,52px)}
.head-t{max-width:none}
.head h2{margin-top:14px;max-width:none}
.head-x{max-width:82ch;margin-top:18px;color:var(--ink-2);font-size:1rem}
.head-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
.head-c{text-align:center;max-width:960px;margin:0 auto clamp(34px,3.8vw,58px)}
.head-c h2{margin-top:14px}
.head-c p{margin-top:14px;color:var(--ink-2)}
.head-c .eyebrow::after{display:none}
/* ---------- 5. MÀN CHỜ ---------- */
.load{
position:fixed;inset:0;z-index:200;background:var(--emerald);
display:grid;place-items:center;
transition:opacity .7s var(--ease),visibility .7s;
animation:load-safe .7s ease 4.5s forwards;
}
@keyframes load-safe{to{opacity:0;visibility:hidden}}
.load.done{opacity:0;visibility:hidden}
.load img{height:clamp(52px,5vw,74px);width:auto;opacity:0;animation:load-in .9s var(--ease) .1s forwards}
@keyframes load-in{to{opacity:1}}
/* ---------- 6. ĐẦU TRANG — dải emerald đặc ---------- */
.topbar{background:var(--emerald-d);color:rgba(249,248,246,.72)}
.topbar-in{
max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
height:38px;display:flex;align-items:center;gap:clamp(14px,2vw,30px);
font:400 12px/1 var(--sans);
}
.topbar a:hover{color:var(--ivory)}
.topbar .sp{margin-left:auto}
.lang{display:flex;align-items:center;gap:8px}
.lang button{font:500 12px/1 var(--sans);letter-spacing:.08em;color:rgba(249,248,246,.55);transition:color .3s}
.lang button[aria-current="true"]{color:var(--gold)}
.lang i{width:1px;height:11px;background:var(--line-d);display:block}
.hd{position:sticky;top:0;z-index:70;background:var(--emerald);transition:box-shadow .35s var(--ease)}
.hd.stuck{box-shadow:0 14px 34px -26px rgba(0,0,0,.8)}
.hd-in{
max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
height:76px;display:flex;align-items:center;gap:clamp(12px,1.6vw,26px);
}
.hd-logo{display:flex;align-items:center;gap:11px;flex:0 0 auto;margin-right:clamp(10px,2vw,36px)}
.hd-logo .mk{height:38px;width:auto}
.hd-logo .wm{height:13px;width:auto}
.nav{margin-left:auto;display:flex;align-items:stretch;height:100%}
.nav > ul{display:flex;align-items:stretch}
.nav li{position:relative;display:flex;align-items:stretch}
.nav-a{
position:relative;display:flex;align-items:center;gap:6px;
padding:0 clamp(10px,1vw,16px);
font:500 14px/1 var(--sans);color:rgba(249,248,246,.88);white-space:nowrap;
transition:color .3s var(--ease);
}
.nav-a::after{
content:"";position:absolute;left:clamp(10px,1vw,16px);right:clamp(10px,1vw,16px);bottom:24px;
height:2px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;
transition:transform .38s var(--ease);
}
.nav li:hover > .nav-a,.nav li:focus-within > .nav-a,.nav-a[aria-current="page"]{color:#fff}
.nav li:hover > .nav-a::after,.nav li:focus-within > .nav-a::after,.nav-a[aria-current="page"]::after{transform:scaleX(1)}
.cv{width:7px;height:7px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform .35s var(--ease);flex:0 0 auto}
.nav li:hover > .nav-a .cv,.nav li:focus-within > .nav-a .cv,
.hd-r .has:hover .cv,.hd-r .has:focus-within .cv{transform:translateY(1px) rotate(225deg)}
.drop{
position:absolute;top:100%;left:6px;min-width:250px;z-index:5;
background:var(--ivory);border-radius:var(--r-s);overflow:hidden;
box-shadow:0 26px 54px -28px rgba(6,42,27,.6);
padding:8px 0;opacity:0;visibility:hidden;transform:translateY(-8px);
transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.drop.r{left:auto;right:0}
.has:hover > .drop,.has:focus-within > .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:11px 22px;font:400 14px/1.4 var(--sans);color:var(--ink-2);white-space:nowrap;transition:background .25s,color .25s}
.drop a:hover{background:var(--ivory-2);color:var(--emerald)}
.hd-r{display:flex;align-items:center;gap:12px;flex:0 0 auto;padding-left:clamp(6px,1vw,16px)}
.hd-r .has{position:relative;display:flex;align-items:center}
.hd-book{
display:flex;align-items:center;gap:8px;height:42px;padding:0 clamp(17px,1.7vw,25px);
border-radius:var(--r-pill);background:none;border:1px solid var(--gold);color:var(--gold);
font:500 11px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
transition:background .35s var(--ease),color .35s var(--ease)
}
.hd-book:hover{background:var(--gold);color:var(--on-gold)}
.burger{display:none;align-items:center;gap:10px;color:var(--ivory);font:500 13px/1 var(--sans)}
.burger i{display:block;width:20px;height:9px;position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:100%;height:1.6px;background:currentColor}
.burger i::before{top:0}.burger i::after{bottom:0}
/* menu tràn màn hình (màn hẹp) */
.mnav{
position:fixed;inset:0;z-index:90;background:var(--emerald);color:var(--ivory);
padding:clamp(20px,4vw,44px);overflow-y:auto;
opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
.mnav.on{opacity:1;visibility:visible}
.mnav-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(28px,4vw,52px)}
.mnav-top img{height:44px;width:auto}
.mnav-x{font:500 14px/1 var(--sans);display:flex;align-items:center;gap:9px;color:var(--ivory)}
.mnav h5,.mnav .mnav-h5{display:block;font:600 11px/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.mnav-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,60px)}
.mnav li{margin-bottom:12px}
.mnav-cols a{font-family:var(--serif);font-size:1.2rem;color:var(--ivory)}
.mnav-cols a:hover{color:var(--gold)}
.mnav-ct{margin-top:26px;display:flex;flex-direction:column;gap:9px;font:400 13.5px/1.5 var(--sans);color:rgba(249,248,246,.7)}
.mnav-foot{margin-top:clamp(30px,4vw,54px);display:flex;gap:12px;flex-wrap:wrap}
/* ---------- 7. HERO — chia đôi: ảnh lớn + bảng emerald ---------- */
.hero{position:relative;height:clamp(520px,84svh,860px);overflow:hidden;background:var(--emerald-d)}
.hero video,.hero > img{width:100%;height:100%;object-fit:cover}
.hero::after{
content:"";position:absolute;inset:0;
background:linear-gradient(to top,rgba(6,42,27,.94) 0%,rgba(6,42,27,.86) 34%,rgba(6,42,27,.56) 64%,rgba(6,42,27,.18) 100%);
}
.hero-in{
position:absolute;inset:auto 0 0 0;z-index:2;
max-width:var(--wrap);margin:0 auto;padding:0 var(--pad) clamp(74px,8vw,124px);
color:var(--ivory);
}
.hero-in .eyebrow{color:var(--gold)}
.hero-in h1{color:var(--ivory);margin-top:18px;max-width:none}
.hero-in p{margin-top:18px;color:rgba(249,248,246,.86);max-width:70ch;font-size:1.08rem}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(24px,2.8vw,36px)}
/* ---------- 8. THẺ ĐẶT CHỖ NỔI — đè lên mép dưới hero ---------- */
.bookwrap{position:relative;z-index:20;margin-top:calc(-1 * clamp(38px,4vw,60px))}
.bookcard{
background:var(--ivory);border-radius:var(--r);box-shadow:var(--shadow);
padding:clamp(16px,1.6vw,22px) clamp(16px,1.8vw,26px);
}
.bk-tabs{display:flex;gap:22px;margin-bottom:14px}
.bk-tabs button{
font:600 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
padding-bottom:7px;border-bottom:2px solid transparent;transition:color .3s,border-color .3s;
}
.bk-tabs button.on{color:var(--emerald);border-bottom-color:var(--gold)}
.bk-form{display:flex;flex-wrap:wrap;align-items:stretch;border:1px solid var(--line);background:var(--ivory)}
.bk-form.off{display:none}
.bk-f{
flex:1 1 150px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:7px;
padding:16px clamp(16px,1.6vw,26px);border-left:1px solid var(--line);
transition:background .3s var(--ease);
}
.bk-f:first-of-type{border-left:0}
.bk-f:hover,.bk-f:focus-within{background:var(--ivory-2)}
.bk-f span{font:500 9.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.bk-f input,.bk-f select{
width:100%;border:0;background:none;outline:none;padding:0;cursor:pointer;
font:400 15px/1.4 var(--sans);color:var(--ink);
}
.bk-f select{appearance:none;-webkit-appearance:none;padding-right:16px;
background:url("data:image/svg+xml;utf8,") right center/9px 5px no-repeat}
.bk-go{
flex:1 0 auto;align-self:stretch;min-height:60px;padding:0 clamp(26px,2.8vw,44px);
background:var(--gold);color:var(--on-gold);border-radius:0;
font:500 12px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;
transition:background .35s var(--ease);
}
.bk-go:hover{background:var(--gold-d)}
/* ---------- 9. GIỚI THIỆU — chữ trái, chồng ba ảnh phải ---------- */
.intro{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(30px,5vw,86px);align-items:center}
.intro-t h2{margin-top:16px}
.intro-t p{margin-top:18px;color:var(--ink-2)}
.intro-t p + p{margin-top:14px}
.intro-t .btn{margin-top:clamp(24px,2.6vw,34px)}
.stack3{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:clamp(12px,1.4vw,20px)}
.stack3 .im:nth-child(1){grid-row:span 2;aspect-ratio:3/4.4}
.stack3 .im:nth-child(2){aspect-ratio:4/3;margin-top:clamp(20px,3vw,46px)}
.stack3 .im:nth-child(3){aspect-ratio:1/1}
.stats{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,50px);
margin-top:clamp(52px,5.5vw,90px);text-align:center;
}
.stats div{padding:0 8px}
.stats b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,4.4vw,4.4rem);line-height:1;color:var(--emerald)}
.stats span{display:block;margin-top:14px;font:500 11px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
/* ---------- 10. KHẢM ĐIỂM ĐẾN — 1 ảnh lớn + 2 ảnh nhỏ, chú thích đè ---------- */
.mosaic{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(12px,1.4vw,20px)}
.mosaic .m-big{grid-row:span 2}
.mosaic .m-big .im{height:clamp(420px,46vw,640px)}
.mosaic .m-sm .im{height:clamp(200px,22vw,310px)}
.mosaic a{display:block}
/* ---------- 11. HẠNG PHÒNG — lưới thẻ, giá gắn trên ảnh ---------- */
.rooms3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.rc{display:block}
.rc .im{height:clamp(230px,24vw,330px)}
.rc-tag{
position:absolute;top:14px;left:14px;z-index:2;
background:rgba(249,248,246,.94);color:var(--emerald);
padding:8px 15px;
font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
}
.rc-b{padding:16px 2px 0}
.rc-b h3{margin-bottom:7px}
.rc-m{font:400 13px/1.6 var(--sans);color:var(--ink-3)}
.rc-p{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:12px}
.rc-p b{font-family:var(--serif);font-weight:600;font-size:1.16rem;color:var(--emerald)}
/* ---------- 12. DẢI EMERALD — ẩm thực / spa / hợp tác ---------- */
.band{background:var(--ivory-2)}
.band .wrap{padding-top:var(--sec);padding-bottom:var(--sec)}
.band-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px);margin-top:clamp(30px,3.4vw,48px)}
.band-grid .im{height:clamp(240px,26vw,360px)}
.band-c{margin-top:16px}
.band-c p{margin-top:9px;color:var(--ink-2);font-size:.95rem}
.band-hours{display:block;margin-bottom:8px;font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
/* ---------- 13. TRẢI NGHIỆM — hàng so le, số lớn ---------- */
.exp{display:flex;flex-direction:column;gap:clamp(30px,4vw,64px)}
.exp-row{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(22px,3.4vw,60px);align-items:center}
.exp-row:nth-child(even){grid-template-columns:1fr 1.25fr}
.exp-row:nth-child(even) .exp-im{order:2}
.exp-im{height:clamp(260px,30vw,440px)}
.exp-n{font-family:var(--serif);font-weight:600;font-size:clamp(2.4rem,4vw,3.6rem);color:var(--gold);line-height:1}
.exp-t h3{margin-top:12px}
.exp-t p{margin-top:12px;color:var(--ink-2)}
.exp-t .lnk{margin-top:16px}
.exp-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.exp-tags span{
border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 14px;
font:500 12px/1 var(--sans);color:var(--ink-2);
}
/* ---------- 14. ƯU ĐÃI — thẻ ảnh có dải vàng ---------- */
.offer3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}
.oc{display:block;background:var(--ivory);border-radius:var(--r);overflow:hidden;box-shadow:0 20px 44px -34px rgba(10,77,52,.5);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.oc:hover{transform:translateY(-5px);box-shadow:0 30px 56px -32px rgba(10,77,52,.55)}
.oc .im{height:clamp(190px,20vw,250px);border-radius:0}
.oc-b{padding:clamp(18px,1.8vw,26px)}
.oc-b h3{margin:10px 0 9px;font-size:clamp(1.15rem,1.4vw,1.38rem)}
.oc-b p{color:var(--ink-2);font-size:.94rem}
.oc-b .lnk{margin-top:15px}
/* ---------- 15. DẢI ẢNH TỰ TRÔI — hai hàng ngược chiều ---------- */
.marq{overflow:hidden;padding:6px 0}
.marq-row{display:flex;gap:clamp(12px,1.3vw,18px);width:max-content;animation:marq 58s linear infinite}
.marq-row.rev{animation-direction:reverse;margin-top:clamp(12px,1.3vw,18px)}
.marq:hover .marq-row{animation-play-state:paused}
.marq .im{flex:0 0 auto;width:clamp(210px,22vw,330px);height:clamp(150px,15vw,230px)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ---------- 16. THƯ VIỆN — khảm cao thấp ---------- */
.gal3{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px)}
.gal3 .im{height:clamp(150px,15vw,220px)}
.gal3 .im.tall{grid-row:span 2;height:auto;min-height:clamp(310px,31vw,456px)}
.gal3 .im.wide{grid-column:span 2}
/* ---------- 17. LIÊN HỆ ---------- */
.contact3{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(24px,3.4vw,56px);align-items:stretch}
.contact3 .im{min-height:clamp(280px,32vw,440px)}
.ct-list{display:grid;gap:clamp(16px,1.8vw,24px)}
.ct-list > div{background:var(--ivory-2);border-radius:var(--r-s);padding:clamp(18px,2vw,26px)}
.ct-list h4{margin-bottom:7px}
.ct-list p,.ct-list a{color:var(--ink-2);font-size:.95rem}
.ct-list a:hover{color:var(--emerald)}
/* ---------- 18. NÚT NỔI GÓC PHẢI (thay cho dock giữa của bản 2) ---------- */
.fab{position:fixed;right:clamp(14px,1.6vw,24px);bottom:clamp(14px,1.6vw,24px);z-index:60;display:flex;flex-direction:column;gap:10px}
.fab a{
width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
background:var(--emerald);color:var(--ivory);box-shadow:0 12px 26px -14px rgba(10,77,52,.7);
transition:background .3s var(--ease),transform .3s var(--ease);
}
.fab a:hover{background:var(--emerald-d);transform:translateY(-2px)}
.fab a.g{background:var(--gold);color:var(--on-gold)}
.fab a.g:hover{background:var(--gold-d)}
.fab svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fab .up{opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.fab.far .up{opacity:1;visibility:visible}
/* ---------- 19. CHÂN TRANG ---------- */
.foot{background:var(--emerald);color:rgba(249,248,246,.74);padding-top:clamp(52px,5.5vw,84px)}
.foot h4{color:var(--ivory);margin-bottom:18px;font-size:1.1rem}
.foot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3.4vw,60px)}
.foot-brand img{height:56px;width:auto}
.foot-brand p{margin-top:16px;font-size:.93rem;max-width:34ch}
.foot li{margin-bottom:10px}
.foot a{font-size:.93rem;transition:color .3s}
.foot a:hover{color:var(--gold)}
.socials{display:flex;gap:14px;margin-top:22px}
.socials a{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-d);display:grid;place-items:center;transition:background .3s,border-color .3s}
.socials a:hover{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.socials svg{width:15px;height:15px;fill:currentColor}
.base{margin-top:clamp(44px,4.6vw,70px);padding:24px 0 22px;background:var(--emerald-d)}
.base-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font:400 12.5px/1.6 var(--sans)}
.base-row ul{display:flex;gap:20px;flex-wrap:wrap}
.mona-sign{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding-top:16px;margin-top:14px;border-top:1px solid var(--line-d)}
.mona-sign span{font:400 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(249,248,246,.5)}
.mona-sign img{height:19px;width:auto}
.mona-sign a{display:inline-flex;opacity:.9;transition:opacity .25s}
.mona-sign a:hover{opacity:1}
/* ---------- 20. HIỆN DẦN KHI CUỘN ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.09s}
.rv[data-d="2"]{transition-delay:.18s}
.rv[data-d="3"]{transition-delay:.27s}
/* ==========================================================================
21. TRANG CON
========================================================================== */
/* đầu trang con: ảnh tràn viền, tiêu đề đè giữa */
/* khối chữ chung */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px)}
.tri li{background:var(--ivory-2);border-radius:var(--r-s);padding:clamp(20px,2.2vw,30px)}
.tri-n{display:block;font:600 10.5px/1.5 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.tri p{margin-top:10px;color:var(--ink-2);font-size:.95rem}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,44px)}
.duo > div{background:var(--ivory-2);border-radius:var(--r-s);padding:clamp(22px,2.4vw,34px)}
.duo .eyebrow{margin-bottom:12px}
.duo p{color:var(--ink-2)}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,32px)}
.vals li{background:var(--ivory-2);border-radius:var(--r-s);padding:clamp(20px,2.2vw,32px)}
.vals-i{font-family:var(--serif);font-weight:600;font-size:1.5rem;color:var(--gold)}
.vals h3{margin-top:10px}
.vals h3 em{font-style:normal;color:var(--ink-2);font-weight:400}
.vals p{margin-top:10px;color:var(--ink-2);font-size:.95rem}
.pil{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}
.pil .im{height:clamp(220px,23vw,320px)}
.pil .cap{padding-top:16px}
.pil .cap h3{margin:9px 0 8px}
.pil .cap p{color:var(--ink-2);font-size:.94rem}
.quad{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,26px)}
.quad li{background:var(--ivory-2);border-radius:var(--r-s);padding:clamp(22px,2.4vw,34px)}
.quad-n{font-family:var(--serif);font-weight:600;font-size:1.4rem;color:var(--gold)}
.quad h3{margin-top:9px}
.quad p{margin-top:9px;color:var(--ink-2);font-size:.95rem}
.tick{display:grid;gap:9px;margin-top:16px}
.tick.two{grid-template-columns:1fr 1fr;column-gap:clamp(16px,2vw,30px)}
.tick li{position:relative;padding-left:26px;color:var(--ink-2);font-size:.95rem}
.tick li::before{
content:"";position:absolute;left:0;top:.42em;width:13px;height:7px;
border:solid var(--gold);border-width:0 0 1.8px 1.8px;transform:rotate(-45deg);
}
.dots li{position:relative;padding-left:18px;margin-top:8px;color:var(--ink-2);font-size:.94rem}
.dots li::before{content:"";position:absolute;left:0;top:.68em;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.note{margin-top:clamp(18px,2vw,26px);font:400 12.5px/1.7 var(--sans);color:var(--ink-3);max-width:80ch}
.endcta{text-align:center;max-width:62ch;margin:0 auto}
.endcta p{margin-top:14px;color:var(--ink-2)}
.endcta .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:20px}
.p-acts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:clamp(30px,3.4vw,48px)}
/* hạng phòng trang con — thẻ đứng, ảnh trên */
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px)}
.room{background:var(--ivory-2);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.room .im{border-radius:0;height:clamp(220px,22vw,300px)}
.room-b{padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;flex:1}
.room-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.room-sz{font:600 12px/1 var(--sans);letter-spacing:.1em;color:var(--gold-ink);white-space:nowrap}
.room-b > p{margin-top:11px;color:var(--ink-2);font-size:.95rem}
.room-sp{margin:16px 0 0;display:grid;gap:8px}
.room-sp > div{display:grid;grid-template-columns:11ch 1fr;gap:12px;font-size:.9rem}
.room-sp dt{color:var(--ink-3);font-weight:500}
.room-sp dd{margin:0;color:var(--ink-2)}
.room-cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:20px}
/* gói / ưu đãi trang con */
.pks,.offs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.2vw,34px)}
.pkg,.off{background:var(--ivory-2);border-radius:var(--r);overflow:hidden}
.pkg .im,.off .im{border-radius:0;height:clamp(220px,24vw,320px)}
.pkg-b,.off-b{padding:clamp(22px,2.4vw,34px)}
.pkg-b h3,.off-b h3{margin:10px 0 10px}
.pkg-b > p,.off-b > p{color:var(--ink-2)}
.pkg-p{margin-top:16px;font-family:var(--serif);font-weight:600;font-size:1.5rem;color:var(--emerald)}
.off-m{margin:18px 0 0;display:grid;gap:8px}
.off-m > div{display:grid;grid-template-columns:14ch 1fr;gap:12px;font-size:.9rem}
.off-m dt{color:var(--ink-3);font-weight:500}
.off-m dd{margin:0;color:var(--ink-2)}
.ofilter{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:clamp(26px,3vw,42px)}
.ofilter a{
padding:9px 18px;border-radius:var(--r-pill);border:1px solid var(--line);
font:500 12.5px/1 var(--sans);color:var(--ink-2);transition:all .3s var(--ease);
}
.ofilter a:hover{border-color:var(--emerald);color:var(--emerald)}
.ofilter a.on{background:var(--emerald);border-color:var(--emerald);color:var(--ivory)}
/* chương trình Caman */
.progs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.2vw,34px)}
.prog{background:var(--ivory-2);border-radius:var(--r);overflow:hidden}
.prog.lead{grid-column:1 / -1;display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch}
.prog .im{border-radius:0;height:clamp(210px,22vw,300px)}
.prog.lead .im{height:100%;min-height:clamp(280px,28vw,400px)}
.prog-b{padding:clamp(22px,2.4vw,34px)}
.prog-h{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:baseline}
.prog-p{font-family:var(--serif);font-weight:600;font-size:1.35rem;color:var(--emerald);white-space:nowrap}
.prog-b > p{margin-top:12px;color:var(--ink-2);font-size:.95rem}
.ptab{background:var(--ivory-2);border-radius:var(--r-s);overflow:hidden;margin-top:16px}
.ptab caption{text-align:left;padding:14px 18px 0;font:600 10.5px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.ptab th,.ptab td{text-align:left;padding:11px 18px;font-size:.94rem;color:var(--ink-2)}
.ptab th{font:600 10.5px/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.ptab td:last-child,.ptab th:last-child{text-align:right}
/* khám phá Hội An */
.tops{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px)}
.tops .im{height:clamp(210px,22vw,300px)}
.tops .t-big{grid-column:span 2}
.tops .t-big .im{height:100%;min-height:clamp(430px,45vw,620px)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px)}
.posts article{background:var(--ivory-2);border-radius:var(--r);overflow:hidden}
.posts .im{border-radius:0;height:clamp(190px,20vw,260px)}
.posts .p-b{padding:clamp(18px,2vw,26px)}
.posts h3{margin:9px 0 8px}
.posts p{color:var(--ink-2);font-size:.94rem}
.links3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}
.links3 a{background:var(--ivory-2);border-radius:var(--r-s);padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;gap:9px;transition:background .35s var(--ease)}
.links3 a:hover{background:var(--emerald);color:var(--ivory)}
.links3 a:hover h3,.links3 a:hover .lnk{color:var(--ivory)}
.links3 p{color:var(--ink-2);font-size:.94rem}
.links3 a:hover p{color:rgba(249,248,246,.8)}
.links3 .lnk{margin-top:auto;padding-top:12px}
/* đánh giá + khoảng cách */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px)}
.revs li{background:var(--ivory-2);border-radius:var(--r-s);padding:clamp(20px,2.2vw,32px)}
.revs-s{font:600 12px/1 var(--sans);letter-spacing:.1em;color:var(--gold-ink)}
.revs p{margin-top:14px;font-size:1rem;color:var(--ink)}
.revs footer{margin-top:16px;font:400 12.5px/1.5 var(--sans);color:var(--ink-3)}
.revs footer b{font-weight:600;color:var(--ink-2)}
.dist{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.4vw,20px);margin-top:clamp(26px,3vw,42px)}
.dist li{background:var(--ivory-2);border-radius:var(--r-s);padding:clamp(16px,1.8vw,24px);text-align:center}
.dist b{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(1.2rem,1.7vw,1.6rem);color:var(--emerald)}
.dist span{display:block;margin-top:6px;font:600 10px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.amen{margin-top:clamp(34px,4vw,56px)}
.amen ul{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.amen li{border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 16px;font:500 12.5px/1 var(--sans);color:var(--ink-2)}
/* trang hợp tác */
.why{display:grid;gap:clamp(14px,1.8vw,24px)}
.why li{display:grid;grid-template-columns:5ch 1fr;gap:clamp(16px,2vw,34px);background:var(--ivory-2);border-radius:var(--r-s);padding:clamp(20px,2.2vw,30px)}
.why-n{font-family:var(--serif);font-weight:600;font-size:1.4rem;color:var(--gold)}
.why p{margin-top:9px;color:var(--ink-2);font-size:.95rem}
.lens{display:grid;gap:clamp(12px,1.5vw,20px)}
.lens > div{display:grid;grid-template-columns:16ch 1fr;gap:clamp(16px,2.4vw,40px);background:var(--ivory-2);border-radius:var(--r-s);padding:clamp(18px,2vw,28px)}
.lens dt{font-family:var(--serif);font-weight:600;font-size:1.15rem;color:var(--emerald)}
.lens dd{margin:0;color:var(--ink-2);font-size:.95rem}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.5vw,22px)}
.steps li{background:var(--ivory-2);border-radius:var(--r-s);padding:clamp(18px,2vw,28px)}
.steps-n{font:600 10.5px/1 var(--sans);letter-spacing:.18em;color:var(--gold-ink)}
.steps h3{margin-top:11px;font-size:clamp(1.02rem,1.2vw,1.18rem)}
.steps p{margin-top:9px;color:var(--ink-2);font-size:.9rem}
.models{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px)}
.models article{background:var(--ivory-2);border-radius:var(--r);overflow:hidden}
.models .im{border-radius:0;height:clamp(180px,18vw,230px)}
.models .m-b{padding:clamp(20px,2.2vw,30px)}
.models h3{margin:10px 0 10px}
.models p{color:var(--ink-2);font-size:.94rem}
.models-fit{margin-top:14px;font-size:.9rem;color:var(--ink-3)}
.models-fit b{color:var(--emerald);font-weight:600}
.capg{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px)}
.capg section{background:var(--ivory-2);border-radius:var(--r-s);padding:clamp(20px,2.2vw,30px)}
.capg h3{margin-bottom:10px}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px)}
.vgrid li{background:rgba(249,248,246,.06);border-radius:var(--r-s);padding:clamp(20px,2.2vw,30px)}
.vgrid span{font:600 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.vgrid h3{margin-top:11px;color:var(--ivory)}
.vgrid p{margin-top:10px;color:rgba(249,248,246,.72);font-size:.94rem}
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.2vw,34px)}
.cases article{background:var(--ivory-2);border-radius:var(--r);overflow:hidden}
.cases .im{border-radius:0;height:clamp(220px,24vw,320px)}
.cases .c-b{padding:clamp(20px,2.2vw,32px)}
.cases h3{margin:10px 0 10px}
.cases p{color:var(--ink-2);font-size:.95rem}
/* form */
.pform{max-width:960px;margin:0 auto;background:var(--ivory-2);border-radius:var(--r);padding:clamp(24px,3vw,48px)}
.pform fieldset{border:0;padding:0;margin:0 0 clamp(26px,3vw,40px)}
.pform legend{display:block;width:100%;margin-bottom:18px;font:600 10.5px/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.pform legend em{font-style:normal;color:var(--ink-3);letter-spacing:.08em}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px)}
.pf-grid > label{display:flex;flex-direction:column;gap:7px;min-width:0}
.pf-2{grid-column:1 / -1}
.pf-grid span{font:600 9.5px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.pform input[type=text],.pform input[type=tel],.pform input[type=email],.pform input[type=url],
.pform select,.pform textarea,.pf-file input[type=file]{
width:100%;padding:12px 15px;border:1px solid var(--line);border-radius:var(--r-s);
background:var(--ivory);outline:none;font:400 14.5px/1.5 var(--sans);color:var(--ink);
transition:border-color .3s var(--ease);
}
.pform textarea{resize:vertical;min-height:96px}
.pform select{appearance:none;-webkit-appearance:none;cursor:pointer;
background:var(--ivory) url("data:image/svg+xml;utf8,") right 14px center/9px 5px no-repeat}
.pform input:focus,.pform select:focus,.pform textarea:focus{border-color:var(--emerald)}
.pf-check{display:grid;grid-template-columns:repeat(3,1fr);gap:11px clamp(14px,2vw,26px)}
.pf-check label,.pf-agree{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.pf-check span,.pf-agree span{font:400 13.5px/1.5 var(--sans);color:var(--ink-2);letter-spacing:0;text-transform:none}
.pform input[type=checkbox]{
appearance:none;-webkit-appearance:none;flex:0 0 auto;width:17px;height:17px;margin-top:2px;
border:1px solid var(--line);border-radius:5px;background:var(--ivory);cursor:pointer;transition:background .3s,border-color .3s;
}
.pform input[type=checkbox]:checked{background:var(--emerald);border-color:var(--emerald)}
.pform input[type=checkbox]:checked::after{content:"";display:block;width:4px;height:8px;margin:2px auto 0;border:solid var(--ivory);border-width:0 1.6px 1.6px 0;transform:rotate(42deg)}
.pf-agree{margin-top:clamp(18px,2vw,26px)}
.pf-send{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px);flex-wrap:wrap;margin-top:clamp(22px,2.6vw,34px)}
.pf-send .note{margin-top:0}
.pf-done{margin-top:20px;padding:16px 20px;background:rgba(212,155,55,.14);border-radius:var(--r-s);font-size:.96rem;color:var(--ink)}
/* section bỏ đệm trên — thay cho style="padding-top:0" rải rác */
.sec-t0{padding-top:0}
/* --- trang chi tiết phòng: cột chữ trong .twin --- */
.rd-txt h2{margin-top:14px}
.rd-txt p{margin-top:14px;color:var(--ink-2)}
.rd-txt .tick{margin-top:22px}
/* lưới ảnh cũ của bản 2 dùng lại trong bản 3 */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px)}
.gal .im{height:clamp(150px,15vw,215px)}
/* ---------- 22. RESPONSIVE: toan bo media query da don ve CUOI FILE (sau cac lop §23/§24) de khong bi cascade de — them rule responsive vao do ---------- */
/* ==========================================================================
23. LỚP TƯƠNG THÍCH — các thành phần trang con, dựng lại theo ngôn ngữ bản 3
========================================================================== */
/* --- đầu trang con: bảng emerald, ảnh lớn bo góc chồm lên dưới --- */
.phead{background:var(--emerald);color:var(--ivory);padding:clamp(40px,4.6vw,76px) 0 clamp(118px,11vw,190px)}
.phead h1{color:var(--ivory);margin-top:16px;max-width:22ch}
.phead .eyebrow{color:var(--gold)}
.phead .lede{margin-top:18px;color:rgba(249,248,246,.8);max-width:58ch}
.crumb{display:flex;gap:9px;flex-wrap:wrap;align-items:center;font:400 12.5px/1 var(--sans);color:rgba(249,248,246,.6);margin-bottom:18px}
.crumb a:hover{color:var(--gold)}
.pbanner{
width:min(calc(var(--wrap) - 2 * var(--pad)),calc(100% - 2 * var(--pad)));
margin:calc(-1 * clamp(56px,5.8vw,92px)) auto 0;position:relative;z-index:2;
height:clamp(240px,32vw,460px);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
}
.pbanner img{width:100%;height:100%;object-fit:cover}
/* trang có thanh đặt chỗ ngay dưới đầu trang thì thanh đó đóng vai khối chồm lên */
.bkbar{
width:min(calc(var(--wrap) - 2 * var(--pad)),calc(100% - 2 * var(--pad)));
margin:calc(-1 * clamp(56px,5.8vw,92px)) auto 0;position:relative;z-index:3;
}
.pbanner + .bkbar{margin-top:clamp(20px,2.4vw,32px)}
.bkbar-in{background:var(--ivory);border-radius:var(--r);box-shadow:var(--shadow);padding:clamp(16px,1.7vw,24px) clamp(16px,1.9vw,28px)}
/* --- đầu mục của bản 2 → đầu mục bản 3 --- */
.l-head{max-width:60ch;margin-bottom:clamp(28px,3.2vw,48px)}
.l-head h2{margin-top:14px}
.l-head p{margin-top:14px;color:var(--ink-2)}
.c-head{text-align:center;max-width:720px;margin:0 auto clamp(30px,3.4vw,52px)}
.c-head h2{margin-top:14px}
.c-head p{margin-top:14px;color:var(--ink-2)}
.c-head .eyebrow::before{display:none}
.on-dark .l-head p,.on-dark .c-head p{color:rgba(249,248,246,.76)}
/* --- chú thích dưới ảnh --- */
.cap{padding-top:16px}
.cap .eyebrow{margin-bottom:9px}
.cap h2,.cap h3{margin-bottom:9px}
.cap p{color:var(--ink-2);font-size:.95rem}
.cap p + p{margin-top:9px}
.cap .lnk,.cap .cta{margin-top:14px}
/* --- cặp khối của bản 2 → hai cột lệch, ảnh bo góc --- */
.twin{display:grid;grid-template-columns:1.18fr 1fr;gap:clamp(20px,2.6vw,44px);align-items:start}
.twin-p{min-width:0}
.twin-in{display:block}
.twin .im{height:clamp(240px,26vw,400px)}
.twin-p:nth-child(2) .im{height:clamp(200px,21vw,320px)}
.twin .ptab{margin-top:0}
/* --- carousel của bản 2 → lưới tĩnh (bản 3 không dùng trượt bấm tay) --- */
.car-sec .wrap + .car-split{margin-top:0}
.car-split{display:grid;grid-template-columns:clamp(240px,23vw,340px) minmax(0,1fr);gap:clamp(22px,3vw,52px);align-items:start}
.car-intro h2{margin-top:14px}
.car-intro p{margin-top:14px;color:var(--ink-2);font-size:.96rem}
.car-intro .lnk{margin-top:18px}
.car{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.car-card{display:block}
.car-card .im{height:clamp(190px,19vw,250px)}
.car-card.lg .im{height:clamp(220px,22vw,300px)}
/* --- gói dịch vụ / ưu đãi trang con --- */
.pks,.offs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.2vw,34px)}
.pk,.off{background:var(--ivory-2);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.pk .im,.off .im{border-radius:0;height:clamp(210px,22vw,300px)}
.pk-b,.off-b{padding:clamp(22px,2.4vw,34px);display:flex;flex-direction:column;flex:1}
.pk-b h3,.off-b h3{margin:10px 0 10px}
.pk-b > p,.off-b > p{color:var(--ink-2)}
.pk-b .btn,.pk-b .cta,.off-b .cta{margin-top:auto;padding-top:20px}
/* --- chương trình Caman --- */
.prog-vn{margin-top:6px;font-style:italic;color:var(--gold-ink);font-size:.95rem}
.prog-m{display:flex;gap:clamp(16px,2vw,30px);flex-wrap:wrap;margin-top:6px}
.prog-m li b{display:block;font-family:var(--serif);font-weight:600;font-size:1.1rem;color:var(--emerald)}
.prog-m li span{display:block;margin-top:3px;font:600 9.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.prog-b .tick{margin-top:14px}
.prog-b .cta{margin-top:18px}
/* --- dải định vị / giá trị nền emerald --- */
.pos-sec,.value-sec{padding:0}
.pos,.value{background:var(--emerald);color:var(--ivory);padding:clamp(56px,6.5vw,110px) 0}
.pos{text-align:center}
.pos .eyebrow{color:var(--gold)}
.pos .eyebrow::after{display:none}
.pos h2{margin-top:16px;color:var(--ivory)}
.pos-en{margin-top:14px;font:600 12.5px/1.5 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.pos-p{max-width:66ch;margin:clamp(18px,2.2vw,28px) auto 0;color:rgba(249,248,246,.78)}
.value h2,.value h3{color:var(--ivory)}
.value .eyebrow{color:var(--gold)}
.value .l-head p{color:rgba(249,248,246,.76)}
/* --- đường đến & liên hệ trang con --- */
.loc-map{width:100%;height:clamp(280px,34vw,480px);border-radius:var(--r);overflow:hidden;background:var(--ivory-2);margin-bottom:clamp(22px,2.6vw,40px)}
.loc-map iframe,.loc-map img{width:100%;height:100%;border:0;object-fit:cover}
.loc-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px)}
.loc-item{background:var(--ivory-2);border-radius:var(--r-s);padding:clamp(20px,2.2vw,30px)}
.loc-item .eyebrow{margin-bottom:11px}
.loc-item p{color:var(--ink-2);font-size:.95rem}
.loc-item .lnk{margin-top:14px}
/* --- thư viện ảnh trang con: khảm cao thấp --- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(120px,12vw,180px);gap:clamp(10px,1.2vw,16px)}
.gal a{display:block}
.gal .im{height:100%}
.gal .g1{grid-column:span 2;grid-row:span 2}
.gal .g4{grid-column:span 2}
.gal .g7{grid-row:span 2}
.gal .g10{grid-column:span 2}
/* --- lưới chủ đề Khám phá Hội An --- */
.tops a.top{display:block}
.tops .im{height:clamp(230px,25vw,350px)}
.tops .t-big{grid-column:span 2;grid-row:auto}
/* --- mô hình hợp tác (không có ảnh) --- */
.models article{background:var(--ivory-2);border-radius:var(--r);padding:clamp(22px,2.4vw,34px)}
.models h3{margin:11px 0 11px}
.cases .cap{padding:clamp(20px,2.2vw,32px)}
.cases .cap h3{margin:10px 0 12px}
/* --- biến thể chung --- */
.flip .im{border-radius:var(--r)}
.two{columns:2;column-gap:clamp(18px,2.4vw,36px)}
.lede{max-width:70ch}
/* --- nút nằm trên ảnh tối / nền emerald: vẫn viền mảnh, chỉ đổi sang sắc sáng --- */
.hero-in .btn,.phead .btn,.pos .btn,.value .btn,.mnav .btn,.on-dark .btn{border-color:var(--gold);color:var(--gold)}
.hero-in .btn:hover,.phead .btn:hover,.pos .btn:hover,.value .btn:hover,.mnav .btn:hover,.on-dark .btn:hover{background:var(--gold);color:var(--on-gold)}
.hero-in .btn-out,.phead .btn-out,.pos .btn-out,.value .btn-out,.mnav .btn-out,.on-dark .btn-out{border-color:rgba(249,248,246,.5);color:var(--ivory);background:none}
.hero-in .btn-out:hover,.phead .btn-out:hover,.pos .btn-out:hover,.value .btn-out:hover,.mnav .btn-out:hover,.on-dark .btn-out:hover{background:var(--ivory);border-color:var(--ivory);color:var(--emerald)}
.hero-in .lnk,.phead .lnk,.pos .lnk,.value .lnk,.ov .lnk{color:var(--gold)}
.phead .cta{margin-top:clamp(24px,2.8vw,36px)}
/* ==========================================================================
24. TRANG CHỦ — mô-típ mới, KHÔNG dùng chia đôi "chữ một bên, ảnh một bên"
========================================================================== */
/* --- đoạn dẫn hai cột chữ, trải hết bề ngang --- */
.lead2{columns:2;column-gap:clamp(28px,4vw,72px);max-width:none;color:var(--ink-2);font-size:1.02rem}
.lead2 p{break-inside:avoid}
.lead2 p + p{margin-top:16px}
/* --- dải ảnh ngang tràn viền, cao thấp so le --- */
/* dải ảnh giới thiệu tự trôi — giữ đúng kích thước như lưới 5 cột cũ, chỉ tăng SỐ LƯỢNG ảnh */
.marq-lg .marq-row{align-items:center;gap:clamp(10px,1.2vw,18px);animation-duration:74s}
.marq-lg .im{width:clamp(200px,17.5vw,258px);height:clamp(190px,20vw,300px)}
.marq-lg .im:nth-child(even){height:clamp(230px,24vw,360px)}
/* --- ba khối điểm đến: cột cao bằng nhau, chú thích đè trên ảnh --- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px)}
.trio a{display:block}
.trio .im{height:clamp(380px,42vw,600px)}
.trio .ov h2{font-size:clamp(1.5rem,1.9vw,1.95rem)}
/* --- khảm trải nghiệm: 2 khối lớn + 3 khối nhỏ, không chia đôi --- */
.expg{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.4vw,20px)}
.expg > a{display:block;grid-column:span 2}
.expg > a.big{grid-column:span 3}
.expg .im{height:clamp(250px,26vw,380px)}
.expg .big .im{height:clamp(300px,32vw,460px)}
.expg .ov .exp-n{display:block;font-family:var(--serif);font-weight:600;font-size:1.5rem;color:var(--gold);line-height:1}
.expg .ov h3{margin-top:6px}
/* --- dải liên hệ: ảnh tràn viền, thông tin xếp bốn cột phía dưới --- */
.ct-band{height:clamp(260px,30vw,440px);overflow:hidden}
.ct-band img{width:100%;height:100%;object-fit:cover}
.ct-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3.4vw,60px);margin-top:clamp(32px,3.6vw,54px)}
.ct-grid > div{background:none;padding:0}
.ct-grid h4{margin-bottom:9px}
.ct-grid p,.ct-grid a:not(.btn){color:var(--ink-2);font-size:.95rem}
.ct-grid a:not(.btn):hover{color:var(--emerald)}
.ct-grid .lnk,.ct-grid .btn{margin-top:14px}
/* --- ba vai trò đối tác: thẻ nền kem, số lớn màu vàng --- */
.roles3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px)}
.roles3 article{background:var(--ivory-2);border-radius:var(--r);overflow:hidden}
.roles3 .im{border-radius:0;height:clamp(200px,20vw,270px)}
.roles3 .r-b{padding:clamp(20px,2.2vw,30px)}
.roles3 .r-n{font-family:var(--serif);font-weight:600;font-size:1.4rem;color:var(--gold);line-height:1}
.roles3 h3{margin:10px 0 10px}
.roles3 p{color:var(--ink-2);font-size:.94rem}
@media(max-width:980px){
.lead2{columns:1}
.twin{grid-template-columns:1fr}
.car-split{grid-template-columns:1fr}
.trio,.roles3,.ct-grid{grid-template-columns:1fr 1fr}
.expg{grid-template-columns:repeat(2,1fr)}
.expg > a,.expg > a.big{grid-column:span 1}
.expg .im,.expg .big .im{height:clamp(220px,32vw,300px)}
}
@media(max-width:680px){
.trio,.roles3,.expg{grid-template-columns:1fr}
.trio .im{height:clamp(280px,60vw,380px)}
.twin .im,.twin-p:nth-child(2) .im{height:clamp(200px,48vw,320px)}
.ptab{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* hero co giãn theo nội dung để chữ không bị cắt trên máy thấp */
.hero{height:auto;min-height:clamp(460px,78svh,640px);display:flex;align-items:flex-end}
.hero video,.hero > img,.hero .hero-img{position:absolute;inset:0}
.hero-in{position:relative;inset:auto;width:100%;padding-top:96px}
}
/* nút trên ảnh hero: nền kính mờ rất nhẹ để viền không tan vào ảnh */
.hero-in .btn{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* thẻ nằm trong dải nền kem đậm: đổi sang trắng ngà để tách khỏi nền */
.band .roles3 article,.band .stats div,.band .ct-grid > div{background:var(--ivory)}
/* serif mảnh đè trên ảnh: thêm bóng chữ rất nhẹ để nét thanh không tan vào nền */
.hero-in h1,.hero-in p,.ov h2,.ov h3,.ov p{text-shadow:0 1px 18px rgba(6,42,27,.55)}
.hero-in .eyebrow,.ov .eyebrow{text-shadow:0 1px 12px rgba(6,42,27,.6)}
/* hero ảnh tĩnh: phóng rất chậm cho khung hình có hơi thở, tắt khi máy giảm hiệu ứng */
.hero-img{width:100%;height:100%;object-fit:cover;animation:hero-drift 26s var(--ease-soft) infinite alternate}
@keyframes hero-drift{from{transform:scale(1)}to{transform:scale(1.07)}}
@media (prefers-reduced-motion:reduce){.hero-img{animation:none}}
/* --- ba khối điểm đến: tiêu đề tối đa 2 dòng và thẳng hàng nhau, mô tả hiện khi rê chuột --- */
.trio .ov{padding-bottom:clamp(26px,2.8vw,38px)}
.trio .ov h2{
font-size:clamp(1.35rem,1.72vw,1.78rem);line-height:1.2;
height:calc(2 * 1.2em);margin-top:10px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.trio .ov-x{
max-height:0;opacity:0;overflow:hidden;margin-top:0;
transition:max-height .55s var(--ease),opacity .4s var(--ease),margin-top .55s var(--ease);
}
.trio a:hover .ov-x,.trio a:focus-visible .ov-x{max-height:240px;opacity:1;margin-top:14px}
.trio .ov-x p{margin-top:0}
.trio .ov-x .lnk{margin-top:16px}
@media(hover:none){
/* màn cảm ứng không có hover — luôn hiện mô tả */
.trio .ov-x{max-height:240px;opacity:1;margin-top:14px}
}
/* cụm nút nổi: thu lại khi đã tới chân trang */
.fab{transition:opacity .4s var(--ease),visibility .4s,transform .4s var(--ease)}
.fab.off{opacity:0;visibility:hidden;transform:translateY(14px)}
/* nhãn trên nền tối: hình thoi + đuôi sáng lên */
.on-dark .eyebrow::before,.ov .eyebrow::before,.hero-in .eyebrow::before,.phead .eyebrow::before,.value .eyebrow::before{border-color:var(--gold)}
.on-dark .eyebrow::after,.ov .eyebrow::after,.hero-in .eyebrow::after,.phead .eyebrow::after,.value .eyebrow::after{background:linear-gradient(to right,var(--gold),rgba(212,155,55,0))}
/* section nền kem — dùng cho dải liên hệ trên chân trang */
.tint{background:var(--ivory-2)}
.tint .ct-grid > div{background:none;padding:0}
/* bốn cột liên hệ: mỗi cột một CTA, tất cả thẳng hàng ở đáy cột */
.ct-grid > div{display:flex;flex-direction:column;align-items:flex-start}
.ct-grid > div > p:last-of-type{margin-bottom:clamp(18px,2vw,26px)}
.ct-grid .btn{margin-top:auto}
/* ---- màn hẹp: dải liên hệ giữ 2 cột, mọi ô cao bằng nhau, nút thẳng hàng ---- */
@media(max-width:680px){
.ct-grid{
grid-template-columns:1fr 1fr;
grid-auto-rows:1fr; /* mọi hàng cao bằng nhau */
gap:clamp(22px,6vw,34px) clamp(16px,4vw,24px);
}
.ct-grid > div{height:100%}
.ct-grid h4{font-size:1.06rem;margin-bottom:8px}
.ct-grid p,.ct-grid a:not(.btn){font-size:.9rem;line-height:1.6}
.ct-grid > div > p:last-of-type{margin-bottom:18px}
.ct-grid .btn{height:42px;padding:0 18px;font-size:10.5px;letter-spacing:.11em}
}
/* ==========================================================================
25. RESPONSIVE — dat cuoi file de thang cascade §23/§24
========================================================================== */
@media(max-width:1180px){
.nav{display:none}
.burger{display:flex;order:3;margin-left:clamp(6px,1.4vw,16px)}
.hd-logo{margin-right:auto}
.steps,.dist{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:980px){
.intro,.contact3{grid-template-columns:1fr}
.mosaic{grid-template-columns:1fr}
.mosaic .m-big{grid-row:auto}
.mosaic .m-big .im{height:clamp(280px,46vw,420px)}
.rooms3,.offer3,.pil,.tri,.vals,.links3,.revs,.posts,.models,.capg,.vgrid,.band-grid,.rooms{grid-template-columns:repeat(2,1fr)}
.gal3,.gal{grid-template-columns:repeat(3,1fr)}
.exp-row,.exp-row:nth-child(even){grid-template-columns:1fr;gap:20px}
.exp-row:nth-child(even) .exp-im{order:0}
.bk-form{display:grid;grid-template-columns:1fr 1fr}
.bk-f,.bk-f:first-of-type{border-left:0;border-top:1px solid var(--line)}
.bk-form .bk-f:nth-of-type(-n+2){border-top:0}
.bk-go{grid-column:1 / -1}
.prog.lead{grid-template-columns:1fr}
.prog.lead .im{min-height:clamp(220px,34vw,300px)}
.tops{grid-template-columns:repeat(2,1fr)}
.tops .t-big{grid-column:span 2;grid-row:auto}
.tops .t-big .im{min-height:clamp(240px,40vw,340px)}
.stats{grid-template-columns:repeat(2,1fr)}
.foot-grid{grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,44px)}
.car{grid-template-columns:repeat(2,1fr)}
.loc-row{grid-template-columns:repeat(2,1fr)}
.pf-check{grid-template-columns:1fr 1fr}
.mnav-cols{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
body{font-size:15px}
:root{--r:14px;--sec:clamp(52px,11vw,74px)}
.hd-in{height:64px;gap:10px}
/* logo hiện đủ mark + wordmark, thu gọn các thành phần để vừa màn hẹp */
.hd-logo{gap:8px;margin-right:auto}
.hd-logo .mk{height:30px}
.hd-logo .wm{height:9px}
.hd-book{height:36px;padding:0 12px;font-size:10px;letter-spacing:.1em}
.hd-book .cv{display:none}
.hd-r{padding-left:0;gap:8px}
.burger span{display:none}
.topbar-in{font-size:11px;gap:12px}
.topbar .hide-s{display:none}
.rooms3,.offer3,.pil,.tri,.vals,.links3,.revs,.posts,.models,.capg,.vgrid,.band-grid,
.rooms,.pks,.offs,.progs,.cases,.duo,.quad,.stats,.steps,.dist,.tops,.pf-check,.tick.two{grid-template-columns:1fr}
.tops .t-big{grid-column:auto}
.gal3,.gal{grid-template-columns:repeat(2,1fr)}
.gal3 .im.wide{grid-column:span 2}
.gal3 .im.tall{grid-row:auto;min-height:0;height:clamp(150px,34vw,220px)}
.stack3{grid-template-columns:1fr 1fr}
.stack3 .im:nth-child(1){grid-row:auto;aspect-ratio:3/4}
.stack3 .im:nth-child(2){margin-top:0}
.bk-form{grid-template-columns:1fr}
.bk-form .bk-f:nth-of-type(-n+2){border-top:1px solid var(--line)}
.bk-form .bk-f:first-of-type{border-top:0}
.foot-grid{grid-template-columns:1fr;gap:30px}
.pf-grid{grid-template-columns:1fr}
.mnav-cols{grid-template-columns:1fr;gap:26px}
.why li,.lens > div,.room-sp > div,.off-m > div{grid-template-columns:1fr;gap:6px}
.base-row{justify-content:center;text-align:center}
.fab a{width:46px;height:46px}
.loc-row{grid-template-columns:1fr}
.car{grid-template-columns:1fr}
.btn{white-space:normal;height:auto;min-height:44px;padding:12px 22px;text-align:center;line-height:1.5}
.gal{grid-auto-rows:clamp(88px,24vw,150px)}
.phead{padding-bottom:clamp(84px,16vw,118px)}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
.rv{opacity:1;transform:none}
.load{animation-delay:1s !important}
.marq-row{animation:none}
}
@media(max-width:400px){
.ct-grid .btn{padding:0 13px;font-size:10px;letter-spacing:.08em}
.hd-in{gap:8px}
.hd-logo .wm{height:8px}
.hd-book{padding:0 10px;font-size:9.5px;letter-spacing:.08em}
}
/* --- trạng thái gửi form đặt chỗ: banner nổi bật NGOÀI khung form --- */
.msf-status{display:none;margin-top:14px;padding:13px 18px;font-size:.95rem;border-radius:var(--r-s)}
.msf-status.ok{display:block;background:rgba(10,77,52,.08);color:var(--emerald);border-left:3px solid var(--gold)}
.msf-status.err{display:block;background:rgba(163,51,35,.08);color:#a33323;border-left:3px solid #a33323}
.bk-form.off + .msf-status{display:none}
.bk-f.err{background:rgba(163,51,35,.07)}
.bk-f.err span{color:#a33323}
/* --- thanh đặt chỗ WP: bố cục 2 hàng dùng CHUNG một lưới cột (--bkc do template đặt)
để đường kẻ dọc hai hàng trùng khít nhau --- */
.bk-form{display:block}
.bk-row{display:grid;grid-template-columns:repeat(var(--bkc,4),1fr);align-items:stretch}
.bk-row + .bk-row{border-top:1px solid var(--line)}
.bk-row-ct .bk-go{grid-column:4 / -1}
@media(max-width:980px){
.bk-form{display:block}
.bk-row{grid-template-columns:1fr 1fr}
.bk-row .bk-f{border-left:0;border-top:1px solid var(--line)}
.bk-row .bk-f:nth-of-type(-n+2){border-top:0}
.bk-row-ct{border-top:1px solid var(--line)}
.bk-row-ct .bk-go{grid-column:1 / -1}
}
@media(max-width:680px){
.bk-row{grid-template-columns:1fr}
.bk-row .bk-f:nth-of-type(-n+2){border-top:1px solid var(--line)}
.bk-row .bk-f:first-of-type{border-top:0}
}
/* --- lỗi validate form hợp tác --- */
.pform label.err > span{color:#a33323}
.pform label.err input,.pform label.err textarea,.pform label.err select{border-color:#a33323}
.pform .msf-status{margin-top:18px}
/* --- chế độ homepage-only (tạm ẩn subpage) --- */
.hp-only .drop{display:none!important}
.hp-only .cv{display:none}
.hp-only .hp-hide{display:none!important}
.hp-only a:not([href]){cursor:default}