:root{--do:#7C1522;--do-dam:#5A0E18;--kem:#F7F0E8;--kem-sang:#FCF8F3;--vang:#B8925A;--muc:#2A1A1C;--xam:#6F5E60;--vien:#E7DAD0;--zalo:#0068FF;--mess:#0866FF;--serif:"Playfair Display",Georgia,serif;--sans:"Be Vietnam Pro",system-ui,sans-serif;--r:14px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--muc);background:var(--kem-sang);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;padding-bottom:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 18px}
.eyebrow{font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--vang);font-weight:700}

/* nút */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:999px;font-weight:700;font-size:15px;border:1.5px solid transparent;cursor:pointer;transition:.2s;text-align:center}
.btn.lon{padding:16px 28px;font-size:16.5px}
.btn.nho{padding:9px 18px;font-size:14px}
.btn-zalo-xanh{background:var(--zalo);color:#fff;box-shadow:0 8px 22px -10px rgba(0,104,255,.7)}
.btn-zalo-xanh:hover{background:#0057d6}
.btn-zalo-xanh::before{content:"";width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2C6.5 2 2 5.9 2 10.8c0 2.8 1.5 5.3 3.8 6.9L5 21.5l3.9-2c1 .3 2 .4 3.1.4 5.5 0 10-3.9 10-8.9S17.5 2 12 2z'/%3E%3C/svg%3E") center/contain no-repeat}
.btn-mess{background:linear-gradient(135deg,#0866FF,#7B3FF2 70%,#E5437E);color:#fff;box-shadow:0 8px 22px -10px rgba(8,102,255,.7)}
.btn-mess:hover{filter:brightness(.93)}
.btn-mess::before{content:"";width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-rule='evenodd' d='M12 2C6.36 2 2 6.13 2 11.7c0 2.91 1.19 5.44 3.14 7.17.16.15.26.35.27.57l.05 1.78a.8.8 0 0 0 1.12.71l1.99-.88c.17-.07.36-.09.53-.04.91.25 1.88.39 2.9.39 5.64 0 10-4.13 10-9.7S17.64 2 12 2zm6 7.46-2.94 4.66a1.5 1.5 0 0 1-2.17.4l-2.34-1.75a.6.6 0 0 0-.72 0l-3.16 2.4c-.42.32-.97-.18-.69-.63l2.94-4.66a1.5 1.5 0 0 1 2.17-.4l2.34 1.75a.6.6 0 0 0 .72 0l3.16-2.4c.42-.32.97.18.69.63z'/%3E%3C/svg%3E") center/contain no-repeat}
.mau .btn .dt{display:none}
.btn-vien{border-color:rgba(255,255,255,.6);color:#fff}
.btn-vien:hover{background:rgba(255,255,255,.12)}
.btn-do{background:var(--do);color:#fff}
.btn-do:hover{background:var(--do-dam)}
.btn-kem{background:var(--kem);color:var(--do)}

/* đầu trang */
.dau{position:sticky;top:0;z-index:40;background:rgba(252,248,243,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--vien)}
.dau .wrap{display:flex;align-items:center;gap:20px;height:68px}
.logo{display:flex;align-items:center;gap:10px;margin-right:auto}
.logo img{height:46px;width:auto}
.logo span{font-family:var(--serif);color:var(--do-dam);font-size:14px;line-height:1.15}
.logo b{font-size:19px;font-weight:500}
.dau nav{display:flex;gap:22px;font-size:14.5px;font-weight:600}
.dau nav a:hover{color:var(--do)}

/* hero */
.hero{background:radial-gradient(900px 500px at 10% 10%,#9a2a38,var(--do) 55%,var(--do-dam));color:#fff;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;padding-top:56px;padding-bottom:64px}
.hero .eyebrow{color:#F2D6B8}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(36px,5vw,60px);line-height:1.1;margin:14px 0 18px}
.hero h1 em{color:#F2D6B8}
.gia-tu{font-size:18px;color:#F3E4DA;margin-bottom:18px}
.gia-tu span{display:inline-block;margin-left:6px;background:#F2D6B8;color:var(--do-dam);padding:3px 12px;border-radius:99px;font-size:16px}
.cam-ket{list-style:none;display:grid;gap:8px;margin-bottom:28px}
.cam-ket li{display:flex;gap:10px;align-items:center;color:#F7E8DE}
.cam-ket li::before{content:"✓";display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.16);font-size:13px;font-weight:700}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-anh img{border-radius:180px 180px var(--r) var(--r);aspect-ratio:4/5;object-fit:cover;width:100%;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}

/* tin cậy */
.tin{background:var(--kem);border-bottom:1px solid var(--vien)}
.tin .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.tin div{text-align:center;padding:20px 8px;border-right:1px solid var(--vien)}
.tin div:last-child{border-right:0}
.tin b{display:block;font-family:var(--serif);font-weight:500;font-size:30px;color:var(--do);line-height:1.1}
.tin span{font-size:13.5px;color:var(--xam)}

/* ưu đãi */
.uu-dai{background:linear-gradient(90deg,#B8925A,#d6b27c);color:var(--do-dam);text-align:center;padding:34px 0}
.uu-dai .tag{display:inline-block;background:var(--do);color:#fff;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:4px 12px;border-radius:99px}
.uu-dai h2{font-family:var(--serif);font-weight:500;font-size:30px;margin:10px 0 6px}
.uu-dai p{margin-bottom:16px}

/* khối */
.khoi{padding:72px 0}
.khoi.kem{background:var(--kem)}
.khoi.do{background:var(--do-dam);color:#fff}
.tieu-de{text-align:center;max-width:720px;margin:0 auto 34px}
.tieu-de h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.4vw,40px);line-height:1.2;color:var(--do-dam);margin:8px 0 10px}
.do .tieu-de h2{color:#fff}
.tieu-de p{color:var(--xam)}
.giua{text-align:center;margin-top:28px}

/* bộ lọc + thẻ mẫu */
.loc{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:14px;position:sticky;top:68px;z-index:20;background:var(--kem-sang);padding:10px 0}
.loc button{font:inherit;font-weight:600;font-size:14.5px;padding:9px 16px;border-radius:99px;border:1.5px solid var(--vien);background:#fff;color:var(--xam);cursor:pointer}
.loc button small{opacity:.7;font-weight:500}
.loc button.on{background:var(--do);border-color:var(--do);color:#fff}
.nhom-mt{text-align:center;color:var(--xam);font-size:15px;margin-bottom:18px}
.luoi-mau{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mau{background:#fff;border:1px solid var(--vien);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.mau[hidden]{display:none}
.mau-anh{position:relative;display:block;cursor:zoom-in}
.mau-anh{background:#fff}
.mau-anh img{width:100%;aspect-ratio:1/1;object-fit:contain}
.ma{position:absolute;left:10px;top:10px;background:var(--do);color:#fff;font-weight:700;font-size:13px;padding:4px 10px;border-radius:99px;letter-spacing:.04em}
.mau-nd{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.mau h3{font-size:15.5px;font-weight:600;line-height:1.35;flex:1}
.mau .gia{font-family:var(--serif);font-size:24px;color:var(--do);font-weight:500}
.mau .btn{width:100%;padding:11px 14px;font-size:14.5px;margin-top:4px}
.ghi-chu{text-align:center;color:var(--xam);font-size:14px;margin-top:22px}

/* lưới ảnh */
.luoi-anh{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.luoi-anh .o img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px}
.cuon{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,24%);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-color:var(--do) var(--vien)}
.cuon .o{scroll-snap-align:start}
.cuon .o img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px}
.o{display:block;cursor:zoom-in}

/* bước */
.buoc{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.buoc div{border:1px solid rgba(255,255,255,.2);border-radius:var(--r);padding:24px 20px}
.buoc b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#F2D6B8;color:var(--do-dam);font-size:18px;margin-bottom:12px}
.buoc h3{font-family:var(--serif);font-weight:500;font-size:21px;margin-bottom:6px}
.buoc p{color:#E7CFC3;font-size:15px}

/* đánh giá */
.dg{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.the{background:#fff;border:1px solid var(--vien);border-radius:var(--r);padding:22px}
.the .sao{color:#E3A43A;letter-spacing:2px;margin-bottom:8px}
.the p{color:#3d2e30;margin-bottom:12px}
.the b{font-size:14px;color:var(--xam)}

/* hỏi đáp */
.hoi-dap{max-width:820px;margin:0 auto;display:grid;gap:10px}
.hoi-dap details{background:#fff;border:1px solid var(--vien);border-radius:12px;padding:0 20px}
.hoi-dap summary{cursor:pointer;list-style:none;padding:16px 28px 16px 0;font-weight:600;position:relative}
.hoi-dap summary::-webkit-details-marker{display:none}
.hoi-dap summary::after{content:"+";position:absolute;right:0;top:10px;font-size:24px;color:var(--do)}
.hoi-dap details[open] summary::after{content:"–"}
.hoi-dap p{padding-bottom:16px;color:#4a3a3c}

/* cuối trang */
.cuoi{background:var(--do);color:#fff;text-align:center;padding:64px 0 90px}
.cuoi h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.6vw,42px);margin-bottom:8px}
.cuoi p{color:#F0DCD2;margin-bottom:22px}
.cuoi .cta{justify-content:center}
.cuoi .dc{font-size:14px;margin:18px 0 0}
.cuoi .dc a{text-decoration:underline}

/* thanh dưới (điện thoại) */
.thanh-duoi{display:none}

/* xem ảnh lớn */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(20,6,9,.95);display:grid;place-items:center;padding:56px 60px}
.lightbox[hidden]{display:none}
.lightbox figure{display:flex;flex-direction:column;align-items:center;gap:12px}
.lightbox img{max-width:100%;max-height:calc(100vh - 140px);border-radius:8px;object-fit:contain}
.lightbox figcaption:empty{display:none}
.lightbox figcaption .btn{padding:11px 20px}
.lightbox button{position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;font-size:32px;width:50px;height:50px;border-radius:50%;cursor:pointer;line-height:1}
.lb-dong{top:12px;right:12px}
.lb-truoc{left:10px;top:50%;transform:translateY(-50%)}
.lb-sau{right:10px;top:50%;transform:translateY(-50%)}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--muc);color:#fff;padding:12px 18px;border-radius:12px;font-size:14.5px;z-index:120;max-width:92vw;text-align:center;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.toast[hidden]{display:none}

@media (max-width:900px){
  .dau nav{display:none}
  .hero .wrap{grid-template-columns:1fr;gap:26px;padding-top:30px;padding-bottom:40px}
  .hero-anh img{aspect-ratio:4/3;border-radius:var(--r);object-position:center 60%}
  .cta .btn{flex:1 1 100%}
  .tin .wrap{grid-template-columns:repeat(2,1fr)}
  .tin div:nth-child(2){border-right:0}
  .tin div:nth-child(-n+2){border-bottom:1px solid var(--vien)}
  .khoi{padding:52px 0}
  .loc{top:68px;display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0 -6px 12px;padding:8px 6px}
  .loc button{font-size:14px;padding:9px 6px;white-space:nowrap}
  .luoi-mau{grid-template-columns:1fr 1fr;gap:10px}
  .mau-nd{padding:10px 10px 12px}
  .mau h3{font-size:13.5px}
  .mau .gia{font-size:19px}
  .mau .btn{font-size:12.5px;padding:10px 8px}
  .mau .btn::before{width:16px;height:16px}
  .mau .btn{white-space:nowrap;font-size:13.5px}
  .mau .btn .pc{display:none}
  .mau .btn .dt{display:inline}
  .luoi-anh{grid-template-columns:1fr 1fr}
  .cuon{grid-auto-columns:62%}
  .buoc,.dg{grid-template-columns:1fr}
  .thanh-duoi{display:grid;grid-template-columns:1fr 2.4fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(252,248,243,.97);border-top:1px solid var(--vien);box-shadow:0 -8px 24px -12px rgba(0,0,0,.25)}
  .thanh-duoi a{display:grid;place-items:center;text-align:center;white-space:nowrap;border-radius:99px;font-weight:700;padding:13px 6px;font-size:15px}
  .tb-goi{background:var(--do);color:#fff}
  .tb-zalo{background:var(--zalo);color:#fff}
  .tb-mess{background:linear-gradient(135deg,#0866FF,#7B3FF2 70%,#E5437E);color:#fff}
  .lightbox{padding:50px 6px 80px}
  .lb-truoc,.lb-sau{top:auto;bottom:16px;transform:none}
  .lb-truoc{left:calc(50% - 60px)}.lb-sau{right:calc(50% - 60px)}
}