/* 95-giao-dien-xcloud.css — lop phu giao dien AffWorth theo tong XCloudPhone (den + xanh ngoc + trang). Ben Hai, 23/09/2026 (ban 2, sau soat 19 muc).
   Chi doi MAU + thanh ben + an/hien + hoat anh chuyen tab; khong doi cau truc hang bang. Dat trong ao-moi/, chen SAU cac lop phu khac.
   Bo di la ve nguyen ban. Khong co @media(prefers-reduced-motion): Windows tat "Animation effects" la Chrome tu khop, se tat sach hoat anh (loi 23/09). */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* ── 0. Font: Inter cho tat ca (ke ca so, bo Geist Mono), tabular-nums de cot so thang hang ── */
body, body *:not(svg):not(svg *){font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;font-variant-numeric:tabular-nums}
body{letter-spacing:-.005em}
h1,.h1{letter-spacing:-.02em}

/* ── 1. Bang mau. KHONG dat ":root" tran: o che do sang cac bien khong khai lai phai roi ve bo sang goc ── */
html[data-theme=dark], :root:not([data-theme=light]) {
  --bg:#050505;            /* den han (XCloudPhone body 4%, chi Hieu muon den hon) */
  --panel:#111111;         /* the */
  --panel2:#1a1a1a;        /* hover, dau bang */
  --line:#232323;          /* vien */
  --line2:#171717;
  --ink:#f2f2f2;           /* --foreground 95% */
  --ink2:#d4d4d4;
  --dim:#8f8f8f;
  --accent:#35d49a;        /* --primary hsl(158 64% 52%) */
  --accent2:#0f2a1f;
  --green:#35d49a;
  --greenbg:#0f2a1f;
  --amber:#f4a362;  --amberbg:#1a1a1a;   /* XCloudPhone chart-5 hsl(27 87% 67%); nen trung tinh, KHONG nau */
  --red:#ef4444;    --redbg:#1a1a1a;     /* --destructive hsl(0 84% 60%) */
  --violet:#b39cff; --violetbg:#1a1a1a;
  --blue:#60a5fa;   --bluebg:#1a1a1a;    /* --info hsl(213 94% 68%) */
  --sh:0 1px 2px rgba(0,0,0,.45),0 8px 24px rgba(0,0,0,.35);
  --xc-glow:0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent),0 0 18px color-mix(in srgb,var(--accent) 12%,transparent);
}
html[data-theme=light]{
  --bg:#f4f7f7; --panel:#ffffff; --panel2:#eef3f2; --line:#dbe3e1; --line2:#e6ecea;
  --ink:#0d1315; --ink2:#334046; --dim:#6a7a80;
  --accent:#0f7a4a; --accent2:#e0f6ef; --green:#0f7a4a; --greenbg:#e0f6ef;   /* #0f7a4a = mau brand goc, chu tren nen trang dat AA */
  --amber:#b45309; --amberbg:#fdf4e4; --red:#c2410c; --redbg:#fdefe7;
  --violet:#6d28d9; --violetbg:#f1ecfd; --blue:#0369a1; --bluebg:#e6f2fb;
  --sh:0 1px 2px rgba(13,19,17,.04),0 8px 24px rgba(13,19,17,.06);
  --xc-glow:0 0 0 1px rgba(15,122,74,.25),0 0 14px rgba(15,122,74,.10);
}
body{background:var(--bg);color:var(--ink)}
.aw-beta{background:#0d0d0d!important;color:var(--ink2)!important;border-bottom:1px solid var(--line)}
.aw-beta .aw-beta-k{background:var(--accent)!important;color:#06221b!important}
.aw-beta .aw-beta-x{color:var(--dim)!important}
/* "Luc" chuyen dong = lo xo cua XCloudPhone (motion spring stiffness 320, damping 32): JS tinh linear() 40 diem va ghi vao --aw-spring;
   trinh duyet cu khong hieu linear() thi dung cubic-bezier gan giong (bat nhanh, tat dan mem). Thoi luong 0,45 s = luc lo xo tat hẳn. */
:root{--aw-spring:cubic-bezier(.2,.9,.25,1);--aw-spring-t:.45s}

/* ── 1b. Anh sang: quang mo xanh ngoc goc tren trai (nguon sang), vet sang doc mep thanh ben ── */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(900px 520px at -8% -12%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 62%),
             radial-gradient(700px 400px at 108% 110%,color-mix(in srgb,var(--accent) 6%,transparent),transparent 60%)}
aside.nav::after{content:"";position:absolute;top:0;right:-1px;width:1px;height:100%;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 55%,transparent),transparent 38%,transparent 62%,color-mix(in srgb,var(--accent) 22%,transparent))}
aside.nav{position:relative}

