/* styles.css — Giao diện Hội thi trực tuyến xã Nam Phước 2026
   Bản nâng cấp: Digital Space / 3D nhẹ / công nghệ.
   Không dùng thư viện ngoài, không ảnh nền, không canvas/WebGL.
   Mục tiêu: đẹp + ổn định + tải nhanh cho hệ thống thi trực tuyến.
*/

:root{
  --primary:#07549a;
  --primary-2:#087fd0;
  --primary-3:#00b8ff;
  --cyan:#27dcff;
  --blue-deep:#031a38;
  --accent:#ff4b55;
  --accent-2:#ff8a45;
  --ink:#102c49;
  --muted:#61768d;
  --line:#d6e5f2;
  --surface:#f4f9fe;
  --white:#fff;
  --success:#0b956d;
  --shadow:0 24px 70px rgba(3,34,72,.18);
  --glow:0 0 24px rgba(39,220,255,.22);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Segoe UI",Roboto,Arial,sans-serif;
  min-height:100vh;
  padding:28px 16px;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 8%,rgba(0,164,255,.20),transparent 28%),
    radial-gradient(circle at 88% 22%,rgba(58,104,255,.15),transparent 25%),
    radial-gradient(circle at 75% 90%,rgba(0,207,255,.13),transparent 28%),
    linear-gradient(135deg,#eaf5ff 0%,#f8fbff 52%,#eaf4fd 100%);
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
  overflow-x:hidden;
}

/* Các lớp nền thuần CSS, rất nhẹ */
body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:-2;
  background-image:
    linear-gradient(rgba(4,106,180,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(4,106,180,.045) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 92%);
}
body:after{
  content:"";
  position:fixed;width:42vw;height:42vw;max-width:620px;max-height:620px;
  left:-18vw;bottom:-24vw;pointer-events:none;z-index:-1;
  border:1px solid rgba(0,170,255,.10);
  border-radius:50%;
  box-shadow:0 0 0 38px rgba(0,170,255,.025),0 0 0 76px rgba(0,170,255,.018);
}

.container{
  max-width:980px;
  margin:0 auto;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.95);
  border-radius:26px;
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
  isolation:isolate;
  transform:translateZ(0);
}
.container:before,
.container:after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
}
.container:before{
  width:360px;height:360px;right:-210px;top:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,190,255,.09),transparent 68%);
}
.container:after{
  width:260px;height:260px;left:-170px;bottom:100px;border-radius:50%;
  background:radial-gradient(circle,rgba(21,92,255,.07),transparent 68%);
}

/* =========================
   HEADER / DIGITAL SPACE
   ========================= */
.header{
  position:relative;
  text-align:center;
  color:#fff;
  padding:34px 30px 30px;
  min-height:245px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 38%,rgba(0,191,255,.22),transparent 27%),
    linear-gradient(135deg,#021b3a 0%,#063f78 44%,#057ab9 76%,#034c91 100%);
  border-bottom:2px solid rgba(44,224,255,.9);
  overflow:hidden;
  box-shadow:inset 0 -24px 55px rgba(0,10,35,.18);
}
.header:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:0;
  background:
    linear-gradient(115deg,transparent 18%,rgba(42,224,255,.08) 18.2%,transparent 18.5%),
    linear-gradient(65deg,transparent 69%,rgba(42,224,255,.08) 69.2%,transparent 69.5%);
  pointer-events:none;
}
.header:after{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:-78px;
  height:155px;
  border:1px solid rgba(45,220,255,.22);
  border-radius:50%;
  box-shadow:
    0 0 0 18px rgba(45,220,255,.035),
    0 0 0 38px rgba(45,220,255,.025),
    0 0 0 60px rgba(45,220,255,.018);
  transform:perspective(420px) rotateX(58deg);
  pointer-events:none;
}

