:root{
  --nen:#0f0d0b; --nen2:#191511; --the:#211b16; --vien:#3a2f25;
  --chu:#f3ece4; --mo:#b9ab9b; --vang:#f2b544; --vang2:#ffcf6b; --do:#ff6b4a; --xanh:#3ecf8e;
  --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--nen);color:var(--chu);font-family:"Be Vietnam Pro",system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--vang2)}
.khung{max-width:720px;margin:0 auto;padding:0 18px}
section{padding:56px 0}
section+section{border-top:1px solid #241e18}
h1{font-size:clamp(30px,7.4vw,48px);line-height:1.12;font-weight:900;letter-spacing:-.5px}
h2{font-size:clamp(25px,5.6vw,34px);line-height:1.2;font-weight:800;margin-bottom:18px}
h3{font-size:19px;font-weight:800;margin-bottom:6px}
.vang{color:var(--vang)}
.mo{color:var(--mo)}
.nho{font-size:14px}
.nhan{display:inline-block;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--vang);margin-bottom:14px}
.cau p{margin:0 0 6px}
.cau p.dam{font-weight:800;font-size:20px;margin-top:14px}

/* hero */
.hero{position:relative;padding:0;overflow:hidden}
.hero .anh{position:absolute;inset:0;background:url(tiep.jpg) center 30%/cover;opacity:.42}
.hero .anh::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,13,11,.35) 0%,rgba(15,13,11,.75) 55%,var(--nen) 100%)}
.hero .khung{position:relative;padding-top:64px;padding-bottom:56px}
.hero .phu{font-size:19px;color:#e9dfd3;margin:18px 0 26px;max-width:560px}

/* nút */
.nut{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,var(--vang2),var(--vang));color:#1d1307;
  font-weight:900;font-size:18px;padding:17px 28px;border-radius:14px;text-decoration:none;border:0;cursor:pointer;width:100%;max-width:440px;
  box-shadow:0 10px 30px rgba(242,181,68,.25);transition:transform .15s}
.nut:hover{transform:translateY(-2px)}
.nut.phu{background:transparent;color:var(--chu);border:1.5px solid var(--vien);box-shadow:none;font-weight:700}
.nut:disabled{opacity:.6;cursor:wait}

/* thẻ */
.luoi{display:grid;gap:14px}
@media(min-width:640px){.luoi.hai{grid-template-columns:1fr 1fr}}
.the{background:var(--the);border:1px solid var(--vien);border-radius:var(--r);padding:20px}
.the .so{font-size:13px;font-weight:800;color:var(--vang);letter-spacing:1px}
ul.tich{list-style:none}
ul.tich li{padding:8px 0 8px 34px;position:relative}
ul.tich li::before{content:"✓";position:absolute;left:0;top:8px;width:24px;height:24px;border-radius:50%;background:rgba(62,207,142,.15);color:var(--xanh);font-weight:900;font-size:14px;display:grid;place-items:center}
ul.cheo li::before{content:"✕";background:rgba(255,107,74,.15);color:var(--do)}

/* lộ trình */
.chang{margin-bottom:22px}
.chang h3{color:var(--vang2)}
.ngay{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:10px 0;border-bottom:1px dashed #2c241d}
.ngay b{color:var(--vang);font-size:14px;padding-top:2px}
.ngay span{display:block;color:var(--mo);font-size:15px}

/* form */
form{display:grid;gap:12px;margin-top:8px}
label{font-size:14px;font-weight:700;color:var(--mo)}
input{width:100%;background:#120f0c;border:1.5px solid var(--vien);color:var(--chu);border-radius:12px;padding:15px 14px;font:inherit;font-size:17px}
input:focus{outline:0;border-color:var(--vang)}
.loi{color:var(--do);font-size:14px;min-height:18px}
.hop-form{background:var(--nen2);border:1px solid var(--vien);border-radius:22px;padding:24px}

/* giá */
.gia{font-size:52px;font-weight:900;color:var(--vang2);line-height:1}
.gia small{font-size:20px;color:var(--mo);font-weight:600}

/* QR */
.qr{display:none;text-align:center}
.qr.hien{display:block}
.qr img{width:280px;max-width:100%;margin:16px auto;border-radius:14px;background:#fff;padding:8px}
.ck{background:#120f0c;border:1px dashed var(--vang);border-radius:12px;padding:14px;text-align:left;font-size:15px}
.ck div{display:flex;justify-content:space-between;gap:10px;padding:4px 0}
.ck b{color:var(--vang2);text-align:right;word-break:break-all}

.tac-gia{display:flex;gap:16px;align-items:center}
.tac-gia img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:2px solid var(--vang)}

details{background:var(--the);border:1px solid var(--vien);border-radius:14px;padding:16px 18px;margin-bottom:10px}
summary{font-weight:800;cursor:pointer;list-style:none}
summary::after{content:"+";float:right;color:var(--vang);font-weight:900}
details[open] summary::after{content:"–"}
details p{margin-top:10px;color:var(--mo)}

.dinh{position:fixed;left:0;right:0;bottom:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(15,13,11,.94);border-top:1px solid var(--vien);
  display:flex;justify-content:center;z-index:9;transform:translateY(110%);transition:transform .25s}
.dinh.hien{transform:none}
.dinh .nut{padding:14px 20px;font-size:17px}
footer{padding:36px 0 110px;text-align:center;color:#7d6f62;font-size:13px}
.an{display:none!important}

.anh-hv{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.anh-hv figure{flex:0 0 72%;max-width:300px;scroll-snap-align:start;background:var(--the);border:1px solid var(--vien);border-radius:14px;padding:8px;margin:0}
.anh-hv img{width:100%;height:340px;object-fit:cover;object-position:top;border-radius:10px;background:#fff}
.anh-hv figcaption{font-size:13px;color:var(--mo);padding:8px 4px 2px}
.anh-hv.chu figure{flex-basis:88%;max-width:420px}.anh-hv.chu img{height:auto;max-height:420px;object-fit:contain}