/* ============================================================================
   DAS DESIGN DNA v4 - bộ khung dùng CHUNG cho mọi trang khách của DAS
   Nguồn: "DAS · Design DNA — Hướng Dẫn Thiết Kế.md" (DAS - DESIGN/Design DNA Guideline)

   VÌ SAO MỘT FILE: trước 28/07 mỗi trang tự chép CSS riêng (datlich tông kem, plus tông kem
   khác, mau-tin tông tối) - ba trang của cùng một thương hiệu mà nhìn như ba công ty. Nay
   token nằm một chỗ, sửa một lần là cả nhà đổi theo.

   BẢN TỐI là mặc định cho trang khách: đây là khách coaching cao cấp, hướng dẫn ghi rõ
   "form/đăng ký = card trên nền tối", và logo đại bàng vàng chỉ nổi trên nền tối.
   ============================================================================ */

:root{
  --void:#07090F; --base:#0A0D15; --raise:#10141F; --raise2:#161B29; --hair:#232A3A;
  --gold100:#F6DE9B; --gold200:#EBC873; --gold:#E0B24A; --gold600:#C6912F; --gold800:#9A6E20;
  --goldink:#F6DE9B; --hi:#FBFAF7; --tx:#EDECE7; --mut:#A3A7B4; --dim:#6B7080;
  --pos:#5FBE7E; --neg:#E0705E;
  --foil:linear-gradient(135deg,#F6DE9B,#E0B24A 42%,#B9832B 72%,#EBC873);
  --pill:linear-gradient(180deg,#F1D78A,#E0B24A 55%,#C6912F);
  --card-sh:none;
}

*{ box-sizing:border-box; margin:0; padding:0 }

body{
  font-family:'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(58% 38% at 50% 0%, rgba(224,178,74,.07), transparent 62%),
    var(--base);
  color:var(--tx); min-height:100vh; line-height:1.6;
  display:flex; justify-content:center; padding:26px 14px 56px;
  -webkit-font-smoothing:antialiased;
}
.wrap{ width:100%; max-width:460px }

h1,h2,h3{ text-wrap:balance; font-weight:800; letter-spacing:-.4px; color:var(--hi) }
p{ text-wrap:pretty }
a{ color:var(--goldink) }

/* ---- Đầu trang: logo đại bàng ---- */
.logo{ text-align:center; margin-bottom:22px }
.logo img{ width:54px; height:54px; display:block; margin:0 auto 9px }
.logo b{ display:block; font-family:'Sora',sans-serif; font-size:12px; font-weight:600;
         letter-spacing:3.4px; color:var(--goldink); text-transform:uppercase }
.logo span{ display:block; font-size:12.5px; color:var(--mut); margin-top:5px }

/* ---- Thẻ ---- */
.card{ background:var(--raise); border:1px solid var(--hair); border-radius:20px;
       padding:24px; margin-bottom:16px; box-shadow:var(--card-sh) }
.card h1{ font-size:20px; margin-bottom:6px }
.sub{ font-size:13.5px; color:var(--mut); margin-bottom:18px }

/* nhãn mục giữa trang */
h2.muc{ font-family:'Sora',sans-serif; font-size:11px; font-weight:600; letter-spacing:2.6px;
        text-transform:uppercase; color:var(--mut); margin:28px 0 12px; padding-left:2px }

/* ---- Ô nhập ---- */
label{ display:block; font-family:'Sora',sans-serif; font-size:10.5px; font-weight:500;
       letter-spacing:2px; text-transform:uppercase; color:var(--mut); margin:18px 0 7px }
input[type=text], input[type=email], input[type=tel], textarea, select{
  width:100%; padding:12px 14px; background:var(--raise2); color:var(--tx);
  border:1px solid var(--hair); border-radius:10px; outline:none;
  font-family:'Be Vietnam Pro',sans-serif; font-size:14.5px }
textarea{ min-height:112px; resize:vertical; line-height:1.6 }
input:focus, textarea:focus, select:focus{ border-color:var(--gold600) }
input::placeholder, textarea::placeholder{ color:var(--dim) }

/* ---- Nút ---- */
button{ width:100%; margin-top:22px; padding:13px 26px; border:0; border-radius:100px;
        background:var(--pill); color:#241804; cursor:pointer;
        font-family:'Be Vietnam Pro',sans-serif; font-size:14.5px; font-weight:600;
        box-shadow:0 8px 24px rgba(224,178,74,.26) }
button:disabled{ opacity:.42; cursor:default; box-shadow:none }
/* chỉ MỘT nút vàng mỗi màn - nút phụ dùng viền */
button.phu{ background:transparent; color:var(--goldink); border:1px solid var(--gold600);
            box-shadow:none }
button.ghost{ background:transparent; color:var(--tx); border:1px solid var(--hair);
              box-shadow:none }

/* ---- Ô chọn (giờ, xưng hô) ---- */
.slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px }
.slots-2{ grid-template-columns:repeat(2,1fr) }
.slot{ padding:11px 0; text-align:center; border:1px solid var(--hair); border-radius:10px;
       font-size:14.5px; cursor:pointer; background:var(--raise2); color:var(--tx); user-select:none }
.slot:hover{ border-color:var(--gold800) }
.slot.on{ background:var(--pill); border-color:transparent; color:#241804; font-weight:600 }

/* ---- Ghi chú, lỗi ---- */
.hint{ font-size:12.5px; color:var(--dim); margin-top:8px }
.err{ display:none; margin-top:14px; font-size:13.5px; color:var(--neg); text-align:center }
.okline{ font-size:12.5px; color:var(--pos); margin-top:8px }

/* ---- Nhãn trạng thái ---- */
.badge{ flex:none; font-family:'Sora',sans-serif; font-size:10.5px; font-weight:600;
        letter-spacing:.6px; padding:5px 11px; border-radius:100px; white-space:nowrap;
        background:rgba(224,178,74,.14); color:var(--goldink); border:1px solid var(--gold800) }
.badge.ok{ background:rgba(95,190,126,.13); color:var(--pos); border-color:#2c5c3d }
.badge.late{ background:rgba(224,112,94,.13); color:var(--neg); border-color:#6b3229 }

@media (max-width:420px){
  body{ padding:20px 12px 44px }
  .card{ padding:20px 18px }
}