/* Lưới 3D */
.tech-grid{
  position:absolute;inset:-35%;
  opacity:.32;
  transform:perspective(520px) rotateX(62deg) translateY(18%);
  transform-origin:center bottom;
  background-image:
    linear-gradient(rgba(47,221,255,.20) 1px,transparent 1px),
    linear-gradient(90deg,rgba(47,221,255,.20) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to top,rgba(0,0,0,.95),transparent 75%);
  animation:gridDrift 18s linear infinite;
  pointer-events:none;
}
@keyframes gridDrift{
  from{transform:perspective(520px) rotateX(62deg) translateY(18%)}
  to{transform:perspective(520px) rotateX(62deg) translateY(25%)}
}

/* Quả cầu / lõi dữ liệu */
.orb{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle at 35% 30%,rgba(255,255,255,.75) 0 2%,transparent 3%),
    radial-gradient(circle at 42% 40%,rgba(0,221,255,.25),transparent 54%),
    radial-gradient(circle,transparent 55%,rgba(44,224,255,.35) 56%,transparent 58%);
  border:1px solid rgba(86,233,255,.28);
  box-shadow:0 0 35px rgba(0,196,255,.16),inset 0 0 28px rgba(0,178,255,.10);
}
.orb:after{
  content:"";
  position:absolute;inset:13%;
  border:1px dashed rgba(112,238,255,.35);
  border-radius:50%;
  transform:rotate(28deg) scaleY(.42);
}
.orb-a{width:190px;height:190px;right:-70px;top:-85px;animation:orbFloat 7s ease-in-out infinite}
.orb-b{width:105px;height:105px;left:-45px;bottom:20px;opacity:.65;animation:orbFloat 9s ease-in-out infinite reverse}
@keyframes orbFloat{50%{transform:translateY(10px) rotate(8deg)}}

.data-stream{
  position:absolute;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(59,230,255,.85),transparent);
  box-shadow:0 0 9px rgba(0,205,255,.5);
  opacity:.65;
  pointer-events:none;
  animation:streamMove 5s ease-in-out infinite;
}
.stream-a{width:230px;right:5%;top:34%;transform:rotate(-18deg)}
.stream-b{width:170px;left:4%;top:60%;transform:rotate(17deg);animation-delay:1.7s}
@keyframes streamMove{
  0%,100%{opacity:.25;transform:translateX(-18px) rotate(-18deg)}
  50%{opacity:.8;transform:translateX(18px) rotate(-18deg)}
}

.header>*:not(.tech-grid):not(.orb):not(.data-stream){
  position:relative;z-index:3;
}
.eyebrow{
  font-size:11px;font-weight:800;letter-spacing:2px;opacity:.95;margin-bottom:8px;
  text-shadow:0 0 12px rgba(56,225,255,.45);
}
.header h1{
  font-size:26px;line-height:1.15;font-weight:950;letter-spacing:.8px;margin-bottom:7px;
  text-shadow:0 3px 22px rgba(0,0,0,.24),0 0 22px rgba(55,221,255,.18);
}
.header-title{
  font-size:17px;line-height:1.4;font-weight:800;max-width:800px;margin:auto;
  letter-spacing:.15px;
}
.header-subtitle{
  font-size:12px;opacity:.92;margin-top:8px;letter-spacing:.8px;
  color:#d9f8ff;
}

