/* ============================================================
   CAO LÊN VIỆT NAM — Bộ nhận diện
   Đỏ sáng #E11B2E · Đỏ đậm #B31324 · Vàng đất #C58D34
   Ivory #FBF6F1 · Beige #F0E4D6 · Than #1A1A1C
   Phông: Be Vietnam Pro
   ============================================================ */
:root{
  --red:#e11b2e;
  --red-dark:#b31324;
  --red-light:#ff3b4e;
  --gold:#c58d34;
  --gold-light:#e0b25f;
  --ivory:#fbf6f1;
  --beige:#f0e4d6;
  --charcoal:#1a1a1c;
  --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:"Montserrat","Segoe UI",system-ui,sans-serif;
  color:var(--charcoal); -webkit-font-smoothing:antialiased;
}
.font-display,.font-heading,.font-body{font-family:"Montserrat","Segoe UI",system-ui,sans-serif !important}
.font-display{letter-spacing:-.015em}

/* ---------- Nền tối sang trọng (trang đăng nhập) ---------- */
.bg-luxe-dark{
  background:
    radial-gradient(1200px 600px at 78% 40%, rgba(197,141,52,.16), transparent 60%),
    radial-gradient(900px 500px at 12% 8%, rgba(225,27,46,.5), transparent 55%),
    linear-gradient(135deg,#1c0a0c 0%,#2e0f13 45%,#120607 100%);
  position:relative; overflow:hidden;
}
.bg-luxe-dark::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 60% 30%, rgba(224,178,95,.9), transparent),
    radial-gradient(1.5px 1.5px at 72% 55%, rgba(224,178,95,.7), transparent),
    radial-gradient(1px 1px at 80% 20%, rgba(224,178,95,.8), transparent),
    radial-gradient(1px 1px at 66% 70%, rgba(224,178,95,.6), transparent),
    radial-gradient(2px 2px at 85% 45%, rgba(224,178,95,.5), transparent);
}

/* ---------- Logo tròn (dùng ảnh logo thật) ---------- */
.coin{
  background-image:url("../img/logo.jpg");
  background-size:cover; background-position:center;
  background-color:var(--red);
  box-shadow:0 2px 8px rgba(0,0,0,.25); flex:0 0 auto;
  font-size:0 !important;   /* ẩn chữ "CL↑" cũ, chỉ hiện ảnh */
  overflow:hidden;
}

/* ---------- Nút ---------- */
.btn-red{
  background:linear-gradient(135deg,var(--red) 0%,var(--red-dark) 100%);
  color:#fff; box-shadow:0 10px 26px -10px rgba(225,27,46,.6);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-red:hover{transform:translateY(-2px); box-shadow:0 16px 32px -10px rgba(225,27,46,.7); filter:brightness(1.06)}
.btn-red:disabled{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none}
.btn-gold{
  background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold) 100%);
  color:#3a2410; box-shadow:0 8px 22px -10px rgba(197,141,52,.6);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-gold:hover{transform:translateY(-2px)}
.btn-outline{
  border:1px solid rgba(0,0,0,.12); background:#fff; color:var(--charcoal);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn-outline:hover{border-color:var(--gold); box-shadow:0 6px 16px -8px rgba(0,0,0,.2); transform:translateY(-1px)}

/* ---------- Ô nhập ---------- */
.field{
  width:100%; border:1px solid rgba(0,0,0,.12); background:#fff; border-radius:12px;
  padding:13px 15px; font-size:15px; font-family:inherit; color:var(--charcoal);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(197,141,52,.15)}
.field.with-icon{padding-left:44px}
.field-wrap{position:relative}
.field-icon{position:absolute; left:15px; top:50%; transform:translateY(-50%); color:#9a8f80}

/* ---------- Gạch chân nav ---------- */
.nav-link{position:relative; padding-bottom:4px; transition:color .15s ease}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--gold); transition:width .2s ease;
}
.nav-link:hover::after,.nav-link.active::after{width:100%}

/* ---------- Thanh tiến độ ---------- */
.progress-track{height:8px; background:var(--beige); border-radius:999px; overflow:hidden}
.progress-fill{height:100%; background:linear-gradient(90deg,var(--red),var(--gold)); border-radius:999px}

