/* NHIP v2.98i — Trang Cảnh báo bố cục mới (KPI theo nhóm · bảng cảnh báo · cột thống kê).
   Chỉ dùng biến màu của dự án (--brand, --surface, --line, --text, --muted, --red, --blue) nên theo đúng sáng/tối/skin/màu chủ đạo. */
.alx{--a-red:var(--red,#ee6c78);--a-blue:#2f6df6;--a-amber:#e8960c;--a-violet:#7c4dff;--a-brand:var(--house,var(--brand,#16845b));
  --a-r:14px;min-width:0}
.alx *{box-sizing:border-box}
.alx .g-A{--gc:var(--a-red)}.alx .g-B{--gc:var(--a-blue)}.alx .g-C{--gc:var(--a-amber)}.alx .g-D{--gc:var(--a-violet)}.alx .g-R{--gc:var(--a-brand)}
.alx-i{width:1em;height:1em;flex:none;display:block}

/* Đầu trang */
.alx-h{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:2px 0 12px}
.alx-hl{display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 380px}
.alx-ht{width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:16px;background:color-mix(in srgb,var(--a-brand) 14%,var(--surface,#fff));color:var(--a-brand)}
.alx-ht .hico,.alx-ht svg{width:28px;height:28px}
html[data-skin] .alx-ht .hico{background:transparent;color:var(--a-brand);margin:0}
.alx-h h1{margin:0;font-size:26px;line-height:1.15;letter-spacing:-.4px}
.alx-h .eyebrow{margin:0 0 2px}
.alx-h p{margin:3px 0 0;font-size:13px;color:var(--muted,#71879b);line-height:1.45}
.alx-hb{display:flex;gap:10px;flex-wrap:wrap;flex:none}
.alx-hb .btn{min-height:42px;padding:0 18px;border-radius:12px;font-weight:700}

/* 5 thẻ KPI */
.alx-kpi{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 14px}
.alx-k{appearance:none;font:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-width:0;padding:14px 16px;
  background:var(--surface,#fff);color:var(--text,#173b5d);border:1px solid var(--line,#e0eeef);border-radius:var(--a-r);box-shadow:var(--shadow,0 8px 28px #2b61710d);
  transition:transform .12s ease,border-color .12s ease}
.alx-k:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--gc) 45%,var(--line,#e0eeef))}
.alx-k.on{border-color:var(--gc);box-shadow:0 0 0 2px color-mix(in srgb,var(--gc) 22%,transparent)}
.alx-kt{display:flex;align-items:center;gap:9px;min-width:0}
.alx-kt em{font-style:normal;font-size:13px;font-weight:600;color:var(--text,#173b5d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alx-ki{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;font-size:18px;color:var(--gc);background:color-mix(in srgb,var(--gc) 14%,transparent)}
.alx-k b{font-size:28px;line-height:1.1;font-weight:800;margin-top:6px;letter-spacing:-.5px}
.alx-k small{font-size:12px;font-weight:600;color:var(--a-brand)}

/* Lưới chính */
.alx-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start;margin-bottom:14px}
.alx-main,.alx-side{display:grid;gap:14px;min-width:0;align-content:start}
.alx .panel{margin:0;border-radius:var(--a-r)}
.alx-ph{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:15px;line-height:1.3;font-weight:800;letter-spacing:-.1px}
.alx-red{color:var(--a-red)}
.alx-n{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--a-red);color:#fff;font-size:11px;font-weight:800}

/* Thanh lọc */
.alx-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between}
.alx-tabs{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.alx-tabs button{appearance:none;font:inherit;font-size:13px;font-weight:700;min-height:36px;padding:0 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line,#e0eeef);background:var(--surface,#fff);color:var(--text,#173b5d)}
.alx-tabs button.on{background:var(--a-brand);border-color:var(--a-brand);color:var(--on-brand,#fff)}
.alx-tools{display:flex;gap:8px;align-items:center;min-width:0;flex:1 1 260px;justify-content:flex-end}
.alx-s{flex:1 1 180px;max-width:300px;min-width:0}
.alx-s input,.alx-tools select{width:100%;min-height:38px;border-radius:10px;border:1px solid var(--line,#e0eeef);background:var(--surface,#fff);color:var(--text,#173b5d);padding:0 12px;font:inherit;font-size:13px}
.alx-tools select{width:auto;flex:none}
.alx-s input:focus,.alx-tools select:focus{outline:2px solid color-mix(in srgb,var(--a-brand) 40%,transparent);outline-offset:1px}

/* Bảng */
.alx-list{padding:16px 16px 12px}
.alx-th,.alx-tr{display:grid;grid-template-columns:104px 62px minmax(0,1fr) 98px 126px 34px;gap:10px;align-items:center}
.alx-th{padding:0 8px 8px;font-size:11.5px;font-weight:700;color:var(--muted,#71879b);border-bottom:1px solid var(--line,#e0eeef)}
.alx-tr{padding:11px 8px;border-bottom:1px solid var(--line,#e0eeef);min-width:0}
.alx-tr:hover{background:color-mix(in srgb,var(--a-brand) 5%,transparent)}
.alx-c{min-width:0}
.alx-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;
  color:color-mix(in srgb,var(--gc) 78%,var(--text,#173b5d));background:color-mix(in srgb,var(--gc) 13%,transparent)}
.alx-tag .alx-i{font-size:13px}
.alx-c.sym{font-weight:800;font-size:13px}
.alx-c.body b{display:block;font-size:13.5px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.alx-c.body small{display:block;margin-top:2px;font-size:12px;color:var(--muted,#71879b);overflow-wrap:anywhere}
.alx-c.body small.alx-w{color:#b77a12}
.alx-c.time{font-size:12px;color:var(--muted,#71879b);line-height:1.35}
.alx-c.time b{display:block;color:var(--text,#173b5d);font-weight:600}
.alx-c.st .badge{font-size:11px;padding:4px 10px;white-space:nowrap}
.alx-empty{padding:22px 8px;text-align:center}

/* Menu ⋮ */
.alx-menu{position:relative}
.alx-menu summary{list-style:none;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;font-size:18px;font-weight:800;color:var(--muted,#71879b);user-select:none}
.alx-menu summary::-webkit-details-marker{display:none}
.alx-menu summary:hover,.alx-menu[open] summary{background:color-mix(in srgb,var(--a-brand) 10%,transparent);color:var(--text,#173b5d)}
.alx-pop{position:absolute;right:0;top:34px;z-index:20;min-width:170px;padding:6px;display:grid;gap:2px;
  background:var(--surface,#fff);border:1px solid var(--line,#e0eeef);border-radius:12px;box-shadow:0 14px 36px rgba(10,20,30,.22)}
.alx-pop button,.alx-pop a{appearance:none;font:inherit;font-size:13px;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;padding:8px 10px;border-radius:8px;border:0;background:transparent;color:var(--text,#173b5d)}
.alx-pop button:hover,.alx-pop a:hover{background:color-mix(in srgb,var(--a-brand) 10%,transparent)}
.alx-pop .dn{color:var(--a-red)}

/* Phân trang */
.alx-pg{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 4px 2px}
.alx-pg nav{display:flex;gap:6px;align-items:center}
.alx-pg button{appearance:none;font:inherit;font-size:13px;font-weight:700;min-width:32px;height:32px;padding:0 8px;border-radius:8px;cursor:pointer;border:1px solid var(--line,#e0eeef);background:var(--surface,#fff);color:var(--text,#173b5d)}
.alx-pg button.on{background:var(--a-brand);border-color:var(--a-brand);color:var(--on-brand,#fff)}
.alx-pg nav span{color:var(--muted,#71879b)}

/* Cột phải */
.alx-ir{appearance:none;font:inherit;width:100%;display:grid;grid-template-columns:22px minmax(0,1fr) auto 10px;gap:9px;align-items:center;text-align:left;cursor:pointer;
  padding:9px 4px;border:0;border-bottom:1px solid var(--line,#e0eeef);background:transparent;color:var(--text,#173b5d)}
.alx-ir:last-of-type{border-bottom:0}
.alx-ig{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;font-size:12px;color:#fff;background:var(--gc)}
.alx-it{font-size:12.5px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.alx-ir:not(.new) .alx-it{color:var(--muted,#71879b)}
.alx-ir time{font-size:11px;color:var(--muted,#71879b);white-space:nowrap}
.alx-ir i{font-style:normal;color:var(--muted,#71879b)}
.alx-ir:hover{background:color-mix(in srgb,var(--a-brand) 6%,transparent)}
.alx-st{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center}
.alx-st svg{width:128px;height:128px;flex:none}
.alx-ring{stroke:color-mix(in srgb,var(--muted,#71879b) 20%,transparent)}
.alx-st circle.g-A{stroke:var(--a-red)}.alx-st circle.g-B{stroke:var(--a-blue)}.alx-st circle.g-C{stroke:var(--a-amber)}.alx-st circle.g-D{stroke:var(--a-violet)}
.alx-tot{font-size:22px;font-weight:800;fill:var(--text,#173b5d)}.alx-tl{font-size:7.5px;fill:var(--muted,#71879b)}
.alx-st ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;flex:1 1 150px;min-width:0}
.alx-st li{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;gap:7px;align-items:center;font-size:12.5px}
.alx-st li i{width:8px;height:8px;border-radius:50%;background:var(--gc)}
.alx-st li small{color:var(--muted,#71879b);min-width:50px;text-align:right}
.alx-sw{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;font-size:13px;cursor:pointer;border-bottom:1px solid var(--line,#e0eeef)}
.alx-sw input{position:absolute;opacity:0;width:1px;height:1px}
.alx-sw i{flex:none;width:40px;height:23px;border-radius:999px;position:relative;background:color-mix(in srgb,var(--muted,#71879b) 35%,transparent);transition:background .15s}
.alx-sw i::after{content:"";position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
.alx-sw input:checked+i{background:var(--a-brand)}.alx-sw input:checked+i::after{transform:translateX(17px)}
.alx-sw input:disabled+i{opacity:.55}.alx-sw.off{cursor:default}
.alx-sw input:focus-visible+i{outline:2px solid var(--a-brand);outline-offset:2px}
.alx-fq{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0 4px;font-size:13px}
.alx-fq b{font-size:12.5px;text-align:right}
.alx-note{padding:14px 16px;border-radius:var(--a-r);font-size:12.5px;line-height:1.6;border:1px solid color-mix(in srgb,var(--a-brand) 28%,transparent);background:color-mix(in srgb,var(--a-brand) 8%,transparent)}
.alx-note p{margin:0 0 6px}.alx-note a{font-weight:700;color:var(--a-brand);text-decoration:none}

/* Phần dưới */
.alx-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:14px;align-items:start;margin-top:14px}
.alx #al-events{margin-bottom:0}
.al-fbox{width:min(640px,100%)}
.al-evbox{width:min(640px,100%)}

/* Màn hình vừa & điện thoại */
@media(max-width:1180px){.alx-grid{grid-template-columns:minmax(0,1fr)}.alx-side{grid-template-columns:repeat(2,minmax(0,1fr))}.alx-note{grid-column:1/-1}}
@media(max-width:900px){.alx-two{grid-template-columns:minmax(0,1fr)}.alx-kpi{gap:8px}.alx-k{padding:11px 12px}.alx-k b{font-size:24px}}
@media(max-width:720px){
  .alx-grid{gap:12px}.alx-main,.alx-side{display:contents}
  .alx-bar{order:1}#al-imp{order:2}.alx-list{order:3}#al-stat{order:4}#al-quick{order:5}.alx-note{order:6}
  .alx-h h1{font-size:22px}.alx-ht{width:44px;height:44px}.alx-hl p{font-size:12.5px}
  .alx-hb{width:100%}.alx-hb .btn{flex:1 1 auto}
  .alx-kpi{gap:6px}
  .alx-k{padding:8px 6px;align-items:center;text-align:center;gap:0}
  .alx-kt{flex-direction:column;gap:2px}.alx-ki{display:none}
  .alx-kt em{font-size:10.5px}.alx-k b{font-size:20px;margin-top:3px}.alx-k small{display:none}
  .alx-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%;padding-bottom:2px}.alx-tabs::-webkit-scrollbar{display:none}
  .alx-tabs button{flex:none}
  .alx-tools{flex:1 1 100%;justify-content:stretch}.alx-s{max-width:none}
  .alx-list{padding:12px 10px 10px}
  .alx-th{display:none}
  .alx-tr{grid-template-columns:auto auto minmax(0,1fr) 34px;grid-template-areas:"tag sym st act" "body body body body" "time time time time";gap:6px 8px;padding:12px 4px}
  .alx-c.tag{grid-area:tag}.alx-c.sym{grid-area:sym}.alx-c.st{grid-area:st;justify-self:end}.alx-c.act{grid-area:act}.alx-c.body{grid-area:body}.alx-c.time{grid-area:time}
  .alx-c.time b{display:inline}
}
@media(prefers-reduced-motion:reduce){.alx-k,.alx-sw i,.alx-sw i::after{transition:none}}

/* Màu chủ đạo theo sàn đang chọn (HOSE xanh · HNX tím · UPCoM cam) */
.alx-hs{display:inline-block;vertical-align:middle;margin-left:8px;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--a-brand);background:color-mix(in srgb,var(--a-brand) 14%,transparent);border:1px solid color-mix(in srgb,var(--a-brand) 35%,transparent)}
html[data-skin] .alx .btn.primary,html[data-skin] .al-fbox .btn.primary{background:linear-gradient(120deg,var(--a-brand,var(--house)),color-mix(in srgb,var(--a-brand,var(--house)) 78%,#fff))!important;color:#fff!important;border:0!important;box-shadow:0 6px 16px color-mix(in srgb,var(--a-brand,var(--house)) 30%,transparent)}
.alx-h{border-bottom:2px solid color-mix(in srgb,var(--a-brand) 55%,transparent);padding-bottom:12px}
.al-fbox{--a-brand:var(--house,var(--brand,#16845b));border-top-color:var(--house,var(--brand,#16845b))!important}
html body .al-fbox #af-g button.on{background:var(--a-brand) none;border-color:var(--a-brand);color:#fff}
html body .al-fbox .eyebrow{color:var(--a-brand)}
@media(max-width:720px){.alx-hs{margin:4px 0 0 0;display:inline-block}}
html[data-skin] .alx-h .eyebrow{color:var(--a-brand)}