/* Lá chắn số – bảng màu lấy từ quy cách biểu trưng thành phố Đà Nẵng:
   xanh đậm (C100 M60), xanh nhạt (C50), đỏ cam (M60 Y100). */
@font-face{font-family:"Be Vietnam Pro";font-weight:400;font-display:swap;src:url(../fonts/be-vietnam-pro-vietnamese-400-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-weight:400;font-display:swap;src:url(../fonts/be-vietnam-pro-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Be Vietnam Pro";font-weight:500;font-display:swap;src:url(../fonts/be-vietnam-pro-vietnamese-500-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-weight:500;font-display:swap;src:url(../fonts/be-vietnam-pro-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Be Vietnam Pro";font-weight:600;font-display:swap;src:url(../fonts/be-vietnam-pro-vietnamese-600-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-weight:600;font-display:swap;src:url(../fonts/be-vietnam-pro-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Be Vietnam Pro";font-weight:700;font-display:swap;src:url(../fonts/be-vietnam-pro-vietnamese-700-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-weight:700;font-display:swap;src:url(../fonts/be-vietnam-pro-latin-700-normal.woff2) format("woff2")}

:root{
  --xanh-dam:#005ea8; --xanh-dam-2:#004a85; --xanh-nhat:#6dcff6; --nen-xanh:#eaf6fd; --cam:#f58220; --cam-dam:#b85a05;
  --muc:#0c2a45; --muc-nhat:#48607a; --vien:#c9dbe8; --nen:#fff; --nen-phu:#f5f9fc;
  --do:#b3261e; --do-nen:#fdecea; --vang:#7a4f00; --vang-nen:#fff1cc; --thuong:#1f5f3a; --thuong-nen:#e4f3e9;
  --ngoai:#4a5568; --ngoai-nen:#edf0f3; --cho:#5b3a8c; --cho-nen:#f0e9fb;
  --co-chu:1.1875rem;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Be Vietnam Pro",system-ui,"Segoe UI",Arial,sans-serif;font-size:var(--co-chu);line-height:1.6;color:var(--muc);background:var(--nen)}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4.6vw,3.1rem)} h2{font-size:clamp(1.4rem,2.6vw,1.85rem)} h3{font-size:1.15rem}
p{margin:0 0 1em;max-width:68ch} ul,ol{margin:0 0 1em;padding-left:1.3em;max-width:68ch} li{margin-bottom:.35em}
a{color:var(--xanh-dam);text-underline-offset:.18em} a:hover{color:var(--xanh-dam-2)}
:focus-visible{outline:3px solid var(--cam);outline-offset:2px;border-radius:4px}
.khung{width:min(100% - 2rem,70rem);margin-inline:auto}
.an{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nho{font-size:.9rem;color:var(--muc-nhat)} .dam{font-weight:600}

/* ---------- đầu trang ---------- */
.bao-thi-diem{background:var(--muc);color:#fff;font-size:.92rem;padding:.45rem 0}
.bao-thi-diem p{margin:0;max-width:none}
.dau{border-bottom:1px solid var(--vien);background:#fff}
.dau .khung{display:flex;align-items:center;gap:1rem;padding:.7rem 0;flex-wrap:wrap}
.thuong-hieu{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--muc);flex:1 1 18rem;min-width:0}
.thuong-hieu img{width:56px;height:56px;flex:none}
@media (max-width:40rem){.mo-dau::after{display:none}}
.thuong-hieu>span{line-height:1.3}
.thuong-hieu .ten{font-weight:700;font-size:1.02rem;line-height:1.25}
.thuong-hieu .phu{font-size:.85rem;color:var(--muc-nhat);line-height:1.3}
.dau nav{display:flex;gap:.3rem 1.2rem;flex-wrap:wrap;font-size:1rem}
.dau nav a{text-decoration:none;font-weight:500;padding:.3rem 0}
.dau nav a[aria-current]{border-bottom:3px solid var(--cam)}

/* ---------- nút ---------- */
.nut{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.4rem;padding:.7rem 1.6rem;border-radius:.6rem;border:2px solid transparent;font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.nut-chinh{background:var(--xanh-dam);color:#fff} .nut-chinh:hover{background:var(--xanh-dam-2);color:#fff}
.nut-cam{background:var(--cam);color:#231100} .nut-cam:hover{background:#ff9a3d;color:#231100}
.nut-phu{background:#fff;color:var(--xanh-dam);border-color:var(--xanh-dam)} .nut-phu:hover{background:var(--nen-xanh)}
.nut-nho{min-height:2.4rem;padding:.35rem .9rem;font-size:.92rem;border-radius:.45rem}
.nut-nguy{background:#fff;color:var(--do);border-color:var(--do)} .nut-nguy:hover{background:var(--do-nen)}
.nut[disabled]{opacity:.5;cursor:not-allowed}
.hang-nut{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}

/* ---------- trang chủ ---------- */
.mo-dau{background:var(--nen-xanh);position:relative;overflow:hidden}
.mo-dau::after{content:"";position:absolute;right:-9rem;top:-7rem;width:34rem;height:34rem;border-radius:50%;
  background:repeating-linear-gradient(180deg,#fff 0 1.15rem,transparent 1.15rem 2.3rem);opacity:.75;pointer-events:none}
.mo-dau .khung{position:relative;z-index:1;padding:clamp(2.2rem,6vw,4.5rem) 0}
.mo-dau h1{max-width:17ch;color:var(--xanh-dam-2)}
.mo-dau .dan{font-size:1.3rem;max-width:36ch;margin-bottom:1.6rem}
.doan{padding:clamp(2rem,5vw,3.4rem) 0} .doan-phu{background:var(--nen-phu)}
.buoc{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));max-width:none;counter-reset:b}
.buoc li{counter-increment:b;border-top:4px solid var(--xanh-dam);padding-top:.8rem;margin:0}
.buoc li::before{content:"Bước " counter(b);display:block;font-weight:700;color:var(--cam-dam);font-size:.95rem}
.buoc h3{margin:.15rem 0 .3rem}
.hai-cot{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
.luoi-2{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,27rem),1fr));align-items:start}
.loi-dan{border-left:5px solid var(--xanh-nhat);padding:.2rem 0 .2rem 1rem;margin:0 0 .8rem;font-size:1.1rem}
.hop{border:1px solid var(--vien);border-radius:.7rem;padding:1.1rem 1.2rem;background:#fff}
.hop-khan{border:2px solid var(--do);background:var(--do-nen)}
.chan{background:var(--muc);color:#dbe8f3;padding:2rem 0;font-size:.95rem}
.chan a{color:#fff} .chan p{max-width:none;margin-bottom:.4em}
.chan .khung{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}

/* ---------- biểu mẫu ---------- */
.bieu-mau{max-width:42rem}
.truong{margin-bottom:1.4rem}
.truong label,.truong legend{display:block;font-weight:600;margin-bottom:.3rem;padding:0}
.truong .goi-y{font-size:.95rem;color:var(--muc-nhat);margin:0 0 .4rem}
input[type=text],input[type=tel],input[type=password],input[type=number],select,textarea{
  width:100%;font:inherit;color:var(--muc);padding:.75rem .9rem;border:2px solid #7f99b0;border-radius:.5rem;background:#fff}
textarea{min-height:9rem;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--xanh-dam);outline:3px solid var(--xanh-nhat);outline-offset:0}
.loi{color:var(--do);font-weight:600;font-size:.98rem;margin:.3rem 0 0}
.co-loi input,.co-loi select,.co-loi textarea{border-color:var(--do)}
.chon,.truong label.chon{display:flex;gap:.7rem;align-items:flex-start;font-weight:400;margin-bottom:.45rem}
.chon input{width:1.6rem;height:1.6rem;flex:none;margin-top:.15rem;accent-color:var(--xanh-dam)}
fieldset{border:0;padding:0;margin:0}
.ghi-am{border:2px dashed #7f99b0;border-radius:.7rem;padding:1rem 1.1rem;background:var(--nen-phu)}
.ghi-am audio{width:100%;margin-top:.7rem} .ghi-am .dong-ho{font-variant-numeric:tabular-nums;font-weight:700;color:var(--do)}
.thong-bao{border-radius:.6rem;padding:.8rem 1rem;margin-bottom:1rem;border:1px solid}
.thong-bao.ok{background:var(--thuong-nen);border-color:#9fcfb0;color:#143f27}
.thong-bao.error{background:var(--do-nen);border-color:#eeb1ab;color:#7d1a14}
.ma-tra-cuu{font-size:2rem;font-weight:700;letter-spacing:.06em;background:var(--nen-xanh);border:2px solid var(--xanh-dam);border-radius:.6rem;padding:.6rem 1rem;display:inline-block;font-variant-numeric:tabular-nums}

/* ---------- mức cảnh báo ---------- */
.muc{display:inline-flex;align-items:center;gap:.35rem;padding:.12rem .6rem;border-radius:99px;font-weight:600;font-size:.86rem;white-space:nowrap;border:1px solid}
.muc::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:currentColor}
.muc-do{color:var(--do);background:var(--do-nen);border-color:#eeb1ab}
.muc-vang{color:var(--vang);background:var(--vang-nen);border-color:#e6c873}
.muc-thuong{color:var(--thuong);background:var(--thuong-nen);border-color:#9fcfb0}
.muc-ngoai{color:var(--ngoai);background:var(--ngoai-nen);border-color:#c5ccd4}
.muc-cho{color:var(--cho);background:var(--cho-nen);border-color:#cdb8ee}
mark{padding:.05em .2em;border-radius:.25em;color:inherit}
mark.k-do{background:#f9c9c4;box-shadow:inset 0 -2px 0 var(--do)} mark.k-vang{background:#ffe08a;box-shadow:inset 0 -2px 0 #b98900}
mark.k-thuong{background:#cfead8} mark.k-topic{background:#cfe9fb} mark.k-civic{background:#e2e6ea}

/* ---------- khu vực cán bộ ---------- */
body.cb{font-size:1rem;background:var(--nen-phu)}
.cb .dau{position:sticky;top:0;z-index:5}
.cb .dau .khung,.cb .khung{width:min(100% - 1.6rem,100rem)}
.cb .thuong-hieu img{width:40px;height:40px}
.cb h1{font-size:1.5rem} .cb h2{font-size:1.15rem} .cb h3{font-size:1rem}
.cb .nut{min-height:2.6rem;padding:.45rem 1rem;font-size:.95rem}
.cb main{padding:1.2rem 0 3rem}
.dem{display:flex;gap:.6rem;flex-wrap:wrap;margin:0 0 1rem}
.dem a{display:flex;flex-direction:column;min-width:7.5rem;padding:.55rem .8rem;border-radius:.6rem;border:1px solid var(--vien);background:#fff;text-decoration:none;color:var(--muc)}
.dem a[aria-current]{border:2px solid var(--muc)}
.dem .so{font-size:1.6rem;font-weight:700;line-height:1.1}
.loc{display:flex;gap:.6rem;flex-wrap:wrap;align-items:end;margin-bottom:1rem}
.loc label{font-size:.85rem;font-weight:600;display:block} .loc select{padding:.4rem .6rem;min-width:11rem}
.ba-vung{display:grid;gap:1rem;grid-template-columns:minmax(17rem,22rem) minmax(0,1fr) minmax(18rem,24rem);align-items:start}
@media (max-width:75rem){.ba-vung{grid-template-columns:minmax(16rem,20rem) minmax(0,1fr)} .ba-vung .vung-3{grid-column:1/-1}}
@media (max-width:48rem){.ba-vung{grid-template-columns:1fr}}
.vung{background:#fff;border:1px solid var(--vien);border-radius:.7rem;padding:1rem}
.vung>h2{margin:0 0 .8rem;padding-bottom:.5rem;border-bottom:2px solid var(--nen-xanh);color:var(--xanh-dam-2)}
.hang-doi{list-style:none;margin:0;padding:0;max-width:none;max-height:75vh;overflow:auto}
.hang-doi li{margin:0 0 .5rem}
.hang-doi a{display:block;text-decoration:none;color:var(--muc);border:1px solid var(--vien);border-left:6px solid var(--ngoai);border-radius:.5rem;padding:.55rem .7rem;background:#fff}
.hang-doi a:hover{background:var(--nen-xanh)} .hang-doi a[aria-current]{background:var(--nen-xanh);border-color:var(--xanh-dam);border-left-width:6px}
.hang-doi .l-do{border-left-color:var(--do)} .hang-doi .l-vang{border-left-color:#d9a300} .hang-doi .l-thuong{border-left-color:#3b8f5c} .hang-doi .l-cho{border-left-color:var(--cho)}
.hang-doi .dong1{display:flex;justify-content:space-between;gap:.5rem;font-size:.82rem;color:var(--muc-nhat)}
.hang-doi .trich{margin:.2rem 0 .3rem;font-size:.95rem;line-height:1.4}
.nguoi-gui{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:var(--nen-phu);border-left:5px solid var(--xanh-dam);border-radius:.4rem;padding:.7rem .9rem;margin-bottom:.9rem}
.nguoi-gui .ten-nguoi{font-size:1.2rem;font-weight:700}
.noi-dung{font-size:1.1rem;line-height:1.75;background:#fbfdff;border:1px solid var(--vien);border-radius:.5rem;padding:.9rem 1rem;margin-bottom:.9rem;white-space:pre-wrap;overflow-wrap:anywhere}
.ket-qua{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));margin-bottom:.9rem}
.o{border:1px solid var(--vien);border-radius:.5rem;padding:.7rem .8rem;background:#fff}
.o h3{margin:0 0 .35rem;font-size:.85rem;color:var(--muc-nhat);font-weight:600}
.o ul{margin:0;padding-left:1.1em;font-size:.95rem}
.o-do{border:2px solid var(--do);background:var(--do-nen)} .o-vang{border:2px solid #d9a300;background:var(--vang-nen)} .o-cho{border:2px solid var(--cho);background:var(--cho-nen)}
.khoi{border-top:1px solid var(--vien);padding-top:.9rem;margin-top:.9rem}
.khoi:first-of-type{border-top:0;padding-top:0;margin-top:0}
.khoi form{margin:0} .khoi .truong{margin-bottom:.7rem} .khoi label{font-size:.92rem}
.cb input[type=text],.cb input[type=tel],.cb input[type=password],.cb input[type=number],.cb select,.cb textarea{padding:.5rem .65rem;border-width:1.5px}
.cb textarea{min-height:5rem}
.cb .chon input{width:1.15rem;height:1.15rem}
.dong-thoi-gian{list-style:none;padding:0;margin:0;max-width:none;font-size:.9rem}
.dong-thoi-gian li{display:grid;grid-template-columns:8.3rem 1fr;gap:.6rem;padding:.3rem 0;border-bottom:1px dashed var(--vien);margin:0}
.dong-thoi-gian time{color:var(--muc-nhat);font-variant-numeric:tabular-nums}
.luu-y{font-size:.88rem;background:var(--vang-nen);border-left:4px solid #d9a300;padding:.5rem .7rem;border-radius:.3rem;margin:.6rem 0}
table{border-collapse:collapse;width:100%;font-size:.95rem;background:#fff}
th,td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--vien);vertical-align:top}
th{font-size:.85rem;color:var(--muc-nhat);font-weight:600;background:var(--nen-phu)}
.cuon{overflow-x:auto}
.the-so{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin-bottom:1.2rem}
.the-so .o .so{font-size:1.9rem;font-weight:700;line-height:1.1;display:block}
.bieu-do{width:100%;height:auto;display:block}
.bieu-do text{font-family:inherit;font-size:13px;fill:var(--muc)}
.ma-bi-mat{font-family:ui-monospace,Consolas,monospace;font-size:1.05rem;background:var(--nen-xanh);padding:.5rem .7rem;border-radius:.4rem;display:inline-block;overflow-wrap:anywhere;user-select:all}
textarea.ma{font-family:ui-monospace,Consolas,monospace;font-size:.88rem;min-height:28rem;line-height:1.45;white-space:pre;overflow:auto}
.dang-nhap{max-width:26rem;margin:3rem auto;background:#fff;border:1px solid var(--vien);border-radius:.8rem;padding:1.6rem}
@media (prefers-reduced-motion:no-preference){.nut{transition:background-color .12s}}
@media print{.dau nav,.bao-thi-diem,.chan,.nut{display:none}}