/* Nội dung */
.content{
  padding:34px;
  position:relative;
  z-index:1;
}
.section-heading{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.section-icon{
  width:46px;height:46px;border-radius:15px;
  background:linear-gradient(135deg,#056db7,#05bce9);
  color:#fff;display:grid;place-items:center;font-size:21px;
  box-shadow:0 9px 24px rgba(0,113,190,.22),0 0 0 1px rgba(44,211,255,.22);
  transform:perspective(100px) rotateY(-8deg);
}
.section-heading h2{font-size:20px;color:var(--primary);margin-bottom:3px}
.section-heading p{font-size:13px;color:var(--muted)}

.welcome-card{
  display:flex;gap:13px;align-items:center;padding:16px 18px;
  border:1px solid #cfe6f6;
  background:
    linear-gradient(90deg,rgba(229,247,255,.94),rgba(248,252,255,.96)),
    repeating-linear-gradient(90deg,transparent 0 40px,rgba(0,153,220,.035) 41px 42px);
  border-radius:15px;margin-bottom:25px;
  box-shadow:0 7px 24px rgba(9,80,130,.06);
}
.welcome-icon{
  width:40px;height:40px;border-radius:12px;background:#dff5ff;
  display:grid;place-items:center;font-size:19px;flex:none;
  box-shadow:inset 0 0 18px rgba(0,180,255,.10);
}
.welcome-card strong,.welcome-card span{display:block}
.welcome-card strong{font-size:14px;color:var(--primary)}
.welcome-card span{font-size:12px;color:var(--muted);margin-top:3px}

.form-group{margin-bottom:19px}
.form-group label{display:block;margin-bottom:8px;font-weight:750;color:#29435c;font-size:14px}
.form-group label b,.prediction-field label b{color:var(--accent);margin-left:2px}
.form-group input,.form-group select{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:11px;
  background:#fbfdff;color:#17324d;font-size:15px;transition:border-color .2s,box-shadow .2s,background .2s;
  box-shadow:0 2px 8px rgba(20,50,80,.03)
}
.form-group input:hover,.form-group select:hover{border-color:#8ec8e7}
.form-group input:focus,.form-group select:focus{
  outline:none;border-color:#12a7dd;background:#fff;
  box-shadow:0 0 0 4px rgba(18,167,221,.10),0 0 20px rgba(0,178,255,.06)
}
.form-group input:disabled,.form-group select:disabled{background:#eef2f6!important}
.note-text{font-size:11.5px;color:#718096;margin-top:6px;line-height:1.45}
.action-note{text-align:center;color:#718096;font-size:11.5px;margin:20px 0 10px}

.btn{
  border:none;color:#fff;padding:14px 20px;font-size:15px;font-weight:800;border-radius:11px;
  cursor:pointer;width:100%;transition:transform .2s,box-shadow .2s,filter .2s;letter-spacing:.2px;
}
.btn i{font-style:normal;float:right;font-size:19px;line-height:14px}
.btn:hover{transform:translateY(-2px);filter:saturate(1.08)}
.btn:active{transform:translateY(0)}
.btn:disabled{background:#b7c0c9!important;cursor:not-allowed;transform:none;box-shadow:none;filter:none}
.btn-primary,.btn-submit{
  background:linear-gradient(100deg,#e33142,#ff5d3f 55%,#ff8842);
  box-shadow:0 11px 28px rgba(213,44,53,.22),0 0 18px rgba(255,91,65,.08);
}
.btn-secondary{background:#fff;color:var(--primary);border:1.5px solid #cbdbe8;box-shadow:none}
.btn-secondary:hover{background:#f2faff;border-color:#69b9dc;box-shadow:0 5px 14px rgba(30,70,100,.08)}

.exam-topbar{
  display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:18px;
  padding-bottom:15px;border-bottom:1px solid #e4edf5;
}
.exam-kicker{display:block;font-size:10px;letter-spacing:1.7px;color:#087fc1;font-weight:900;margin-bottom:4px}
.exam-topbar strong{font-size:16px;color:var(--ink)}
.timer{
  min-width:150px;background:#effaff;border:1px solid #91ddf4;color:#056d9d;
  padding:11px 14px;border-radius:12px;text-align:center;font-size:13px;font-weight:800;
  box-shadow:0 4px 16px rgba(0,130,180,.07),inset 0 0 15px rgba(0,205,255,.05);
}
.timer span{font-size:18px;margin-left:3px}
.timer.warning{background:#fff0f0;border-color:#f0aaaa;color:#a61b1b;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.65}}

.progress-meta{display:flex;justify-content:space-between;font-size:11px;color:#718096;margin-bottom:6px}
.progress-meta strong{color:var(--primary)}
.progress-bar{background:#e8eef4;border-radius:99px;height:9px;margin-bottom:19px;overflow:hidden}
.progress-fill{
  background:linear-gradient(90deg,#0675bd,#08bfe7,#37e2ff);
  height:100%;border-radius:99px;transition:width .3s;
  box-shadow:0 0 12px rgba(0,190,255,.30);
}

.question-nav{
  display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px;justify-content:flex-start;padding:12px;
  background:linear-gradient(135deg,#f3f9fd,#f9fcff);
  border:1px solid #dbeaf4;border-radius:13px;
}
.q-nav-btn{
  width:38px;height:34px;border:1.5px solid #d4e0ea;border-radius:8px;background:#fff;
  color:#50657a;cursor:pointer;font-weight:750;transition:.15s
}
.q-nav-btn:hover{border-color:#59b9dd;transform:translateY(-1px)}
.q-nav-btn.answered{background:#078864;color:#fff;border-color:#078864;box-shadow:0 0 10px rgba(0,155,105,.12)}
.q-nav-btn.current{
  border-color:#e53935;box-shadow:0 0 0 3px rgba(229,57,53,.13),0 0 15px rgba(229,57,53,.08);color:#c51f2d
}

.question-box{
  background:rgba(255,255,255,.97);padding:25px;border-radius:17px;margin-bottom:18px;
  border:1px solid #dce9f2;border-top:4px solid #087fbe;
  box-shadow:0 10px 30px rgba(25,58,90,.065);
  position:relative;overflow:hidden;
}
.question-box:after{
  content:"";position:absolute;right:-80px;top:-100px;width:190px;height:190px;border-radius:50%;
  border:1px solid rgba(0,171,225,.08);box-shadow:0 0 0 16px rgba(0,171,225,.025),0 0 0 34px rgba(0,171,225,.015);
  pointer-events:none;
}
.question-number{
  display:inline-block;color:#fff;
  background:linear-gradient(135deg,#056db2,#06a9db);
  padding:6px 10px;border-radius:7px;font-weight:800;margin-bottom:13px;font-size:12px;
  box-shadow:0 5px 13px rgba(0,117,180,.16)
}
.question-text{font-size:17px;line-height:1.65;margin-bottom:18px;color:#243b53;font-weight:650}
.options{display:flex;flex-direction:column;gap:10px}
.option{
  display:flex;align-items:flex-start;padding:13px 14px;background:#fbfdff;
  border:1.5px solid #dbe5ee;border-radius:11px;cursor:pointer;
  transition:border-color .18s,background .18s,transform .18s,box-shadow .18s;word-break:break-word;
}
.option:hover{border-color:#63b6d8;background:#f1faff;transform:translateX(2px)}
.option.selected{
  border-color:#0784c4;background:#eaf8fd;
  box-shadow:inset 4px 0 #0784c4,0 5px 15px rgba(0,123,185,.06)
}
.option input{margin:3px 12px 0 1px;transform:scale(1.15);flex-shrink:0;accent-color:#0784c4}
.option label{cursor:pointer;flex:1;line-height:1.5;color:#334e68}
.option label strong{color:#0676b4;margin-right:5px}

.nav-buttons{display:flex;gap:10px;margin-top:18px}
.nav-buttons .btn{flex:1;padding:12px}
.submit-box{
  background:
    radial-gradient(circle at 90% 0%,rgba(0,188,235,.08),transparent 35%),
    linear-gradient(135deg,#f2f9fd,#fbfdff);
  padding:20px;border-radius:15px;margin-top:20px;
  border:1px solid #d7e6f1;border-left:4px solid #e53935;
  box-shadow:0 8px 22px rgba(30,70,100,.045);
}
.submit-heading{display:flex;gap:11px;align-items:center;margin-bottom:15px}
.submit-heading>span{font-size:22px}
.submit-heading strong,.submit-heading small{display:block}
.submit-heading strong{color:#28445c;font-size:14px}
.submit-heading small{color:#718096;font-size:11px;margin-top:2px}
.prediction-field{margin-bottom:13px}.prediction-field input{font-size:16px}
.exam-note{background:#fff8e8;color:#8a620b;padding:10px 12px;border-radius:9px;border:1px solid #f2dfad;text-align:center;font-size:11px;margin-top:11px}

.result-box{text-align:center;padding:25px 10px}
.result-icon{
  width:70px;height:70px;margin:0 auto 14px;border-radius:50%;
  background:linear-gradient(135deg,#0b956d,#26c48f);color:#fff;display:grid;place-items:center;
  font-size:36px;font-weight:900;box-shadow:0 12px 28px rgba(22,132,91,.2)
}
.result-box h2{color:var(--primary);margin-bottom:16px;font-size:21px}
.result-score{font-size:58px;font-weight:900;color:var(--primary);line-height:1.05}
.result-text{font-size:15px;color:#60758a;margin:13px 0 20px}
.result-details{
  background:#f7fafc;padding:20px;border:1px solid #e0e8ef;border-radius:13px;
  margin-top:15px;text-align:left;display:inline-block;min-width:min(100%,520px)
}
.hidden{display:none!important}
.error-box{background:#fff0f0;color:#a61b1b;padding:14px;border-radius:10px;text-align:center;margin:10px 0;border:1px solid #f0b4b4}

/* Accessibility/performance: tắt chuyển động khi người dùng yêu cầu giảm animation */
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
}

@media(max-width:650px){
  body{padding:8px}
  .container{border-radius:16px}
  .header{padding:24px 14px 22px;min-height:220px}
  .header h1{font-size:20px}
  .header-title{font-size:13.5px}
  .header-subtitle{font-size:10.5px;margin-top:5px}
  .desktop-only{display:none}
  .tech-grid{background-size:31px 31px}
  .orb-a{width:135px;height:135px;right:-55px;top:-45px}
  .orb-b{width:75px;height:75px;left:-32px}
  .content{padding:20px 15px}
  .section-heading{margin-bottom:17px}
  .section-heading h2{font-size:18px}
  .exam-topbar{align-items:stretch;flex-direction:column;gap:10px}
  .timer{width:100%}
  .question-nav{gap:5px}
  .q-nav-btn{width:35px;height:32px;font-size:11px}
  .question-box{padding:17px}
  .question-text{font-size:15px;line-height:1.58}
  .option{padding:11px 10px}
  .option label{font-size:13px}
  .nav-buttons{gap:7px}
  .nav-buttons .btn{font-size:13px}
  .result-score{font-size:48px}
  /* HTML hiện tại dùng flex inline cho cụm địa chỉ; ép xuống dòng để không rớt chữ */
  #groupCuTru > div[style*="display: flex"]{flex-direction:column!important;gap:8px!important}
  #groupCuTru > div[style*="display: flex"] input,
  #groupCuTru > div[style*="display: flex"] select{flex:1 1 auto!important}
}

@media(min-width:651px){
  .form-group:nth-of-type(4){margin-top:4px}
}

/* Tối ưu thiết bị cảm ứng */
@media (hover:none){
  .btn:hover,.option:hover,.q-nav-btn:hover{transform:none}
}

/* =========================================================
   THEME HÀNH CHÍNH NHÀ NƯỚC — ĐỎ / VÀNG / XANH NỀN
   Chỉ CSS, không thêm thư viện hay tài nguyên ngoài.
   ========================================================= */
:root{
  --primary:#9f1728;
  --primary-2:#c8102e;
  --primary-3:#e21b2d;
  --accent:#c8102e;
  --accent-2:#e6b400;
  --gold:#f2c300;
  --gold-soft:#fff7d6;
  --blue-deep:#17365d;
  --ink:#25364a;
  --muted:#667085;
  --line:#d8dee7;
  --surface:#f7f8fa;
  --success:#16845b;
  --shadow:0 22px 60px rgba(72,20,28,.14);
  --glow:0 0 22px rgba(230,180,0,.18);
}

body{
  background:
    radial-gradient(circle at 10% 5%,rgba(200,16,46,.10),transparent 27%),
    radial-gradient(circle at 90% 18%,rgba(242,195,0,.12),transparent 24%),
    linear-gradient(135deg,#f5f7fa 0%,#fff 52%,#f6f7f9 100%);
}
body:before{
  background-image:
    linear-gradient(rgba(159,23,40,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(159,23,40,.035) 1px,transparent 1px);
}
body:after{border-color:rgba(200,16,46,.08);box-shadow:0 0 0 38px rgba(200,16,46,.018),0 0 0 76px rgba(242,195,0,.014)}

.container:before{background:radial-gradient(circle,rgba(200,16,46,.055),transparent 68%)}
.container:after{background:radial-gradient(circle,rgba(242,195,0,.055),transparent 68%)}

.header{
  background:
    radial-gradient(circle at 50% 38%,rgba(242,195,0,.20),transparent 28%),
    linear-gradient(135deg,#710f1d 0%,#9f1728 43%,#c8102e 76%,#8b1021 100%);
  border-bottom:4px solid var(--gold);
  box-shadow:inset 0 -24px 55px rgba(70,0,10,.20);
}
.header:before{
  background:
    linear-gradient(115deg,transparent 18%,rgba(242,195,0,.10) 18.2%,transparent 18.5%),
    linear-gradient(65deg,transparent 69%,rgba(242,195,0,.10) 69.2%,transparent 69.5%);
}
.header:after{border-color:rgba(242,195,0,.26);box-shadow:0 0 0 18px rgba(242,195,0,.035),0 0 0 38px rgba(242,195,0,.025),0 0 0 60px rgba(242,195,0,.018)}
.tech-grid{background-image:linear-gradient(rgba(242,195,0,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(242,195,0,.16) 1px,transparent 1px)}
.orb{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.75) 0 2%,transparent 3%),radial-gradient(circle at 42% 40%,rgba(242,195,0,.25),transparent 54%),radial-gradient(circle,transparent 55%,rgba(242,195,0,.35) 56%,transparent 58%);border-color:rgba(255,220,100,.34);box-shadow:0 0 35px rgba(242,195,0,.13),inset 0 0 28px rgba(242,195,0,.08)}
.orb:after{border-color:rgba(255,225,120,.34)}
.data-stream{background:linear-gradient(90deg,transparent,rgba(255,215,70,.9),transparent);box-shadow:0 0 9px rgba(242,195,0,.5)}
.eyebrow{text-shadow:0 0 12px rgba(255,220,90,.30)}
.header h1{text-shadow:0 3px 22px rgba(0,0,0,.24),0 0 20px rgba(242,195,0,.14)}
.header-subtitle{color:#fff4bd}

.section-icon{background:linear-gradient(135deg,#9f1728,#c8102e 62%,#e6b400);box-shadow:0 9px 24px rgba(159,23,40,.20),0 0 0 1px rgba(242,195,0,.25)}
.section-heading h2,.progress-meta strong,.exam-topbar strong{color:var(--primary)}
.welcome-card{border-color:#eadca9;background:linear-gradient(135deg,#fffdf1,#fff 75%)}
.welcome-icon{background:#fff4c9;box-shadow:inset 0 0 18px rgba(242,195,0,.12)}
.welcome-card strong{color:var(--primary)}
.form-group label{color:#394b5f}
.form-group label b,.prediction-field label b{color:#c8102e}
.form-group input,.form-group select{border-color:#d5dbe3;background:#fff}
.form-group input:hover,.form-group select:hover{border-color:#d8b93d}
.form-group input:focus,.form-group select:focus{border-color:#c8102e;box-shadow:0 0 0 4px rgba(200,16,46,.09),0 0 20px rgba(242,195,0,.06)}

.btn-primary,.btn-submit{background:linear-gradient(100deg,#9f1728,#c8102e 58%,#e0a900);box-shadow:0 11px 28px rgba(159,23,40,.22),0 0 18px rgba(242,195,0,.08)}
.btn-secondary{color:#9f1728;border-color:#d9c36b}
.btn-secondary:hover{background:#fff9df;border-color:#c8102e}
.exam-kicker{color:#b18a00}
.timer{background:#fff9df;border-color:#e1c34d;color:#8b5e00;box-shadow:0 4px 16px rgba(160,110,0,.07),inset 0 0 15px rgba(242,195,0,.07)}
.timer.warning{background:#fff0f0;border-color:#df9ca7;color:#a11228}
.progress-bar{background:#eeeef0}
.progress-fill{background:linear-gradient(90deg,#9f1728,#c8102e 62%,#e6b400);box-shadow:0 0 12px rgba(200,16,46,.22)}
.question-nav{background:linear-gradient(135deg,#fafafa,#fffdf3);border-color:#e3dfce}
.q-nav-btn:hover{border-color:#d0af24}
.q-nav-btn.answered{background:#16845b;border-color:#16845b}
.q-nav-btn.current{border-color:#c8102e;box-shadow:0 0 0 3px rgba(200,16,46,.12),0 0 15px rgba(200,16,46,.07);color:#a11228}
.question-box{border-top-color:#c8102e;box-shadow:0 8px 24px rgba(80,35,42,.07)}
.question-number{background:linear-gradient(135deg,#9f1728,#c8102e 70%,#d9aa00)}
.option:hover{border-color:#d5b83c;background:#fffdf3}
.option.selected{border-color:#c8102e;background:#fff6f6;box-shadow:inset 4px 0 #c8102e}
.option input{accent-color:#c8102e}
.option label strong{color:#a11228}
.submit-box{background:linear-gradient(135deg,#fffdf3,#fff);border-color:#eadca9;border-left-color:#c8102e}
.exam-note{background:#fff9df;color:#805d00;border-color:#ead27c}
.result-icon{background:linear-gradient(135deg,#9f1728,#c8102e 65%,#d9aa00);box-shadow:0 12px 28px rgba(159,23,40,.20)}
.result-box h2,.result-score{color:#9f1728}
.result-details{background:#fafafa;border-color:#e0e2e6}

/* Hộp thoại thông báo: cùng ngôn ngữ màu đỏ - vàng của cuộc thi */
.dialog-open{overflow:hidden}
.app-dialog{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:18px}
.app-dialog.is-open{display:flex}
.app-dialog__backdrop{position:absolute;inset:0;background:rgba(32,16,20,.56);backdrop-filter:blur(3px)}
.app-dialog__panel{position:relative;width:min(500px,100%);background:#fff;border:1px solid #e3d9c0;border-radius:18px;overflow:hidden;box-shadow:0 25px 80px rgba(55,15,24,.28);animation:dialogIn .18s ease-out}
@keyframes dialogIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.app-dialog__head{display:flex;align-items:center;gap:13px;padding:17px 20px;background:linear-gradient(135deg,#8f1325,#c8102e);color:#fff;border-bottom:4px solid #f2c300}
.app-dialog__icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;background:#f2c300;color:#7d111f;font-size:22px;font-weight:900;box-shadow:0 4px 14px rgba(0,0,0,.14)}
.app-dialog__icon.is-error{background:#fff;color:#b20f28}.app-dialog__icon.is-info{background:#fff4c9}
.app-dialog__eyebrow{font-size:9px;letter-spacing:1.5px;font-weight:800;opacity:.9;margin-bottom:3px}
.app-dialog__head h3{font-size:17px;line-height:1.25;margin:0}
.app-dialog__body{padding:22px 22px 12px;color:#344054;font-size:14px;line-height:1.65}
.app-dialog__body strong{color:#b20f28}
.app-dialog__actions{display:flex;justify-content:flex-end;gap:9px;padding:12px 22px 20px}
.dialog-btn{min-width:108px;border-radius:9px;padding:10px 16px;font-size:13px;font-weight:800;cursor:pointer;transition:.18s;border:1px solid transparent}
.dialog-btn--primary{color:#fff;background:linear-gradient(100deg,#9f1728,#c8102e 62%,#dcae00);box-shadow:0 7px 18px rgba(159,23,40,.18)}
.dialog-btn--secondary{color:#8f1325;background:#fff;border-color:#d9c36b}
.dialog-btn:hover{transform:translateY(-1px);filter:saturate(1.06)}
.dialog-btn:focus-visible{outline:3px solid rgba(242,195,0,.45);outline-offset:2px}

@media(max-width:650px){
  .app-dialog{padding:12px}.app-dialog__panel{border-radius:15px}.app-dialog__body{padding:18px 18px 10px}.app-dialog__actions{padding:10px 18px 17px}.dialog-btn{flex:1}
}
@media(prefers-reduced-motion:reduce){.tech-grid,.orb,.data-stream,.timer.warning{animation:none!important}.app-dialog__panel{animation:none!important}.btn,.q-nav-btn,.option{transition:none!important}}