.khung{ width:100%; max-width:1100px; margin:0 auto; padding:0 20px }
section{ padding:64px 0; scroll-margin-top:64px }
.nhan{ display:inline-block; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--cam); margin-bottom:8px }
h2{ font-size:clamp(26px,4vw,36px); line-height:1.2; margin-bottom:10px }
.mo-ta{ color:var(--chu-mo); max-width:640px; margin-bottom:32px }
.nut{ display:inline-block; background:var(--cam); color:#fff; text-decoration:none; font-weight:700; padding:12px 22px; border-radius:999px; border:0; cursor:pointer; transition:transform .15s, box-shadow .15s }
.nut:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(224,122,46,.3) }
.nut.phu{ background:transparent; color:var(--xanh); border:2px solid var(--xanh) }
.nut.phu:hover{ background:var(--xanh); color:#fff; box-shadow:none }
.nut.do{ background:transparent; color:var(--do); border:2px solid var(--do) }
.nut.do:hover{ background:var(--do); color:#fff; box-shadow:none }
.nut:disabled{ opacity:.6; cursor:wait; transform:none; box-shadow:none }

/* Đầu trang */
.dau{ position:sticky; top:0; z-index:10; background:rgba(251,247,239,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--vien) }
.dau .khung{ display:flex; align-items:center; justify-content:space-between; height:64px }
.logo{ font-weight:800; font-size:20px; color:var(--xanh); text-decoration:none }
.logo span{ color:var(--cam) }
.menu-tren{ display:flex; gap:22px; align-items:center }
.menu-tren a{ text-decoration:none; font-weight:600; font-size:15px; color:var(--chu-mo) }
.menu-tren a:hover{ color:var(--xanh) }
.menu-tren .nut{ color:#fff; padding:8px 18px }
@media (max-width:760px){ .menu-tren a:not(.nut){ display:none } }

/* Hero */
.hero{ padding:72px 0 56px }
.hero .khung{ display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center }
.hero h1{ font-size:clamp(34px,6vw,58px); line-height:1.08; margin-bottom:16px }
.hero h1 em{ font-style:normal; color:var(--cam) }
.hero p{ font-size:18px; color:var(--chu-mo); margin-bottom:28px; max-width:520px }
.nhom-nut{ display:flex; gap:12px; flex-wrap:wrap }
.hero-so{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.hero-so .the{ padding:20px }
.hero-so b{ display:block; font-size:28px; color:var(--xanh); line-height:1.1 }
.hero-so span{ font-size:14px; color:var(--chu-mo) }
@media (max-width:860px){ .hero .khung{ grid-template-columns:1fr } }

/* Cách đặt */
.buoc{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:28px 16px }
.buoc .the{ position:relative; padding-top:30px }
.buoc .so{ position:absolute; top:-16px; left:20px; width:34px; height:34px; border-radius:50%; background:var(--xanh); color:#fff; display:grid; place-items:center; font-weight:800 }
.buoc h3{ font-size:17px; margin-bottom:4px }
.buoc p{ font-size:14px; color:var(--chu-mo) }

/* Bảng giá + thực đơn */
#menu{ background:#fff; border-top:1px solid var(--vien); border-bottom:1px solid var(--vien) }
.gia-luoi{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; align-items:start }
.hop{ background:var(--nen) }
.hop .tag{ display:inline-block; font-size:12px; font-weight:700; background:var(--cam-nhat); color:var(--cam); padding:3px 10px; border-radius:99px; margin-bottom:8px }
.hop h3{ font-size:20px }
.hop .gia{ font-size:34px; font-weight:800; color:var(--xanh); margin:4px 0 12px }
.hop ul{ list-style:none; margin-bottom:18px }
.hop li{ padding:4px 0 4px 22px; position:relative; font-size:15px }
.hop li::before{ content:"✓"; position:absolute; left:0; color:var(--xanh); font-weight:800 }
.hop .nut{ width:100%; text-align:center }
.thuc-don{ margin-top:20px }
.thuc-don h3{ font-size:18px; margin-bottom:6px }
.thuc-don table{ width:100%; border-collapse:collapse; font-size:14px }
.thuc-don th,.thuc-don td{ text-align:left; padding:9px 6px; border-bottom:1px solid var(--vien) }
.thuc-don th{ color:var(--chu-mo); font-weight:600; font-size:13px }
.thuc-don td:first-child{ font-weight:700; white-space:nowrap }
.ghi-nho{ margin-top:12px; font-size:13px; color:var(--chu-mo) }

/* Đặt đơn */
.dd-luoi{ display:grid; grid-template-columns:1.4fr 1fr; gap:24px; align-items:start }
.dd-form h3{ font-size:20px; margin-bottom:4px }
.phu-de{ font-size:14px; color:var(--chu-mo); margin-bottom:8px }
.sp-dong{ display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--vien); background:var(--nen); border-radius:10px; padding:10px 12px; margin-bottom:8px }
.sp-dong.co{ border-color:var(--xanh); background:var(--xanh-nhat) }
.sp-dong b{ display:block; font-size:15px }
.sp-dong span{ font-size:14px; color:var(--chu-mo) }
.dem{ display:flex; align-items:center; gap:6px; flex-shrink:0 }
.dem button{ width:36px; height:36px; border-radius:50%; border:1px solid var(--vien); background:#fff; font-size:20px; line-height:1; cursor:pointer; color:var(--xanh); font-weight:700 }
.o .dem input{ width:58px; text-align:center; padding:7px 4px; background:#fff }
.chon-nhanh{ display:flex; gap:10px; flex-wrap:wrap }
.chon-nhanh label{ flex:1; min-width:140px; display:flex; align-items:center; gap:8px; border:1px solid var(--vien); background:var(--nen); border-radius:10px; padding:10px 12px; cursor:pointer; font-weight:600; font-size:15px; margin:0 }
.chon-nhanh input{ width:auto; accent-color:var(--xanh) }
.chon-nhanh label:has(input:checked){ border-color:var(--xanh); background:var(--xanh-nhat) }
.dd-tong{ margin-top:18px; padding:14px 16px; background:var(--xanh-nhat); border-radius:12px }
.dd-tong div{ display:flex; justify-content:space-between; gap:12px; font-size:15px }
.dd-tong .giam{ color:var(--cam); font-weight:600 }
.dd-tong .tong{ font-weight:800; margin-top:4px }
.dd-tong .tong span:last-child{ font-size:22px; color:var(--xanh) }
#dd-nut{ width:100%; margin-top:14px; padding:15px; font-size:17px }
.loi-chung{ display:none; margin-top:12px; padding:10px 14px; border-radius:10px; background:var(--do-nhat); color:var(--do); font-size:14px }
.loi-chung.hien{ display:block }
.dd-ben .the + .the{ margin-top:16px }
.dd-ben h3{ font-size:17px; margin-bottom:10px }
.dd-ben ul{ list-style:none; font-size:14px; color:var(--chu-mo) }
.dd-ben li{ padding:6px 0; border-bottom:1px dashed var(--vien) }
.dd-ben li:last-child{ border:0 }
.dd-ben b{ color:var(--chu) }
.dd-ben a{ color:var(--xanh); font-weight:700 }
@media (max-width:860px){ .dd-luoi{ grid-template-columns:1fr } }

/* Đặt thành công + thẻ đơn */
.dd-xong{ text-align:center }
.dau-tich{ width:64px; height:64px; margin:0 auto 12px; border-radius:50%; background:var(--xanh); color:#fff; display:grid; place-items:center; font-size:32px; font-weight:800 }
.dd-xong h3{ font-size:22px; margin-bottom:4px }
.dd-ma{ display:inline-block; font-family:Consolas, monospace; font-size:22px; font-weight:800; letter-spacing:.06em; background:var(--cam-nhat); color:var(--cam); padding:6px 16px; border-radius:10px; margin:10px 0 16px }
.tom-tat{ text-align:left; background:var(--nen); border-radius:12px; padding:14px 18px; font-size:15px; margin-bottom:16px }
.tom-tat div{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px dashed var(--vien) }
.tom-tat div:last-child{ border:0; font-weight:800 }
.tom-tat span:first-child{ color:var(--chu-mo); white-space:nowrap }
.tom-tat span:last-child{ text-align:right; word-break:break-word }
.dd-xong p{ color:var(--chu-mo); font-size:15px; margin-bottom:16px }
.dd-xong .nhom-nut{ justify-content:center }

/* Tra cứu đơn */
#tra-cuu{ padding-top:0 }
.tc-luoi{ display:grid; grid-template-columns:1fr 1.2fr; gap:24px; align-items:start }
.tc-luoi .nut{ margin-top:16px }
.tc-trang-thai{ display:inline-block; font-size:13px; font-weight:700; padding:3px 12px; border-radius:99px; background:var(--cam-nhat); color:#A3501A; margin-bottom:10px }
@media (max-width:860px){ .tc-luoi{ grid-template-columns:1fr } }

/* Đánh giá */
#danh-gia{ background:#fff; border-top:1px solid var(--vien) }
.dg-luoi{ display:grid; grid-template-columns:1fr 2fr; gap:20px; margin-bottom:28px }
.dg-the{ background:var(--nen); border:1px solid var(--vien); border-radius:var(--bo-goc); padding:24px }
.dg-tong{ text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center }
.dg-diem{ font-size:56px; font-weight:800; line-height:1 }
.dg-sao-lon{ font-size:26px; color:var(--vang); letter-spacing:2px; margin:8px 0 4px }
.dg-so-luot{ color:var(--chu-mo); font-size:14px; margin-bottom:16px }
.dg-thanh-wrap{ width:100%; display:grid; gap:6px }
.dg-thanh{ display:grid; grid-template-columns:28px 1fr 28px; align-items:center; gap:8px; font-size:13px; color:var(--chu-mo) }
.dg-thanh-nen{ height:8px; background:var(--xanh-nhat); border-radius:99px; overflow:hidden }
.dg-thanh-mau{ height:100%; background:var(--vang); border-radius:99px }
.dg-form h3{ margin-bottom:6px; font-size:18px }
.dg-chon-sao{ display:flex; align-items:center; gap:2px }
.dg-chon-sao button{ background:none; border:0; font-size:30px; color:var(--vien); cursor:pointer; padding:0 2px; transition:transform .15s,color .15s }
.dg-chon-sao button.sang{ color:var(--vang) }
.dg-chon-sao button:hover{ transform:scale(1.15) }
.dg-chon-sao span{ margin-left:10px; font-size:14px; color:var(--chu-mo) }
.dg-form .nut{ margin-top:16px }
.dg-bao{ margin-top:10px; font-size:14px; min-height:20px }
.dg-bao.loi{ color:var(--do) } .dg-bao.ok{ color:var(--xanh) }
.dg-loc{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px }
.dg-chip{ border:1px solid var(--vien); background:#fff; padding:6px 14px; border-radius:99px; cursor:pointer; font-size:14px; color:var(--chu) }
.dg-chip.dang-chon{ background:var(--xanh); border-color:var(--xanh); color:#fff }
.dg-ds{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px }
.dg-muc{ background:var(--nen); border:1px solid var(--vien); border-radius:var(--bo-goc); padding:18px }
.dg-dau{ display:flex; align-items:center; gap:12px; margin-bottom:10px }
.dg-avatar{ width:40px; height:40px; border-radius:50%; background:var(--cam-nhat); color:var(--cam); display:grid; place-items:center; font-weight:800; flex-shrink:0 }
.dg-ten{ font-weight:700 } .dg-phu{ font-size:12px; color:var(--chu-mo) }
.dg-sao-nho{ color:var(--vang); letter-spacing:1px; margin-bottom:6px }
.dg-nd{ white-space:pre-line; word-break:break-word }
.dg-trong{ grid-column:1/-1; text-align:center; color:var(--chu-mo); padding:32px; border:1px dashed var(--vien); border-radius:var(--bo-goc) }
.dg-xem-them{ display:block; margin:20px auto 0 }
@media (max-width:760px){ .dg-luoi{ grid-template-columns:1fr } }

/* Chân trang */
.chan{ background:var(--xanh); color:#E3EFE7; padding:36px 0; font-size:14px }
.chan .khung{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap }
.chan b{ color:#fff; font-size:17px }
.chan .sdt{ font-size:15px }