/* 9A-select-dep.css — danh sach tha xuong (<select class="sel">) theo tong giao dien, khong con hop trang mac dinh. Ben Hai, 24/09/2026.
   Chrome 135+ (may Hai: 153) ho tro "customizable select": appearance:base-select cho select + ::picker(select) -> to duoc ca danh sach.
   Trinh duyet cu: rot ve color-scheme (danh sach he thong toi thay vi trang). Khong sua ma goc. */

/* 1. Rot ve: danh sach he thong theo che do sang/toi (hop trang chu den tren nen den la do thieu dong nay) */
:root, html[data-theme=dark], :root:not([data-theme=light]){color-scheme:dark}
html[data-theme=light]{color-scheme:light}

/* 1b. Ep color-scheme len chinh the select (popup he thong cua Chrome theo color-scheme cua select) */
select{color-scheme:dark}
html[data-theme=light] select{color-scheme:light}

/* 2. Chrome 135+: to lai toan bo. Ap cho <select class="sel"> + o "Moi trang" (.aw-pt-c select, ma goc khong gan class — Hai chup 24/09 16:00: danh sach trang, chu xanh duong).
   KHONG dung ".sel" tran — ma goc dung ".sel" ca cho dong da tick (.tr.sel). */
@supports selector(::picker(select)){
  :is(select.sel,.aw-pt-c select), :is(select.sel,.aw-pt-c select)::picker(select){appearance:base-select}
  :is(select.sel,.aw-pt-c select){display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:6px 32px 6px 12px;border-radius:99px;background:var(--panel);border:1px solid var(--line);color:var(--ink2);font-size:12.5px;cursor:pointer;
    transition:border-color .15s cubic-bezier(.4,0,.2,1),color .15s,background-color .15s}
  :is(select.sel,.aw-pt-c select):hover{border-color:var(--accent);color:var(--ink)}
  :is(select.sel,.aw-pt-c select):open{border-color:var(--accent);color:var(--ink);box-shadow:var(--xc-glow)}
  :is(select.sel,.aw-pt-c select)::picker-icon{color:var(--dim);transition:transform .2s var(--aw-spring,ease-out),color .15s}
  :is(select.sel,.aw-pt-c select):open::picker-icon{transform:rotate(180deg);color:var(--accent)}
  :is(select.sel,.aw-pt-c select)::picker(select){
    margin-top:6px;padding:6px;min-width:anchor-size(width);max-height:min(60vh,420px);overflow:auto;
    background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.5),var(--xc-glow);
    scrollbar-width:thin;scrollbar-color:var(--line) transparent;
    opacity:0;transform:translateY(-6px) scale(.98);
    transition:opacity .16s cubic-bezier(0,0,.2,1),transform .22s var(--aw-spring,ease-out),overlay .16s allow-discrete,display .16s allow-discrete}
  :is(select.sel,.aw-pt-c select)::picker(select):popover-open{opacity:1;transform:none}
  @starting-style{:is(select.sel,.aw-pt-c select)::picker(select):popover-open{opacity:0;transform:translateY(-6px) scale(.98)}}
  :is(select.sel,.aw-pt-c select) option{padding:8px 12px 8px 30px;border-radius:8px;font-size:13px;color:var(--ink2);cursor:pointer;position:relative;
    transition:background-color .12s,color .12s}
  :is(select.sel,.aw-pt-c select) option:hover,:is(select.sel,.aw-pt-c select) option:focus-visible{background:var(--panel2);color:var(--ink);outline:none}
  :is(select.sel,.aw-pt-c select) option:checked{background:var(--accent2);color:var(--accent);font-weight:600}
  :is(select.sel,.aw-pt-c select) option::checkmark{position:absolute;left:10px;color:var(--accent)}
  :is(select.sel,.aw-pt-c select) option:not(:checked)::checkmark{visibility:hidden}
  html[data-theme=light] :is(select.sel,.aw-pt-c select)::picker(select){box-shadow:0 16px 48px rgba(13,19,17,.14)}
  /* o "Moi trang" nho gon hon o loc */
  .aw-pt-c select{min-height:28px;padding:3px 26px 3px 10px;font-size:12px;margin-left:6px}
  .aw-pt-c select::picker-icon{margin-right:-14px}
  .aw-pt-c select::picker(select){min-width:max(anchor-size(width),88px)}
}