/* ---------- Thẻ bài học ---------- */
.lesson-card{
  display:flex; align-items:center; gap:16px; padding:16px 18px;
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; margin-bottom:12px;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lesson-card:hover{transform:translateY(-2px); box-shadow:0 14px 30px -18px rgba(0,0,0,.4); border-color:rgba(225,27,46,.35)}
.lesson-card.locked{opacity:.6; cursor:not-allowed; background:#faf7f4}
.lesson-card.locked:hover{transform:none; box-shadow:none; border-color:rgba(0,0,0,.06)}
.lesson-card.next{border-color:var(--gold); box-shadow:0 0 0 3px rgba(197,141,52,.2)}
.lesson-ic{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  font-size:22px; background:rgba(225,27,46,.08); flex:0 0 auto;
}
.lesson-card.locked .lesson-ic{background:rgba(0,0,0,.05)}
.lesson-card.next .lesson-ic{background:linear-gradient(135deg,rgba(225,27,46,.14),rgba(197,141,52,.2))}

/* ---------- Nhãn ---------- */
.chip{display:inline-block; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; white-space:nowrap}
.chip-red{background:rgba(225,27,46,.1); color:var(--red-dark)}
.chip-gold{background:rgba(197,141,52,.16); color:#8a6416}
.chip-gray{background:rgba(0,0,0,.06); color:#5d5d63}
.chip-green{background:#dcfce7; color:#166534}

/* ---------- Nội dung bài học ---------- */
.lesson-body h3{margin:22px 0 8px; color:var(--red-dark); font-weight:700}
.lesson-body p{margin:10px 0}
.lesson-body ul{margin:10px 0; padding-left:22px}
.lesson-body li{margin:5px 0}
.lesson-body table{width:100%; border-collapse:collapse; margin:14px 0; font-size:14px}
.lesson-body th{background:var(--charcoal); color:#fff; text-align:left; padding:10px 12px; font-size:12.5px}
.lesson-body td{padding:10px 12px; border-bottom:1px solid rgba(0,0,0,.08)}
.callout{border-left:4px solid var(--red); background:rgba(225,27,46,.06); padding:13px 16px; border-radius:0 12px 12px 0; margin:14px 0}
.callout.tip{border-color:#16a34a; background:#f0fdf4}
.callout.warn{border-color:var(--gold); background:#fffbeb}
.lesson-frame{width:100%; height:640px; border:1px solid rgba(0,0,0,.1); border-radius:16px; background:#fff}
.video-embed{position:relative; padding-bottom:56.25%; height:0; margin:14px 0}
.video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:16px}

/* ---------- Checklist ---------- */
ul.chk{list-style:none; padding:0; margin:0}
ul.chk li{
  padding:13px 16px; border:1px solid rgba(0,0,0,.1); border-radius:12px;
  margin-bottom:8px; cursor:pointer; background:#fff; transition:all .15s ease;
}
ul.chk li::before{content:"⬜ "}
ul.chk li.on{background:#f0fdf4; border-color:#16a34a}
ul.chk li.on::before{content:"✅ "}

/* ---------- Bài kiểm tra ---------- */
.quizblk{padding:18px 0; border-bottom:1px solid rgba(0,0,0,.07)}
.quizblk:last-of-type{border-bottom:0}
.quiz-q{font-weight:600; margin-bottom:12px}
.qopt{
  display:block; width:100%; text-align:left; padding:12px 15px;
  border:1px solid rgba(0,0,0,.12); border-radius:12px; margin:7px 0;
  background:#fff; cursor:pointer; font-family:inherit; font-size:14.5px; color:var(--charcoal);
  transition:all .12s ease;
}
.qopt:hover:not(:disabled){border-color:var(--red); background:rgba(225,27,46,.04)}
.qopt.picked{border-color:var(--red); background:rgba(225,27,46,.08); font-weight:600}
.qopt.correct{border-color:#16a34a; background:#f0fdf4}
.qopt.wrong{border-color:var(--red); background:#fef2f2}
.qopt:disabled{cursor:default}
.qfb{display:none; font-size:13.5px; margin-top:8px; color:#5d5d63}
.qfb.show{display:block}

/* ---------- Bảng quản trị ---------- */
.tbl{width:100%; border-collapse:collapse; font-size:14px}
.tbl th{background:var(--charcoal); color:#fff; text-align:left; padding:11px 13px; font-size:12.5px; font-weight:700}
.tbl td{padding:11px 13px; border-bottom:1px solid rgba(0,0,0,.07); vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--ivory)}

/* ---------- Tab quản trị ---------- */
.tab-btn{
  padding:9px 18px; border-radius:12px; font-size:14px; font-weight:600;
  background:#fff; border:1px solid rgba(0,0,0,.1); color:#5d5d63; cursor:pointer; font-family:inherit;
}
.tab-btn.tab-active{background:linear-gradient(135deg,var(--red),var(--red-dark)); color:#fff; border-color:transparent}

/* ---------- Hỏi đáp / chat ---------- */
.chat-box{max-height:380px; overflow-y:auto; padding:4px 2px}
.chat-empty{text-align:center; color:var(--text-2); font-size:14px; padding:24px 10px}
.msg{display:flex; margin-bottom:10px}
.msg .bubble{max-width:78%; padding:10px 13px; border-radius:14px; font-size:14px; line-height:1.5; white-space:pre-wrap; word-break:break-word}
.msg .meta{font-size:11px; color:var(--text-2); margin-top:3px}
.msg.staff{justify-content:flex-end}
.msg.staff .bubble{background:linear-gradient(135deg,var(--red),var(--red-dark)); color:#fff; border-bottom-right-radius:4px}
.msg.staff .meta{text-align:right}
.msg.admin{justify-content:flex-start}
.msg.admin .bubble{background:#fff; border:1px solid var(--border); color:var(--charcoal); border-bottom-left-radius:4px}
.msg .who{font-size:11px; font-weight:700; margin-bottom:3px; opacity:.85}
.chat-input{display:flex; gap:10px; align-items:flex-end; margin-top:12px}
.chat-input textarea{flex:1; resize:none}

/* ---------- Thông báo ---------- */
.alert{padding:12px 16px; border-radius:12px; margin-bottom:14px; font-size:14px}
.alert.err{background:#fef2f2; color:#991b1b; border:1px solid #fecaca}
.alert.ok{background:#f0fdf4; color:#166534; border:1px solid #bbf7d0}

@media (max-width:640px){
  .lesson-frame{height:460px}
  .lesson-card{padding:13px 14px; gap:12px}
  .lesson-ic{width:44px; height:44px; font-size:19px}
}