/* ===== Bảng đặt hàng kiểu sàn (theo ladi BW08) — tông nâu kem ===== */
:root{ --ck:#6b3d1f; --ck-dark:#4a2c18; --ck-soft:#f6efe6; --ck-line:#ece3d8; --ck-ok:#2e8b57; }

/* Ẩn thanh sticky cũ của mẫu, thay bằng thanh mua mới */
.sticky-cta{ display:none !important; }
body{ padding-bottom:76px; }

/* Thẻ tóm tắt ở mục đặt hàng */
.oc-card{ max-width:760px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:0; background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 14px 40px rgba(74,44,24,.12); }
@media(min-width:720px){ .oc-card{ grid-template-columns:300px 1fr; } }
.oc-card > img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; }
.oc-body{ padding:22px 22px 24px; }
.oc-name{ font-weight:800; font-size:18px; color:var(--ck-dark); margin-bottom:12px; }
.oc-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border:1px solid var(--ck-line); border-radius:12px; margin-bottom:8px; font-size:15px; }
.oc-row b{ font-family:'Times New Roman',Georgia,serif; font-size:20px; color:var(--ck-dark); }
.oc-row.hot{ background:var(--ck-soft); border-color:#dcc6ad; }
.oc-row em{ font-style:normal; font-size:11px; font-weight:700; color:#fff; background:var(--ck); padding:2px 7px; border-radius:20px; margin-left:6px; }
.oc-list{ list-style:none; margin:12px 0 16px; display:grid; gap:6px; font-size:14px; color:#4a4a50; }
.oc-list li::before{ content:'✓'; color:var(--ck-ok); font-weight:800; margin-right:8px; }
.oc-btn{ display:block; width:100%; border:0; cursor:pointer; color:#fff; border-radius:12px; padding:12px; background:linear-gradient(135deg,#a0622f,#6b3d1f); box-shadow:0 8px 20px rgba(107,61,31,.3); font:inherit; }
.oc-btn span{ display:block; font-size:17px; font-weight:800; letter-spacing:.04em; }
.oc-btn small{ display:block; font-size:12px; opacity:.9; }

/* Thanh mua dưới đáy */
.buybar{ position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; align-items:center; gap:12px; background:#fff; border-top:1px solid var(--ck-line); padding:8px 12px calc(8px + env(safe-area-inset-bottom)); box-shadow:0 -6px 20px rgba(0,0,0,.06); }
.bb-price{ flex:0 0 auto; line-height:1.15; }
.bb-price b{ display:block; font-family:'Times New Roman',Georgia,serif; font-size:22px; color:var(--ck-dark); }
.bb-price small{ font-size:12px; color:var(--ck); font-weight:600; }
.bb-buy{ flex:1; border:0; cursor:pointer; color:#fff; border-radius:10px; padding:8px 12px; background:linear-gradient(135deg,#a0622f,#6b3d1f); font:inherit; animation:bbPulse 1.4s ease-in-out infinite; }
.bb-buy .t{ display:block; font-size:17px; font-weight:800; letter-spacing:.03em; }
.bb-buy small{ display:block; font-size:11px; opacity:.9; }
@keyframes bbPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(160,98,47,.45); } 50%{ box-shadow:0 0 0 8px rgba(160,98,47,0); } }
@media(min-width:900px){ .buybar{ justify-content:center; } .bb-buy{ flex:0 0 360px; } }

/* Lớp phủ + bảng */
.mask{ position:fixed; inset:0; background:rgba(20,12,6,.5); z-index:60; opacity:0; pointer-events:none; transition:opacity .2s; }
.mask.show{ opacity:1; pointer-events:auto; }
.sheet{ position:fixed; left:0; right:0; bottom:0; z-index:70; max-width:480px; margin:0 auto; background:#fff; max-height:92vh; overflow-y:auto; overscroll-behavior:contain; transform:translateY(105%); transition:transform .28s ease; padding-bottom:env(safe-area-inset-bottom); border-radius:16px 16px 0 0; font-size:14px; color:#222; }
.sheet.show{ transform:none; }
@media(min-width:900px){ .sheet{ bottom:auto; top:50%; transform:translateY(-40%) scale(.98); opacity:0; pointer-events:none; border-radius:16px; transition:transform .25s ease, opacity .2s; max-height:90vh; } .sheet.show{ transform:translateY(-50%); opacity:1; pointer-events:auto; } }
.sh-top{ display:flex; gap:12px; padding:14px; border-bottom:1px solid var(--ck-line); position:sticky; top:0; background:#fff; z-index:2; }
.sh-top img{ width:88px; height:88px; object-fit:cover; border-radius:10px; border:1px solid var(--ck-line); }
.sh-price{ font-family:'Times New Roman',Georgia,serif; font-weight:700; font-size:26px; color:var(--ck-dark); line-height:1.1; }
.sh-sub{ font-size:13px; color:#666; margin-top:3px; }
.sh-sub b{ color:var(--ck-dark); }
.sh-x{ margin-left:auto; align-self:flex-start; background:none; border:0; color:#999; font-size:28px; line-height:1; padding:0 4px; cursor:pointer; }
.sh-sec{ padding:14px; border-bottom:1px solid var(--ck-line); }
.sh-sec:last-child{ border-bottom:0; }
.sh-sec h4{ font-size:14px; font-weight:700; color:var(--ck-dark); margin-bottom:10px; }

.packs{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pack{ position:relative; border:1.5px solid var(--ck-line); background:#fff; border-radius:12px; padding:12px 10px; text-align:center; cursor:pointer; font:inherit; transition:.15s; }
.pack b{ display:block; font-size:15px; color:#222; }
.pack span{ display:block; font-family:'Times New Roman',Georgia,serif; font-weight:700; font-size:19px; color:var(--ck-dark); margin-top:2px; }
.pack i{ position:absolute; top:-9px; left:50%; transform:translateX(-50%); white-space:nowrap; font-style:normal; font-size:10.5px; font-weight:700; color:#fff; background:var(--ck); padding:2px 8px; border-radius:20px; }
.pack.on{ border-color:var(--ck); background:var(--ck-soft); box-shadow:0 4px 14px rgba(107,61,31,.15); }
.qty{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; font-size:13px; color:#666; }
.step{ display:flex; border:1px solid #ddd; border-radius:8px; overflow:hidden; }
.step button{ width:34px; height:32px; font-size:18px; color:#555; background:#fafafa; border:0; cursor:pointer; }
.step input{ width:46px; border:0; border-left:1px solid #ddd; border-right:1px solid #ddd; text-align:center; font:inherit; font-size:15px; }
.promo{ display:flex; gap:8px; margin-top:12px; padding:10px 12px; border-radius:10px; background:#fbf6ef; border:1px dashed #d8bf9f; font-size:13px; line-height:1.45; color:#4a3a2c; }
.promo.ok{ background:#eef7f0; border:1px solid #bfe0c8; color:#235c38; }

.f{ margin-bottom:12px; position:relative; }
.f label{ display:block; font-size:13px; color:#555; margin-bottom:5px; }
.f input,.f select,.f textarea{ width:100%; border:1px solid #ddd; border-radius:8px; padding:11px 12px; font:inherit; font-size:16px; background:#fff; color:#222; }
.f textarea{ resize:vertical; min-height:64px; }
.f input:focus,.f select:focus,.f textarea:focus{ outline:0; border-color:var(--ck); box-shadow:0 0 0 3px rgba(107,61,31,.1); }
.f .err{ display:none; color:#c0392b; font-size:12px; margin-top:4px; }
.f.bad input,.f.bad select,.f.bad textarea{ border-color:#c0392b; }
.f.bad .err{ display:block; }
.loc{ display:flex; align-items:center; gap:6px; width:100%; justify-content:center; border:1px dashed var(--ck); color:var(--ck); background:var(--ck-soft); padding:10px; border-radius:8px; font:inherit; font-size:14px; margin-bottom:8px; cursor:pointer; }
.loc:disabled{ opacity:.6; }
.ac-wrap{ position:relative; }
.ac{ position:absolute; left:0; right:0; top:100%; z-index:5; background:#fff; border:1px solid #ddd; border-top:0; list-style:none; margin:0; padding:0; max-height:240px; overflow-y:auto; box-shadow:0 8px 16px rgba(0,0,0,.08); border-radius:0 0 8px 8px; }
.ac li{ padding:9px 10px; border-top:1px solid #f0f0f0; font-size:13px; cursor:pointer; line-height:1.35; }
.ac li:first-child{ border-top:0; }
.ac li b{ display:block; font-weight:600; font-size:14px; }
.ac li span{ color:#888; }
.ac li.on,.ac li:hover{ background:var(--ck-soft); }
.ac .src{ font-size:10px; color:#aaa; text-align:right; cursor:default; padding:4px 8px; }
.hint{ font-size:12px; color:var(--ck-ok); margin-top:5px; }
.hint.warn{ color:#b26a00; }

.sum{ display:flex; justify-content:space-between; padding:4px 0; font-size:13.5px; color:#555; }
.sum .disc{ color:var(--ck-ok); font-weight:600; }
.sum.total{ font-size:15px; color:#222; font-weight:700; padding-top:10px; margin-top:6px; border-top:1px dashed var(--ck-line); }
.sum.total b{ font-family:'Times New Roman',Georgia,serif; color:var(--ck-dark); font-size:24px; }
.submit{ display:block; width:100%; border:0; cursor:pointer; color:#fff; border-radius:10px; padding:11px 12px; margin-top:12px; line-height:1.3; font:inherit; background:linear-gradient(135deg,#a0622f,#6b3d1f); box-shadow:0 8px 20px rgba(107,61,31,.28); }
.submit .s1{ display:block; font-size:16px; font-weight:800; letter-spacing:.03em; }
.submit .s2{ display:block; font-size:12px; opacity:.92; }
.submit:disabled{ opacity:.6; }
.trust{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; color:#555; font-size:12px; margin-top:10px; }
.trust span{ display:flex; align-items:center; gap:4px; }
.trust i{ font-style:normal; display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; background:var(--ck-ok); color:#fff; font-size:10px; font-weight:700; }

.done{ display:none; padding:30px 18px; text-align:center; }
.done.show{ display:block; }
.done .ck{ width:64px; height:64px; border-radius:50%; background:var(--ck-ok); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-size:34px; }
.done h3{ font-size:19px; font-weight:800; color:var(--ck-dark); margin-bottom:6px; }
.done p{ color:#555; margin-bottom:6px; line-height:1.5; }
.done .box{ text-align:left; background:var(--ck-soft); padding:12px 14px; border-radius:10px; margin:14px 0; font-size:13.5px; line-height:1.6; }