/* ============================================================
   File: assets/css/skin-sang.css
   Mô tả: SKIN SÁNG DÙNG CHUNG cho toàn bộ phần mềm hội thi
          (LED · Thư ký · Ban Giám khảo · Đội thi · Trang chủ)

   Nguyên tắc:
   - Nền sáng xanh nhạt → vàng kem, chữ đậm (navy/đỏ) để nổi bật.
   - Không dùng nền tối: đưa lên màn hình lớn sẽ bị bết màu.
   - Tệp này nạp SAU led.css / theme.css / team.css nên ghi đè được.

   Nạp: <link rel="stylesheet" href="assets/css/skin-sang.css">
   ============================================================ */

/* ---------- 1. Bảng màu sáng ---------- */
:root {
    /* Bộ biến của màn hình LED */
    --bg-0: #eaf4ff;
    --bg-1: #f3faff;
    --bg-2: #fff8e6;
    --bg-3: #ffeec2;

    --gold: #B57B00;
    --gold-bright: #D99400;
    --gold-deep: #7A5200;
    --gold-glow: rgba(217, 148, 0, .18);

    --ink: #0B2A5B;
    --ink-soft: #1D3F73;
    --ink-dim: #4A6690;

    --ok: #157F3D;
    --ok-soft: rgba(21, 127, 61, .10);
    --bad: #C62828;
    --bad-soft: rgba(198, 40, 40, .08);
    --warn: #A86200;

    --glass-bg: rgba(255, 255, 255, .78);
    --glass-bg-strong: rgba(255, 255, 255, .92);
    --glass-line: rgba(30, 111, 224, .28);
    --glass-line-soft: rgba(30, 111, 224, .16);
    --shadow-deep: 0 14px 38px rgba(11, 42, 91, .14);

    /* Bộ biến của các trang nghiệp vụ */
    --blue:          #1E6FE0;
    --blue-deep:     #14539F;
    --blue-darkest:  #0B3A7A;
    --blue-mid:      #2F80EA;
    --blue-border:   #8DBBF7;
    --blue-pale:     #C9E0FF;
    --blue-tint:     #E3EEFF;
    --blue-bg:       #eef6ff;
    --blue-hover:    #e3eeff;
    --grey-800:      #17325A;
    --grey-900:      #0B2A5B;
}

/* ---------- 2. Nền sáng cho màn hình LED ---------- */
html, body {
    background: linear-gradient(160deg, #eaf4ff 0%, #f7fbff 42%, #fff7e2 100%) !important;
    color: var(--ink) !important;
}

/* Nền các màn câu hỏi: sáng, sạch, chỉ chút ánh xanh - vàng để có chiều sâu */
.bg-art {
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(111, 180, 255, .40) 0%, transparent 58%),
        radial-gradient(90% 60% at 90% 100%, rgba(255, 214, 102, .34) 0%, transparent 60%) !important;
    opacity: 1 !important;
    filter: none !important;
    animation: none !important;
}
/* Các lớp hiệu ứng tối cũ: tắt hẳn để nền sáng, sạch */
.bg-silk,
.bg-particles,
.bg-vignette { display: none !important; }

/* ---------- 3. Màn chào mừng: dùng nguyên ảnh maket làm nền ---------- */
#screen-welcome {
    background: url('../img/bg/hero-hoithi.jpg') center / cover no-repeat !important;
    padding: 0 !important;
}
/* Ảnh maket đã có sẵn tiêu đề → ẩn phần chữ trùng lặp, chỉ giữ dải đội thi + thể lệ */
#screen-welcome .welcome-badge,
#screen-welcome .welcome-title,
#screen-welcome .welcome-main,
#screen-welcome .welcome-theme,
#screen-welcome .welcome-org,
#screen-welcome .welcome-sub {
    display: none !important;
}
#screen-welcome .welcome-wrap {
    justify-content: flex-end !important;
    padding: 0 clamp(16px, 2.5vw, 42px) clamp(14px, 2.2vh, 30px) !important;
    gap: clamp(8px, 1.2vh, 16px) !important;
}
/* Dải dưới cùng: nền trắng mờ để đọc tên đội và thể lệ trên ảnh */
#screen-welcome .team-grid,
#screen-welcome .welcome-rounds {
    position: relative; z-index: 2;
    background: rgba(255, 255, 255, .90);
    border-radius: 16px;
    padding: clamp(8px, 1.2vh, 16px) clamp(12px, 1.6vw, 26px);
    box-shadow: 0 10px 28px rgba(11, 42, 91, .18);
    width: 100%;
    max-width: 1500px;
}
#screen-welcome .r-chip,
#screen-welcome .team-card {
    background: #ffffff !important;
    color: var(--ink) !important;
    border-color: rgba(30, 111, 224, .30) !important;
    text-shadow: none !important;
}
#screen-welcome .team-card * { color: var(--ink) !important; text-shadow: none !important; }

/* ---------- 4. Khối kính mờ → thẻ trắng sáng ---------- */
.glass,
.q-text,
.option,
.explain,
.judging-wrap,
.goiy-hop,
.pkg-card,
.turn-item,
.team-card,
.speed-card {
    background: var(--glass-bg-strong) !important;
    border: 1px solid var(--glass-line) !important;
    color: var(--ink) !important;
    box-shadow: 0 10px 26px rgba(11, 42, 91, .10) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: none !important;
}