/* ── 2. Thanh ben: cuon rieng, thanh cuon manh ── */
aside.nav{
  background:var(--panel);
  border-right:1px solid var(--line);
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;   /* lan chuot tren thanh ben het cho thi DUNG, khong keo bang ben phai cuon theo */
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
aside.nav::-webkit-scrollbar{width:6px}
aside.nav::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
aside.nav::-webkit-scrollbar-thumb:hover{background:var(--dim)}
aside.nav .nv{
  padding:9px 11px; border-radius:11px; font-size:13.5px; color:var(--ink2);
  transition:background-color .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),
    padding var(--aw-spring-t) var(--aw-spring),width var(--aw-spring-t) var(--aw-spring);
}
aside.nav .nv .ic{width:18px;height:18px;color:var(--dim);transform-origin:0 50%;transition:color .15s cubic-bezier(.4,0,.2,1),transform var(--aw-spring-t) var(--aw-spring)}
aside.nav .brand svg{transform-origin:0 50%;transition:transform var(--aw-spring-t) var(--aw-spring)}   /* phong icon bang transform: card do hoa lo, khong tinh lai bo cuc */
aside.nav .aw-nvn{min-width:0}   /* chu nhan: 96 boc text node vao span nay de 95 cho mo dan / co lai ma khong dung font-size:0 */
aside.nav .nv:hover{background:var(--panel2);color:var(--ink)}
aside.nav .nv:hover .ic{color:var(--accent)}
aside.nav .nv.on{background:var(--accent2);color:var(--accent);font-weight:600;box-shadow:inset 3px 0 0 var(--accent),0 0 22px color-mix(in srgb,var(--accent) 18%,transparent)}
aside.nav .nv.on .ic{color:var(--accent)}
aside.nav .nv .cnt{background:var(--panel2);color:var(--dim);font-size:10.5px}
aside.nav .nv.on .cnt{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
aside.nav .nv.on::after{content:"";width:6px;height:6px;border-radius:99px;background:var(--accent);margin-left:6px;box-shadow:0 0 8px var(--accent)}
.brand svg rect:first-child{fill:var(--accent)}
.brand{font-size:16px;transition:padding var(--aw-spring-t) var(--aw-spring)}
aside.nav .brand svg{width:24px;height:24px}

/* ── 3. Thanh tren + nut ── */
.top{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.prim{background:var(--accent);border-color:var(--accent);color:#06221b;font-weight:700;box-shadow:var(--xc-glow)}
.prim:hover{filter:brightness(1.08)}
html[data-theme=light] .prim{color:#fff}
.nd-b.p{color:#06221b;font-weight:700}
html[data-theme=light] .nd-b.p{color:#fff}
.ghost{background:var(--panel);border-color:var(--line);color:var(--ink2)}
.ghost:hover{border-color:var(--accent);color:var(--ink)}
.theme{background:var(--panel);border-color:var(--line)}
.omni{background:var(--panel);border-radius:12px}   /* khong them vien: vien lam .top cao them 2px sau khi --topH da do */
.omni input{color:var(--ink)}
.omni kbd{display:none}   /* bo nhan ⌘K (ky hieu Mac, gay kho hieu tren Windows); phim tat Ctrl+K van chay */
/* 3b. gom cac cho xanh cung #22c55e cua ma goc ve --accent */
.aw-xanh,.aw-tr.on,#awGia .aw-nhan,#awTuong .aw-logo,#awTuong .aw-em button,.tr.aw-khoa-dong:hover::after{background:var(--accent);border-color:var(--accent);color:#06221b}
html[data-theme=light] .aw-xanh,html[data-theme=light] .aw-tr.on{color:#fff}
#awGia .aw-noi{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.aw-qcb:hover{border-color:var(--accent)}

/* ── 4. Bang: giu nguyen hang, chi chinh de vua man hinh 100% ── */
.tbl{border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--sh),0 30px 80px -40px color-mix(in srgb,var(--accent) 22%,transparent)}
.th{background:var(--panel2);color:var(--dim);border-bottom:1px solid var(--line)}
.tr{border-bottom:1px solid var(--line2)}
.tr:hover{background:var(--panel2)}
/* dong da tick: ma goc de ".sel" (lop cua o chon bo loc: bo tron 99px, padding 6px 11px) dinh vao .tr.sel -> ep ve mot hang thang, nen xanh, vach xanh mep trai */
#rows>.tr.sel{display:grid;background:var(--accent2);border:0;border-bottom:1px solid var(--line2);border-radius:0;padding:10px 12px;font-size:inherit;box-shadow:inset 3px 0 0 var(--accent)}
#rows>.tr.sel:hover{background:color-mix(in srgb,var(--accent2) 80%,var(--panel2))}
html.compact #rows>.tr.sel{padding:7px 14px}
#th,#rows>.tr{column-gap:7px}
.tr{padding:10px 12px}
.th{padding:9px 12px}
.wrap{max-width:none;padding-left:22px;padding-right:22px}   /* KHONG transition padding: doi padding tung khung = bang xep lai chu 27 lan/giay (lag) */
@media(max-width:760px){.wrap{padding-left:14px;padding-right:14px}}
.tr .bd,.tr .tp-s{border-radius:10px}
.tr .bd{box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 28%,transparent)}
.tg{box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 22%,transparent)}
.card,.plan{background:var(--panel);border-color:var(--line);border-radius:14px}
.chip{background:var(--accent2);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
a{color:var(--accent)}
/* 4a. Logo du an (favicon Google): nhieu logo DEN hoac nen trong suot -> chim vao nen toi. Lot o SANG sau logo (nhu Google Search
   che do toi). 96 gan .aw-logo khi anh tai XONG va hop le; logo loi van hien chu cai tren nen toi nhu cu.
   Vien toi mo bam theo hinh (drop-shadow) de logo TRANG nen trong suot van thay tren o sang. Google khong mo CORS nen khong doc
   duoc mau tung logo de chon nen rieng. */
html .ava.aw-logo{background:#eceeed;border-color:transparent;transition:background-color .25s cubic-bezier(.4,0,.2,1),border-color .25s}
html .ava.aw-logo img{filter:drop-shadow(0 0 .6px rgba(0,0,0,.5))}
html[data-theme=light] .ava.aw-logo{background:#fff;border-color:var(--line)}
/* tieu de cot dinh (.th) chui duoi .top 28px khi dai BETA bat: ma goc chi do chieu cao .top vao --topH, khong cong 28px */
.th{top:calc(var(--topH,61px) + 28px)}
html.aw-beta-off .th{top:var(--topH,61px)}

/* ── 4b. Hang bo loc: 5 o chon o HANG TREN, nut bat/tat + nut phu o HANG DUOI (JS chen .aw-break sau #fsort) ── */
.tools{row-gap:9px}
.tools .aw-break{flex-basis:100%;height:0;margin:0;padding:0}
/* hop "Cot" mo ve ben TRAI nut (nut nam sat mep phai) -> khong loi ra ngoai man hinh */
.popbox{left:auto;right:0;max-height:min(70vh,520px);overflow-y:auto}

/* ── 5. Nut 3 gach: 3 thanh do JS dung ── */
#navBtn{display:inline-flex!important;border-radius:10px;transition:background-color .15s cubic-bezier(.4,0,.2,1),border-color .15s,color .15s}
#navBtn:hover{border-color:var(--accent);color:var(--accent)}
#navBtn svg{display:none}
#navBtn .aw-bars{display:flex;flex-direction:column;gap:4px;width:18px;align-items:flex-start}
#navBtn .aw-bars i{display:block;height:2px;width:18px;border-radius:2px;background:currentColor;transition:width var(--aw-spring-t) var(--aw-spring)}
#navBtn:hover .aw-bars i:nth-child(2){width:12px}

@media(min-width:1051px){
  .app{grid-template-columns:214px 1fr}   /* KHONG transition cot luoi: JS truot nguyen khoi <main> bang transform (FLIP), nhu XCloudPhone */
  .app>main{will-change:transform}
  html.aw-dong{overflow-x:hidden}          /* trong luc truot, main tran ra ngoai 148px -> khong hien thanh cuon ngang */
  /* thanh ben CO DINH theo man hinh; cot cua luoi chi giu cho; main phai o cot 2 vi aside fixed khong con la o luoi */
  aside.nav{position:fixed;left:0;top:28px;height:calc(100vh - 28px);width:214px;z-index:40;box-sizing:border-box;
    scrollbar-gutter:stable;   /* giu san cho thanh cuon: be rong ben trong KHONG doi khi thanh cuon hien/an giua luc truot */
    transition:width var(--aw-spring-t) var(--aw-spring),padding var(--aw-spring-t) var(--aw-spring)}
  html.aw-beta-off aside.nav{top:0;height:100vh}
  .app>main{grid-column:2;min-width:0}

  /* ── THU NHO = cot icon 66px. Ban 3 (25/09): MUOT nhu XCloudPhone.
     Loi ban 2 (do bang Chrome quay cham 10 lan): nut co ve 48px ngay khung dau trong khi chu con nguyen co -> chu bi ep xuong
     2-4 dong, danh sach ngach phinh 300px roi bat nguoc len o 124ms; luc mo ra chu hien lai trong nut hep -> danh sach "chay len" tung nac.
     Cach moi:
     - icon DUNG YEN o x=23px: padding thanh ben 12->9 va padding nut 11->14 chay cung 1 lo xo, tong luon bang nhau
     - chu nhan (span.aw-nvn do 96 boc) mo dan + lui 6px, chieu cao co ve 0 theo lo xo. Trong luc chay 96 DONG BANG be rong nhan
       theo kich thuoc luc mo rong -> chu KHONG xuong dong lai tung khung hinh, dong 2 chu co chieu cao muot
     - khoi phu (khoang dem, nhan "Ngach", the Goi/So tay/Tai khoan) co chieu cao + mo dan thay cho display:none dot ngot
     - html.aw-nav-dong = dang chay (96 gan luc bam, go sau 0,52 s)
     - aside.nav.aw-do-mo = 96 tam cho thanh ben ve lai dang MO RONG de do kich thuoc cuoi (moi luat thu nho co :not(.aw-do-mo));
       doi class tren CHINH thanh ben nen trinh duyet chi tinh lai thanh ben, khong dung toi bang ben phai
     - .aw-nav-phu = khoi phu (96 gan class: khoang dem, nhan "Ngach", cac the). Dung class thay cho div:not(...) de doi class tren html
       khong bat trinh duyet tinh lai MOI the div cua bang */
  aside.nav .nv{min-height:calc(18px + 1lh)}   /* hang 1 dong cao KHONG doi (chu co ve 0 dung luc icon lon dan -> hang lun 2px roi phong lai) */
  aside.nav .aw-nvn{transition:opacity .22s cubic-bezier(0,0,.2,1) .1s,transform var(--aw-spring-t) var(--aw-spring),height var(--aw-spring-t) var(--aw-spring)}
  aside.nav .nv .cnt,aside.nav .nv .aw-ai-moi,aside.nav .nv.on::after{transition:opacity .2s cubic-bezier(0,0,.2,1) .14s}
  aside.nav > .aw-nav-phu{transition:height var(--aw-spring-t) var(--aw-spring),padding var(--aw-spring-t) var(--aw-spring),
    margin var(--aw-spring-t) var(--aw-spring),border-width var(--aw-spring-t) var(--aw-spring),opacity .22s cubic-bezier(0,0,.2,1) .12s}
  html.aw-nav-dong aside.nav .aw-nvn,html.aw-nav-dong aside.nav > .aw-nav-phu{overflow:hidden}

  html.aw-nav-gon .app{grid-template-columns:66px 1fr}
  html.aw-nav-gon aside.nav:not(.aw-do-mo){width:66px;padding-left:9px;padding-right:9px}
  html.aw-nav-gon:not(.aw-nav-dong) aside.nav:not(.aw-do-mo){overflow:visible}   /* nghi: tooltip loi ra ngoai duoc; dang chay: cat gon chu o mep */
  html.aw-nav-gon aside.nav:not(.aw-do-mo) .brand{padding-left:11px}               /* logo dung yen x=20 (9+11 = 12+8) */
  html.aw-nav-gon aside.nav:not(.aw-do-mo) .brand svg{transform:scale(1.0833)}   /* 24 -> 26px */
  html.aw-nav-gon aside.nav:not(.aw-do-mo) .nv{width:48px;padding:9px 0 9px 14px;position:relative}   /* KHONG margin:auto: can giua la icon troi ngang */
  html.aw-nav-gon aside.nav:not(.aw-do-mo) .nv .ic{transform:scale(1.25)}   /* net ve 16 -> 20px, hop 18px giu nguyen */
  html.aw-nav-gon aside.nav:not(.aw-do-mo) .aw-nvn{opacity:0;height:0!important;transform:translateX(-6px);overflow:hidden;pointer-events:none;
    transition:opacity .12s cubic-bezier(.4,0,1,1),transform var(--aw-spring-t) var(--aw-spring),height var(--aw-spring-t) var(--aw-spring)}
  html.aw-nav-gon aside.nav:not(.aw-do-mo) .nv .cnt,
  html.aw-nav-gon aside.nav:not(.aw-do-mo) .nv .aw-ai-moi,
  html.aw-nav-gon aside.nav:not(.aw-do-mo) .nv.on::after{opacity:0;transition:opacity .1s cubic-bezier(.4,0,1,1)}
  html.aw-nav-gon aside.nav:not(.aw-do-mo) > .aw-nav-phu{height:0!important;padding-top:0!important;padding-bottom:0!important;
    margin-top:0!important;margin-bottom:-2px!important;border-top-width:0!important;border-bottom-width:0!important;   /* -2px = bu khoang gap:2px cua thanh ben */
    opacity:0;overflow:hidden;pointer-events:none;
    transition:height var(--aw-spring-t) var(--aw-spring),padding var(--aw-spring-t) var(--aw-spring),margin var(--aw-spring-t) var(--aw-spring),
      border-width var(--aw-spring-t) var(--aw-spring),opacity .12s cubic-bezier(.4,0,1,1)}
  html.aw-nav-gon:not(.aw-nav-dong) aside.nav:not(.aw-do-mo) :is(.aw-nvn,.cnt,.aw-ai-moi),
  html.aw-nav-gon:not(.aw-nav-dong) aside.nav:not(.aw-do-mo) .nv.on::after,
  html.aw-nav-gon:not(.aw-nav-dong) aside.nav:not(.aw-do-mo) > .aw-nav-phu{visibility:hidden}   /* nghi o cot icon: an han, khong bat chuot */
  html.aw-nav-gon aside.nav:not(.aw-do-mo) .nv.on{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
  /* tooltip ten muc khi re chuot (chi luc nghi, khong hien giua luc truot) */
  html.aw-nav-gon:not(.aw-nav-dong) aside.nav:not(.aw-do-mo) .nv:hover::before{
    content:attr(data-aw-ten);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
    background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:5px 9px;
    font-size:12px;font-weight:500;white-space:nowrap;z-index:60;box-shadow:var(--sh);pointer-events:none;
    animation:awTip .16s cubic-bezier(0,0,.2,1) both;
  }
  html.aw-nav-gon #navBtn{background:var(--accent2);border-color:var(--accent);color:var(--accent);box-shadow:var(--xc-glow)}
  html.aw-nav-gon #navBtn .aw-bars i:nth-child(1){width:10px}
  html.aw-nav-gon #navBtn .aw-bars i:nth-child(2){width:18px}
  html.aw-nav-gon #navBtn .aw-bars i:nth-child(3){width:10px}
  /* luot tai dau: khong truot (JS gan roi go class nay sau 2 khung hinh) */
  html.aw-no-anim aside.nav,html.aw-no-anim aside.nav *,html.aw-no-anim aside.nav *::after,html.aw-no-anim .app,html.aw-no-anim .wrap{transition:none!important}
  /* luc 96 do / dong bang / go bang kich thuoc: tat chuyen dong CHI trong thanh ben */
  aside.nav.aw-do,aside.nav.aw-do *,aside.nav.aw-do *::after{transition:none!important}
}
@keyframes awTip{from{opacity:0;transform:translate(-4px,-50%)}to{opacity:1;transform:translate(0,-50%)}}

/* ── 6. Hoat anh chuyen tab / doi ngach: mo dan + truot len 10px, easing ease-out cua XCloudPhone ── */
@keyframes awVao{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes awTab{from{opacity:0;transform:translateY(6px) scale(.995)}to{opacity:1;transform:none}}
.wrap.aw-vao{animation:awTab var(--aw-spring-t) var(--aw-spring) both}
.hrow.aw-vao{animation:awVao var(--aw-spring-t) var(--aw-spring) both}
#rows.aw-vao>.tr{animation:awVao var(--aw-spring-t) var(--aw-spring) both}