/* ═══ Website Mộc Chài — giao diện bản 21/09/2026: ảnh lớn, chữ to, song ngữ ═══ */
:root{
  --paper:#F8F2E4; --paper2:#EFE4CD; --card:#FDFAF2; --white:#FFFDF8;
  --ink:#2A1E14; --ink2:#5A452F; --muted:#7C7267; --line:#DFD0B2; --line2:#C7B189;
  --wood:#3A2415; --wood2:#1F1207; --on-wood:#F5ECD9;
  --straw:#B08D57; --straw-dk:#8A6334; --on-straw:#241408; --moss:#4F5E45; --moss-soft:#E4E7D9;
  --display:'Playfair Display','Noto Serif',Georgia,serif;
  --body:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --co:1;
}
*{box-sizing:border-box}
[hidden]{display:none!important}                          /* thẻ ẩn luôn ẩn, kể cả khi lớp CSS đặt display */
html{font-size:calc(17px * var(--co));scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.08rem;line-height:1.7;padding-bottom:78px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;line-height:1.16;text-wrap:balance}
p{margin:0}
a{color:var(--straw-dk)}
img{max-width:100%}
:focus-visible{outline:3px solid var(--straw-dk);outline-offset:3px;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.nhan{font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;color:var(--straw-dk);font-weight:600}
.sec{padding:clamp(48px,7vw,86px) 0}
.sec h2{font-size:clamp(1.9rem,5vw,2.9rem);margin:12px 0 16px}
.mo{font-size:1.1rem;color:var(--ink2);max-width:60ch}
.nen2{background:var(--paper2)}
.mt{margin-top:34px}
.nut{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:58px;padding:15px 26px;border-radius:3px;background:var(--straw);color:var(--on-straw);font-weight:600;font-size:1.02rem;text-decoration:none;border:0;cursor:pointer;font-family:var(--body)}
.nut:hover{background:var(--straw-dk);color:#FFF8EA}
.nut.to{font-size:1.12rem;min-height:64px}
.nut.vien{background:transparent;border:2px solid var(--line2);color:var(--ink)}
.nut.sang{border-color:rgba(244,234,214,.55);color:#F7EEDC}
.nut.sang:hover{background:rgba(244,234,214,.14);color:#FFF8EA}
.nuts{display:flex;flex-wrap:wrap;gap:12px}

/* đầu trang */
.bao{background:var(--wood2);color:var(--on-wood);text-align:center;padding:11px 16px;font-size:.98rem}
.tren{position:sticky;top:0;z-index:40;background:rgba(248,242,228,.97);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.2) blur(6px)}
.tren-in{display:flex;align-items:center;gap:18px;min-height:76px}
.hieu{display:flex;flex-direction:column;line-height:1.1;text-decoration:none}
.hieu span{font-family:var(--display);font-size:1.5rem;letter-spacing:.16em;color:var(--wood);font-weight:600}
.hieu small{font-size:.6rem;letter-spacing:.3em;color:var(--muted);margin-top:4px}
.hieu img{display:block;height:56px;width:auto}                    /* logo ngang bộ nhận diện 21/09 */
.chan-logo{display:block;height:56px;width:auto;margin-bottom:10px}
.dh{display:flex;gap:22px;margin-left:auto}
.dh a{color:var(--ink);text-decoration:none;font-weight:500;white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent}
.dh a:hover{border-bottom-color:var(--straw)}
.ngu{display:flex;border:1px solid var(--line2);border-radius:999px;overflow:hidden;flex:none}
.ngu button{min-height:40px;padding:6px 14px;border:0;background:transparent;color:var(--ink2);font-family:var(--body);font-weight:700;font-size:.92rem;letter-spacing:.06em;cursor:pointer}
.ngu button[aria-pressed="true"]{background:var(--wood);color:var(--on-wood)}
.tren .nut{min-height:48px;padding:11px 18px;font-size:.98rem;white-space:nowrap}
.chips{display:none;gap:10px;overflow-x:auto;padding:0 22px 12px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips a{flex:0 0 auto;text-decoration:none;color:var(--ink);background:var(--paper2);border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:.95rem}

/* banner */
.hero{position:relative;min-height:min(88vh,820px);display:flex;align-items:flex-end;overflow:hidden}
.hero-anh{position:absolute;inset:0;z-index:0;background:url("anh/nha-go-hoa-giay.jpg") center 45%/cover;background-image:image-set(url("anh/nha-go-hoa-giay.webp") type("image/webp"), url("anh/nha-go-hoa-giay.jpg") type("image/jpeg"))}
.hero-mo{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(24,14,6,.52) 0%,rgba(24,14,6,.34) 30%,rgba(24,14,6,.6) 70%,rgba(24,14,6,.9) 100%);opacity:.92}
.hero-video,.hero-yt{position:absolute;z-index:0;border:0;pointer-events:none;opacity:0;transition:opacity .9s ease}
.hero-video{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero-yt{top:50%;left:50%;transform:translate(-50%,-50%)}
.hero-video.chay,.hero-yt.chay{opacity:1}
.hero-chay{position:absolute;z-index:4;top:14px;right:14px;width:46px;height:46px;padding:0;border-radius:50%;
 border:1px solid rgba(255,248,230,.55);background:rgba(28,17,8,.42);color:#FCF6E9;font-size:15px;line-height:1;
 display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hero-chay:hover{background:rgba(28,17,8,.62)}
.hero-chay[hidden]{display:none!important}
body.dang-sua .hero-chay{display:none}
.hero-in{position:relative;z-index:2;padding:40px 22px 44px;color:#FCF6E9;width:100%}
.hero .nhan{color:#F0DDB8;text-shadow:0 1px 10px rgba(18,9,3,.6)}
.hero h1{font-size:clamp(2.5rem,8vw,4.6rem);margin:.22em 0;color:#FFFBF0;max-width:15ch;text-shadow:0 2px 22px rgba(18,9,3,.6),0 1px 4px rgba(18,9,3,.45)}
.hero .phu{font-size:clamp(1.1rem,2.6vw,1.4rem);color:#F7EEDC;max-width:40ch;text-shadow:0 1px 12px rgba(18,9,3,.6)}
.hero .nuts{margin-top:28px}
.y{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;color:#F2E5C9;font-size:1rem;text-shadow:0 1px 10px rgba(18,9,3,.6)}
.y > span{display:flex;align-items:center;gap:9px}
.y i{width:7px;height:7px;border-radius:50%;background:var(--straw);flex:none}

/* dải số */
.dai{background:var(--wood);color:var(--on-wood)}
.dai-in{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:34px 22px}
.dai-in > div{display:flex;flex-direction:column;gap:4px}
.dai-in b{font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.6rem);color:#EBD6AE;font-weight:500;line-height:1}
.dai-in span{font-size:.98rem;color:#DCCBAB}

/* thẻ món ảnh lớn */
.luoi4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:34px}
.the-mon{display:flex;flex-direction:column;gap:10px}
.the-mon .im{aspect-ratio:4/5;background:var(--wood) url("anh/go-thuyen-cu.jpg") center/cover;background-image:image-set(url("anh/go-thuyen-cu.webp") type("image/webp"), url("anh/go-thuyen-cu.jpg") type("image/jpeg"));border-radius:3px;position:relative}
.the-mon h3{font-size:1.35rem;margin-top:4px}
.the-mon p{color:var(--ink2);font-size:1rem}
.the-mon .gia{color:var(--straw-dk);font-weight:600}

/* ảnh mặc định khác nhau cho từng thẻ (đổi được bằng nút “Đổi ảnh” trong trình sửa) */
.luoi4 .the-mon:nth-child(1) .im{background-image:url("anh/nha-go-hoa-giay.jpg");background-image:image-set(url("anh/nha-go-hoa-giay.webp") type("image/webp"), url("anh/nha-go-hoa-giay.jpg") type("image/jpeg"));background-position:30% 40%}
.luoi4 .the-mon:nth-child(2) .im{background-image:url("anh/loi-gach-tan-cay.jpg");background-image:image-set(url("anh/loi-gach-tan-cay.webp") type("image/webp"), url("anh/loi-gach-tan-cay.jpg") type("image/jpeg"))}
.luoi4 .the-mon:nth-child(3) .im{background-image:url("anh/go-thuyen-cu.jpg");background-image:image-set(url("anh/go-thuyen-cu.webp") type("image/webp"), url("anh/go-thuyen-cu.jpg") type("image/jpeg"))}
.luoi4 .the-mon:nth-child(4) .im{background-image:url("anh/nha-go-hoa-giay.jpg");background-image:image-set(url("anh/nha-go-hoa-giay.webp") type("image/webp"), url("anh/nha-go-hoa-giay.jpg") type("image/jpeg"));background-position:80% 55%}
.chuong article:nth-child(2) .im{background-image:url("anh/go-thuyen-cu.jpg");background-image:image-set(url("anh/go-thuyen-cu.webp") type("image/webp"), url("anh/go-thuyen-cu.jpg") type("image/jpeg"))}
.chuong article:nth-child(3) .im{background-image:url("anh/van-thuyen-cho-ghep.jpg");background-image:image-set(url("anh/van-thuyen-cho-ghep.webp") type("image/webp"), url("anh/van-thuyen-cho-ghep.jpg") type("image/jpeg"))}

/* khối nền gỗ */
.toi{background:var(--wood);color:var(--on-wood)}
.toi .nhan{color:#E2C48E}
.toi .mo{color:#E7D9BE}
.toi h2,.toi h3{color:#FDF6E7}
.hai-cot{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);gap:clamp(24px,4vw,54px);align-items:center}
.anh-lon{aspect-ratio:4/5;background:#2A1A0E url("anh/loi-gach-tan-cay.jpg") center/cover;background-image:image-set(url("anh/loi-gach-tan-cay.webp") type("image/webp"), url("anh/loi-gach-tan-cay.jpg") type("image/jpeg"));border-radius:3px}
.bang-lon{margin-top:34px;height:clamp(200px,32vw,380px);background:#2A1A0E url("anh/nha-go-hoa-giay.jpg") center 55%/cover;background-image:image-set(url("anh/nha-go-hoa-giay.webp") type("image/webp"), url("anh/nha-go-hoa-giay.jpg") type("image/jpeg"));border-radius:3px}
.ba3{list-style:none;counter-reset:n;margin:26px 0 0;padding:0;display:grid;gap:18px}
.ba3 > li{display:grid;grid-template-columns:52px 1fr;column-gap:16px;align-items:start}
.ba3 > li > *{grid-column:2}
.ba3 > li::before{grid-row:span 2;counter-increment:n;content:counter(n);display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid rgba(226,196,142,.5);color:#E2C48E;font-family:var(--display);font-size:1.3rem}
.ba3 h3{font-size:1.2rem;margin-bottom:4px}
.ba3 p{color:#E7D9BE}

/* thẻ chữ */
.luoi3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.the{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--straw);border-radius:3px;padding:22px}
.the h3{font-size:1.25rem;margin-bottom:8px}
.the p{color:var(--ink2)}
.chuong article .im{aspect-ratio:3/2;background:var(--wood) url("anh/loi-gach-tan-cay.jpg") center/cover;background-image:image-set(url("anh/loi-gach-tan-cay.webp") type("image/webp"), url("anh/loi-gach-tan-cay.jpg") type("image/jpeg"));border-radius:3px;margin-bottom:14px}
.chuong h3{font-size:1.3rem;margin-bottom:6px}
.chuong p{color:var(--ink2)}
.chuong{margin-top:32px}
.trich{margin:38px auto 0;max-width:34ch;text-align:center;font-family:var(--display);font-size:clamp(1.3rem,3vw,1.75rem);color:var(--wood);font-style:italic;border:0}

/* chọn cỡ nhóm */
.nhom-hop{margin-top:30px;background:var(--card);border:1px solid var(--line);border-radius:3px;padding:24px}
.nhom-hoi{font-weight:600;margin-bottom:12px}
.co-nhom{display:flex;flex-wrap:wrap;gap:10px}
.co-nhom button{min-height:54px;padding:12px 20px;border:2px solid var(--line2);background:transparent;border-radius:3px;font-family:var(--body);font-size:1.02rem;font-weight:600;color:var(--ink);cursor:pointer}
.co-nhom button[aria-pressed="true"]{background:var(--straw);border-color:var(--straw);color:var(--on-straw)}
.nhom-kq{margin-top:18px;border-top:1px solid var(--line);padding-top:18px}
.nhom-kq h3{font-size:1.3rem;margin-bottom:6px}
.nhom-kq p{color:var(--ink2)}
.nhom-kq .nuts{margin-top:16px}

/* thực đơn — chữ co giãn theo khối, không tràn */
.menu-nhom{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 8px}
.menu-nhom a{text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:.98rem}
.menu-nhom a:hover{background:var(--straw);color:var(--on-straw);border-color:var(--straw)}
#menu-ds{margin-top:18px}
.nhom{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:clamp(18px,2.4vw,28px);margin-bottom:20px;container-type:inline-size}
.nhom-dau{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}
.nhom-ten{font-size:1.5em;margin-bottom:4px}
.nhom-gt{color:var(--ink2);font-size:.98em}
.nhom-mon{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:16px 34px}
.mon{padding:10px 0;border-bottom:1px dotted var(--line);min-width:0}
.mon-dong{display:flex;align-items:baseline;gap:8px;min-width:0}
.mon-ten{font-weight:600;overflow-wrap:anywhere}
.mon-cham{flex:1 1 12px;border-bottom:1px dotted var(--line2);min-width:12px;transform:translateY(-4px)}
.mon-gia{color:var(--straw-dk);font-weight:600;white-space:nowrap}
.mon-mota{color:var(--muted);font-size:.94em;margin-top:2px;overflow-wrap:anywhere}
.mon-dat{margin-top:8px}
.dat-them{min-height:42px;padding:8px 16px;border-radius:999px;border:1.5px solid var(--straw);background:transparent;color:var(--straw-dk);font-family:var(--body);font-weight:600;font-size:.95rem;cursor:pointer}
.dat-them:hover{background:var(--straw);color:var(--on-straw)}
.dat-hoi{font-size:.95rem}

/* set */
.set{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--straw);border-radius:3px;padding:24px;display:flex;flex-direction:column;gap:8px}
.set h3{font-size:1.45rem}
.set .cho{color:var(--muted);font-size:.98rem}
.set .gia{font-family:var(--display);font-size:1.55rem;color:var(--straw-dk)}
.set ul{margin:8px 0 0;padding-left:20px;color:var(--ink2)}
.set li{margin-bottom:5px}
.set-dat{margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;gap:10px}
#sets{margin-top:30px}

/* ưu đãi — thu thập thông tin khách */
.uudai-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,4vw,54px);align-items:center}
.ud-form{background:var(--card);border-radius:3px;padding:clamp(20px,3vw,30px);display:grid;gap:14px;color:var(--ink)}
.ud-form label{display:flex;flex-direction:column;gap:6px;font-weight:600}
.ud-form input:not([type=checkbox]){min-height:56px;padding:12px 14px;border:1px solid var(--line2);border-radius:3px;font-family:var(--body);font-size:1.05rem;background:var(--white)}
.ud-tick{flex-direction:row !important;align-items:flex-start;gap:10px;font-weight:400;font-size:.98rem;color:var(--ink2)}
.ud-tick input{width:24px;height:24px;flex:none;margin-top:3px}
.ud-kq{min-height:1.4em;font-weight:600}
.ud-kq.ok{color:var(--moss)}
.ud-kq.loi{color:#8E3B1E}
.ud-nho{font-size:.94rem}
.ud-ma{display:inline-block;margin-top:6px;background:var(--moss-soft);border:1px dashed var(--moss);border-radius:3px;padding:8px 14px;font-family:var(--display);font-size:1.3rem;letter-spacing:.12em;color:var(--wood)}

/* đặt bàn, đường đi, chân trang */
.goi-hop{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:clamp(24px,4vw,44px)}
.goi-hop .nuts{margin-top:22px}
.goi-hop .ghi{margin-top:16px;color:var(--muted);font-size:.98rem}
.tt{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:30px}
.tt h3{font-size:1.15rem;margin-bottom:8px}
.tt p{color:var(--ink2)}
.tt .nut{margin-top:12px}
.chan{background:var(--wood2);color:var(--on-wood);padding:44px 0 18px;margin-top:0}
.chan a{color:#EBD6AE}
.chan-in{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
.chan-ten{font-family:var(--display);font-size:1.5rem;letter-spacing:.16em;margin-bottom:6px}
.chan-nut{display:flex;flex-wrap:wrap;gap:10px}
.chinhsach{margin-top:26px;border-top:1px solid rgba(226,196,142,.25);padding-top:16px;font-size:.96rem;color:#DCCBAB}
.chinhsach summary{cursor:pointer;font-weight:600;color:#EBD6AE}
.chinhsach p{margin-top:10px;max-width:80ch}
.chan-duoi{text-align:center;margin-top:22px;font-size:.9rem;color:#B9A588}

/* thanh dính dưới cùng */
.day{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(3,1fr);background:var(--wood2);border-top:1px solid rgba(226,196,142,.3)}
.day a,.day button{display:flex;align-items:center;justify-content:center;min-height:62px;color:#F5ECD9;text-decoration:none;font-family:var(--body);font-size:1.02rem;font-weight:600;background:transparent;border:0;border-left:1px solid rgba(226,196,142,.18);cursor:pointer}
.day a:first-child{border-left:0}
.day button{background:var(--straw);color:var(--on-straw)}

@media (max-width:1000px){
  .luoi4{grid-template-columns:repeat(2,1fr)}
  .hai-cot,.uudai-in{grid-template-columns:1fr}
  .anh-lon{aspect-ratio:3/2}
  .tt{grid-template-columns:repeat(2,1fr)}
  .dai-in{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media (max-width:760px){
  .dh{display:none}
  .chips{display:flex}
  .tren-in{min-height:66px;gap:12px}
  .tren .nut{display:none}
  .hieu span{font-size:1.25rem}
  .hieu img{height:44px}
  .luoi3,.chuong{grid-template-columns:1fr}
  .the-mon .im{aspect-ratio:3/2}
  .hero{min-height:74vh}
  .hero-in{padding:28px 22px 34px}
}
@media (max-width:480px){
  .luoi4{grid-template-columns:1fr}
  .tt{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.phan-an{display:none!important}                         /* phần Sếp bấm Ẩn trong trình sửa */
[data-anh]:not(.hero-anh){position:relative}               /* chỗ đặt nút “Đổi ảnh” */
@media (max-width:1099px){ .dh{display:none} .chips{display:flex} }
@media (max-width:1099px){ html{scroll-padding-top:140px} }   /* đầu trang có thêm hàng nút → chừa chỗ cho neo */
@media (min-width:1000px){ .day{display:none} body{padding-bottom:0} }

/* sổ khách trong trình sửa */
.qt-khach-bang{overflow-x:auto;margin-top:10px}
.qt-khach-bang table{border-collapse:collapse;width:100%;font-size:.95rem;background:var(--card)}
.qt-khach-bang th,.qt-khach-bang td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.qt-khach-bang th{background:var(--paper2);font-weight:600;white-space:nowrap}

/* ═══════════ TRÌNH SỬA TRANG ═══════════ */
.qt-thanh{position:sticky;top:0;z-index:200;background:#1d1208;color:#F4EAD6;border-bottom:3px solid var(--straw);padding:8px 14px;font-size:15px;line-height:1.3}
.qt-hang1{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.qt-thanh b.qt-td{font-family:var(--display);font-size:16px;color:#E9CC94;margin-right:6px}
.qt-nhom{display:inline-flex;align-items:center;gap:4px;padding:3px 6px;border:1px solid rgba(226,204,163,.28);border-radius:4px}
.qt-nh{font-size:12px;color:#CDB795;margin-right:2px;white-space:nowrap}
.qt-thanh button{min-height:36px;min-width:36px;padding:5px 11px;border-radius:3px;border:1px solid rgba(226,204,163,.45);background:transparent;color:#F4EAD6;font-family:var(--body);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.qt-thanh button:hover{background:rgba(226,204,163,.15)}
.qt-thanh button.chinh{background:var(--straw);border-color:var(--straw);color:var(--on-straw)}
.qt-thanh button.bat{background:#E9CC94;color:#241408;border-color:#E9CC94}
#qt-co,#qt-ten-o{font-size:13px;color:#E9CC94;min-width:44px;text-align:center}
#qt-ten-o{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}
.qt-goiy{margin-top:6px;font-size:13px;color:#CDB795}
.qt-goiy #qt-tt{color:#F4EAD6;font-weight:600}
body.dang-sua{padding-bottom:0}
body.dang-sua .tren{position:relative}
body.dang-sua .thanh{display:none}
body.dang-sua .menu-nhom{position:relative;top:0}
body.dang-sua [data-o]{cursor:pointer}
body.dang-sua [data-o]:hover{outline:1px dashed rgba(176,141,87,.8);outline-offset:2px}
body.dang-sua [contenteditable="true"]{cursor:text}
body.dang-sua [contenteditable="true"]:focus{outline:2px solid var(--straw-dk);outline-offset:2px;background:rgba(255,248,230,.18)}
body.dang-sua .dang-chon{outline:3px solid #E0A63A!important;outline-offset:3px}
body.xep [data-o]{cursor:move;user-select:none}
body.xep [data-o]:hover{outline:2px dashed #E0A63A}
.qt-goc{position:absolute;right:-9px;bottom:-9px;width:18px;height:18px;border-radius:50%;background:#E0A63A;border:2px solid #fff;cursor:nwse-resize;z-index:30;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.qt-phan{position:absolute;top:-44px;left:0;right:0;height:44px;z-index:150;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end;padding:6px 14px;background:rgba(29,18,8,.92);color:#F4EAD6;font-size:13px}
.qt-phan b{margin-right:auto;font-weight:600;color:#E9CC94}
.qt-phan button{min-height:32px;padding:4px 10px;border-radius:3px;border:1px solid rgba(226,204,163,.45);background:transparent;color:#F4EAD6;font-family:var(--body);font-size:13px;cursor:pointer}
body.dang-sua .phan-an{display:block!important;opacity:.35}
body.dang-sua section.phan-an .qt-phan{opacity:1}
.qt-banner{position:absolute;top:58px;right:14px;z-index:5;display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:rgba(29,18,8,.9);border:1px solid rgba(226,204,163,.45);border-radius:6px;color:#F4EAD6;font-size:13px;width:250px}
.qt-banner label{display:flex;flex-direction:column;gap:2px}
.qt-banner input[type=range]{height:28px;margin:0}
.qt-anh{position:absolute;right:12px;bottom:12px;z-index:6;min-height:44px;padding:8px 16px;border:0;border-radius:3px;background:var(--straw);color:var(--on-straw);font-family:var(--body);font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.qt-bang{background:var(--white);border:2px solid var(--straw);border-radius:6px;padding:18px 20px;margin:16px 0}
.qt-bang h3{font-size:1.25rem;margin-bottom:10px}
.qt-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px 18px}
.qt-bang label{display:flex;flex-direction:column;gap:4px;font-weight:500;font-size:.95rem}
.qt-bang input{min-height:48px;padding:10px 12px;border:1px solid var(--line2);border-radius:3px;font-size:1rem;font-family:var(--body);background:var(--paper)}
.qt-hang{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 6px}
.qt-them{min-height:46px;padding:8px 16px;border:2px dashed var(--straw-dk);border-radius:4px;background:#FFF8EA;color:var(--straw-dk);font-family:var(--body);font-weight:600;cursor:pointer}
.qt-them.to{width:100%;margin-top:18px;min-height:56px}
.qt-xoa{min-height:38px;padding:6px 12px;margin-top:8px;border:1px solid #C9A38F;border-radius:3px;background:#FBEDE6;color:#8E3B1E;font-family:var(--body);font-size:.9rem;cursor:pointer}

/* thanh từng phần nằm trên mép phần, không đè nội dung */
body.dang-sua > section{position:relative;border-top:44px solid #1d1208}
body.dang-sua > section.hero{border-top:0}
body.dang-sua > section.hero > .qt-phan{top:0}

/* ═══════════ ĐẶT MÓN · GIỎ · THANH TOÁN ═══════════ */
.mon-dat{margin-top:8px}
.dat-them{min-height:46px;padding:8px 20px;border-radius:999px;border:2px solid var(--straw-dk);background:#FFF8EA;color:var(--straw-dk);font-family:var(--body);font-weight:700;font-size:1rem;cursor:pointer}
.dat-them:hover{background:var(--straw);color:var(--on-straw);border-color:var(--straw)}
.dat-hoi{display:inline-block;font-size:.95rem;font-weight:600;padding:6px 0}
.set-dat{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.set .set-dat .nut{width:auto;margin-top:0;flex:1 1 140px}
.set .dat-them{border-radius:3px;border:0;background:var(--straw);color:var(--on-straw)}
.dat-thanh{position:fixed;left:12px;right:12px;bottom:84px;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 18px;background:var(--wood);color:var(--on-wood);border:2px solid var(--straw);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.3);max-width:720px;margin:0 auto}
.dat-thanh .nut{min-height:48px;white-space:nowrap}
.dat-thanh-chu{font-size:1rem}
@media (min-width:860px){ .dat-thanh{bottom:18px} }
body.dang-sua .dat-thanh{display:none!important}
.dat-bao{position:fixed;left:50%;top:16px;transform:translate(-50%,-160%);z-index:130;background:var(--moss);color:#fff;padding:10px 18px;border-radius:999px;font-weight:600;transition:transform .25s;pointer-events:none;max-width:90vw;text-align:center}
.dat-bao.hien{transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){ .dat-bao{transition:none} }
body.khoa-cuon{overflow:hidden}
.dat-lop{position:fixed;inset:0;z-index:120;background:rgba(20,12,6,.55);display:flex;justify-content:flex-end}
.dat-hop{background:var(--paper);width:min(580px,100%);height:100%;display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(0,0,0,.3)}
.dat-dau{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;background:var(--wood);color:var(--on-wood)}
.dat-dau b{font-family:var(--display);font-size:1.35rem;font-weight:500}
.dat-dong{min-height:44px;padding:6px 16px;border:1px solid rgba(226,204,163,.5);border-radius:3px;background:transparent;color:var(--on-wood);font-family:var(--body);font-size:1rem;cursor:pointer}
.dat-noi{flex:1;overflow-y:auto;padding:16px 18px 30px}
.dat-noi h3{font-size:1.25rem;margin:22px 0 10px}
.dat-mon{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.dat-ten{grid-column:1/-1}
.dat-ten b{display:block;font-weight:600;overflow-wrap:anywhere}
.dat-ten small{color:var(--muted);font-size:.92rem}
.dat-sl{display:flex;align-items:center;gap:6px}
.dat-sl button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:var(--white);font-size:1.35rem;line-height:1;cursor:pointer;color:var(--ink)}
.dat-sl span{min-width:56px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.dat-tt{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.dat-tong{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 4px;font-size:1.1rem}
.dat-tong b{font-family:var(--display);font-size:1.45rem;color:var(--straw-dk);font-variant-numeric:tabular-nums}
.dat-luuy{font-size:.93rem;color:var(--ink2);margin-top:6px}
.dat-trong{color:var(--ink2);padding:8px 0;background:var(--white);border:1px dashed var(--line2);border-radius:6px;padding:12px 14px}
.dat-chon{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:8px}
.dat-chon button{min-height:58px;padding:8px 10px;border:2px solid var(--line2);border-radius:6px;background:var(--white);font-family:var(--body);font-size:1rem;font-weight:600;color:var(--ink);cursor:pointer}
.dat-chon button[aria-checked="true"]{background:var(--straw);border-color:var(--straw-dk);color:var(--on-straw)}
#dat-form{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.dat-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px}
#dat-form label{display:flex;flex-direction:column;gap:4px;font-weight:500;font-size:.98rem}
#dat-form input,#dat-form textarea{min-height:52px;padding:10px 12px;border:1px solid var(--line2);border-radius:4px;font-size:1.05rem;font-family:var(--body);background:var(--white);color:var(--ink);width:100%}
.dat-ttoan{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:14px 16px}
.dat-ttoan h3{margin:0 0 6px!important}
.dat-pt{display:flex;flex-direction:column;gap:6px}
#dat-form .dat-radio{flex-direction:row;align-items:center;gap:10px;min-height:44px;font-weight:500}
#dat-form .dat-radio input{width:24px;height:24px;min-height:0;flex:none}
.dat-dongy{font-size:.88rem;color:var(--muted);margin:14px 0}
.dat-gui{width:100%}
.dat-gui:disabled{opacity:.6;cursor:wait}
.dat-xong{display:flex;flex-direction:column;gap:14px}
.dat-ma{font-family:var(--display);font-size:2.3rem;letter-spacing:.12em;color:var(--wood);line-height:1}
.dat-ok{background:var(--moss-soft);border-left:4px solid var(--moss);padding:12px 14px;font-weight:600}
.dat-buoc{background:#FFF4DF;border:2px solid var(--straw);border-radius:6px;padding:14px}
.dat-buoc h3{margin:0 0 6px!important}
.dat-buoc .nuts{margin-top:10px}
.dat-ck{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:14px}
.dat-ck h3{margin:0 0 8px!important}
.dat-qr{display:flex;justify-content:center;padding:12px;background:#fff;border-radius:6px;margin:6px 0}
.dat-tk{display:grid;gap:8px;margin-top:8px}
.dat-tk small{display:block;color:var(--muted);font-size:.84rem}
.dat-tk b{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dat-chep{min-height:34px;margin-left:8px;padding:2px 12px;border:1px solid var(--line2);border-radius:3px;background:var(--white);font-family:var(--body);cursor:pointer}
.dat-canh{background:#FFF4DF;border-left:4px solid var(--straw);padding:10px 12px}
.dat-xem summary{cursor:pointer;font-weight:600;min-height:40px;display:flex;align-items:center}
.dat-xem pre{white-space:pre-wrap;font-family:var(--body);font-size:.92rem;background:var(--white);padding:10px;border-radius:4px;border:1px solid var(--line)}
.qt-bang .qt-hop{flex-direction:row;align-items:center;gap:10px;min-height:44px}
.qt-bang .qt-hop input{width:22px;height:22px;min-height:0}
.qt-bang select,.qt-bang textarea{min-height:48px;padding:10px 12px;border:1px solid var(--line2);border-radius:3px;font-size:1rem;font-family:var(--body);background:var(--paper);width:100%}

/* phần chuyển khoản hiện sẵn + nút mở app ngân hàng */
.dat-ck-truoc:empty{display:none}
.dat-ck-truoc{background:var(--white);border:2px solid var(--straw);border-radius:8px;padding:14px 16px;margin-top:14px}
.dat-ck-truoc h3{margin:0 0 8px!important}
.dat-app{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.dat-mo-app{width:100%}
.dat-app-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin:8px 0}
.dat-app-nut{display:flex;align-items:center;justify-content:center;min-height:52px;padding:6px 8px;border:1px solid var(--line2);border-radius:6px;background:var(--paper);color:var(--ink);font-weight:600;text-decoration:none;text-align:center;font-size:.95rem}
.dat-app-nut:active{background:var(--straw);color:var(--on-straw)}
.dat-app details summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.dat-nut-gui{display:flex;flex-direction:column;gap:10px}

/* hộp đăng nhập của trình sửa — dùng lại khung .dat-lop/.dat-hop, đặt giữa màn hình */
.qt-dn{justify-content:center;align-items:center;padding:16px}
.qt-dn .dat-hop{height:auto;max-height:100%;width:min(460px,100%);border-radius:4px}
.qt-dn .dat-noi p{margin:0 0 16px}
.qt-dn .dat-luuy{min-height:1.4em;margin:14px 0 0}
.qt-thanh .qt-ai{font-size:13px;color:#E9CC94;margin-right:4px;overflow-wrap:anywhere}

.mt-nho{margin-top:14px}