/* Đáp án: nền trắng, chữ đậm, viền xanh */
.option {
    background: #ffffff !important;
    border: 3px solid #CFE1F7 !important;
}
.option .opt-lb {
    background: var(--blue) !important;
    color: #ffffff !important;
}
.option.is-correct,
.option.correct {
    background: linear-gradient(135deg, #FFF3C4, #FFE07A) !important;
    border-color: #D99400 !important;
    color: #6B4A00 !important;
}

/* ---------- 5. Tiêu đề, nhãn, đồng hồ ---------- */
.q-badge,
.score-head h2,
.speed-title,
.final-formula,
.judging-title,
.explain-head {
    color: var(--blue-darkest) !important;
    text-shadow: none !important;
}
.q-progress { color: var(--ink-soft) !important; }
.rule-note { color: var(--ink-dim) !important; text-shadow: none !important; }

/* Đồng hồ: nền đỏ đậm, chữ trắng — tương phản mạnh trên nền sáng */
.q-timer {
    background: linear-gradient(135deg, #E23B3B, #B71C1C) !important;
    color: #ffffff !important;
    border-color: rgba(0, 0, 0, .12) !important;
    box-shadow: 0 8px 20px rgba(183, 28, 28, .28) !important;
    text-shadow: none !important;
}
.q-timer.done {
    background: #E7EDF6 !important;
    color: var(--ink-dim) !important;
    box-shadow: none !important;
}

/* ---------- 6. Trang nghiệp vụ (thư ký · BGK · đội thi · trang chủ) ---------- */
body.theme-app {
    background: linear-gradient(160deg, #eef6ff 0%, #f8fcff 45%, #fff9ea 100%) !important;
    color: var(--grey-800) !important;
}
body.theme-kiosk {
    background: linear-gradient(160deg, #eaf4ff 0%, #f7fbff 45%, #fff7e2 100%) !important;
    color: var(--ink) !important;
}

/* Thanh trên cùng: xanh sáng, không dùng navy đậm */
.topbar {
    background: linear-gradient(135deg, #2F80EA, #5AA9FF) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(30, 111, 224, .22) !important;
}
.topbar .logout { border-color: rgba(255, 255, 255, .75) !important; }

/* Header card: xanh sáng, chữ trắng, bo góc mềm */
.card-k > .chd {
    background: linear-gradient(135deg, #3B8BF0, #6FB4FF) !important;
    color: #ffffff !important;
}
.card-k > .chd.ch-gold {
    background: linear-gradient(135deg, #FFD34D, #F5B300) !important;
    color: #4A3300 !important;
}
.card-k > .chd.ch-green {
    background: linear-gradient(135deg, #45C07A, #2E9E5B) !important;
}
.card-k > .chd.ch-grey {
    background: linear-gradient(135deg, #8FA6C4, #6E88AB) !important;
}
.card-k > .chd.ch-dark {
    background: linear-gradient(135deg, #3B8BF0, #1E6FE0) !important;
}

/* Ô nhập điểm, bảng: nền trắng, chữ đậm, viền nhạt */
.tbl th {
    background: #EAF3FF !important;
    color: var(--blue-darkest) !important;
    border-bottom: 2px solid #CFE1F7 !important;
}
.tbl td { border-bottom: 1px solid #E6EEF8 !important; }
.tbl tbody tr:hover { background: #F2F8FF !important; }

.score-inp {
    background: #ffffff !important;
    border: 2px solid #CFE1F7 !important;
    color: var(--ink) !important;
    border-radius: 8px;
}

/* Tab: nền trắng, tab đang chọn xanh đậm chữ trắng */
.nav-pills .nav-link { background: #ffffff !important; border-color: #DCE9F9 !important; }
.nav-pills .nav-link.active { background: var(--blue) !important; color: #ffffff !important; }

/* Cảnh báo / banner: nền pastel, chữ đậm */
.alert-ac { background: #EAF3FF !important; color: #123560 !important; }
.alert-ac.alert-warn { background: #FFF6DA !important; color: #6B4A00 !important; }
.alert-ac.alert-ok   { background: #E4F7EC !important; color: #0F5132 !important; }
.alert-ac.alert-bad  { background: #FDECEC !important; color: #842029 !important; }

.chip-info    { background: #E3EEFF !important; color: #14539F !important; }
.chip-warn    { background: #FFF3C4 !important; color: #6B4A00 !important; }

/* ---------- 7. Lớp phủ đáp án gợi ý: nền sáng, không dùng scrim tối ---------- */
.goiy-overlay {
    background: rgba(234, 244, 255, .92) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}
.goiy-hop {
    background: #ffffff !important;
    border: 2px solid rgba(30, 111, 224, .28) !important;
    box-shadow: 0 18px 50px rgba(11, 42, 91, .18) !important;
}
.goiy-dau {
    color: #B57B00 !important;
    border-bottom: 2px dashed rgba(30, 111, 224, .35) !important;
}
.goiy-chu {
    color: #0B2A5B !important;
    font-size: clamp(15px, 2.45vmin, 40px) !important;
    line-height: 1.5 !important;
}
/* Mỗi nội dung gợi ý là một đoạn riêng, thụt đầu dòng 1 cm */
.goiy-chu .goiy-p {
    margin: 0 0 .55em 0;
    text-indent: 1cm;
    line-height: 1.52;
    text-align: justify;
}
.goiy-chu .goiy-p:last-child { margin-bottom: 0; }
.goiy-chan {
    color: #14539F !important;
    border-top: 2px dashed rgba(30, 111, 224, .35) !important;
}

/* ---------- 8. Ẩn hoàn toàn trợ lý ảo Bảo Ngọc ---------- */
#ai-orb,
#ai-unlock,
.ai-orb,
.ai-unlock { display: none !important; visibility: hidden !important; }