/* 9B-di-dong.css — toi uu dien thoai (<=760px). Ben Hai, 24/09/2026. Do tren Chrome an 390x844 truoc khi sua:
   thanh tren cao 76px (o ngon ngu "Tiếng Việt" xuong 2 dong 78x51, o tim con "T."), hang bang cao 100px, thanh chon nhieu 233x107 (chu va nut xuong dong).
   Khong sua ma goc. */
@media (max-width:760px){
  /* ── thanh tren: 1 dong, khong xuong hang ── */
  .top{flex-wrap:nowrap;gap:6px;padding:8px 10px;align-items:center}
  .top > *{flex:none}
  .top .omni{flex:1 1 56px;min-width:56px}
  .top #navBtn{width:34px;height:34px}
  .top .brand{font-size:14px;gap:6px;padding:0}
  .top .brand svg{width:20px;height:20px}
  .top #langBtn{max-width:118px;font-size:12px;padding:6px 26px 6px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:32px}
  .top .prim{padding:6px 10px;font-size:12px;white-space:nowrap}
  .top .theme{display:none}

  /* ── thanh chon nhieu: dan day duoi, 1 dong, nut gon ── */
  .bulk{left:10px!important;right:10px!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;transform:none!important;width:auto;
    border-radius:14px;padding:8px 8px 8px 12px!important;gap:6px!important;flex-wrap:nowrap;justify-content:space-between;font-size:12px!important;animation-name:awBulkM!important}
  .bulk > span,.bulk > b{white-space:nowrap}
  .bulk button{padding:6px 10px!important;font-size:11.5px!important;white-space:nowrap;line-height:1.1}
  .bulk #bwa{order:2}.bulk #aw-bunwatch{order:3}.bulk #bcl{order:4}
  @keyframes awBulkM{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

  /* ── hang bang gon hon: 100px -> ~78px ── */
  .tr{padding:8px 10px!important;column-gap:6px!important}
  .tr .nm{font-size:13.5px}
  .tr .dm{font-size:11.5px}
  .tr .tg{font-size:10px;padding:1px 6px}
  .tr .n{font-size:13px}
  .tr .n small{font-size:10px}
  .ava{width:32px!important;height:32px!important}
  .th{padding:8px 10px!important;column-gap:6px!important;font-size:9.5px}
  .tbl::before{padding:0 10px 6px;font-size:11px}
  html[lang="vi"] .tbl::before{content:"Vuốt ngang để xem các cột khác"}

  /* ── khoang cach chung ── */
  .wrap{padding-top:14px}
  h1,.h1{font-size:21px}
  .aw-h1-ic{width:28px;height:28px;border-radius:8px;vertical-align:-6px;margin-right:7px}
  .aw-h1-ic svg{width:16px;height:16px}
  #aw-lich-su{padding:6px 10px;gap:5px}
  #aw-lich-su .aw-ls-chip i{display:none}
  .tools{gap:6px;row-gap:7px}
  .tools .sel{padding:5px 22px 5px 10px;font-size:12px;min-height:30px}
  .tools .tog{padding:5px 9px;font-size:12px}
  #awAuth .aw-hang{padding:9px 11px}
}
@media (max-width:420px){
  .top .brand span,.top .brand:not(:has(svg)){display:none}
  .top #langBtn{max-width:92px}
}

/* ═════ BAN 2 — 25/09/2026, sau khi Hai chup iPhone that ("phan dien thoai chua on") ═════
   Do tren Chrome gia lap iPhone 393x852 (DPR 3, cham), trang that + 22 lop phu. 7 loi:
   1 hop dang ky rong co dinh 440px > man 393px (goc: width:min(440px,100%) trong luoi place-items:center -> 100% an theo noi dung)
   2 thanh tren chat: o tim con 73px "Tì…", o ngon ngu bi cat
   3 bang bi CAT, khong vuot duoc: goc dong 242 cho cuon ngang (<=760px) nhung dong 361 ".tbl{overflow:clip}" de mat;
     cot Ket luan nam o 765px, man chi 365px -> tren dien thoai KHONG BAO GIO thay, du dong chu bao "Vuot ngang…"
   4 mui ten ↕ ↗ thanh emoji o xanh tren iPhone (JS: 9D-goi-ui.js muc J1)
   5 iPhone tu phong to trang khi cham o chu <16px (o tim 15px, o email 14px, o so 14px…) roi khong tu thu lai
   6 tab Du bao doanh thu tran 431px (.calc cot 1fr gian theo noi dung)
   7 dong dinh mau :hover sau khi cham */

/* ── 1. Hop dang ky vua man ── */
#awTuong .aw-hop{width:min(440px,calc(100vw - 36px))}
@media (max-width:520px){
  #awTuong{padding:12px}
  #awTuong .aw-hop{width:calc(100vw - 24px);padding:22px 18px 18px}
  #awTuong h2{font-size:21px;line-height:1.25}
  #awTuong .aw-em{flex-direction:column;gap:10px}
  #awTuong .aw-em button{width:100%;padding:12px 14px}
  #awTuong .aw-em input{padding:11px 12px}
}

/* ── 5. O nhap >=16px tren dien thoai: iPhone khong tu phong to nua (o select: JS them maximum-scale=1 chi tren iOS) ── */
@media (max-width:760px){
  #cq,#aq,input[name="d"],#awTuong .aw-em input,#aw-hoi input,.draw input:not([type=range]):not([type=checkbox]),
  #p-tinh input:not([type=range]):not([type=checkbox]),#p-quymo input:not([type=range]):not([type=checkbox]),textarea{font-size:16px!important}
}

/* ── 2. Thanh tren <=640px: chu "AffWorth" -> logo chu A (26px), bo khoang trong flex:1 de o tim duoc phan con lai;
      o ngon ngu chi ghi VI / EN (JS 9D muc J3). O tim la o CHI DOC (cham vao mo bang tim #cmdk), nen khong can bung ra ── */
@media (max-width:640px){
  .top{gap:6px;padding:8px 10px}
  .top::before{content:"";flex:none;width:26px;height:26px;border-radius:8px;font-size:0;
    background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M22.5 47 L32 18 L41.5 47' fill='none' stroke='white' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='13' y='34.5' width='38' height='5.4' rx='2.7' fill='white'/%3E%3C/svg%3E") center/17px 17px no-repeat}
  .top > div[style*="flex:1"]{display:none}
  .top .omni{flex:1 1 auto;min-width:0;max-width:none}
  .top #langBtn{max-width:64px!important;padding-left:10px;padding-right:24px}
  .top .prim{padding:7px 11px}
}

/* ── 3a. <=640px: moi dong bang thanh THE gon, khong phai vuot ngang ──
   Thu tu o trong dong (ORD Linh 20/09, co dinh): 1 tick · 2 logo · 3 ten · 4 Traffic · 5 Organic · 6 HH–don · 7 CPC · 8 Nha QC
   · 9 Trustpilot · 10 Dang ky · 11 Do luc · 12 › (25/09 bo cot Ket luan). The hien: tick, logo, ten, Traffic/HH–don/CPC.
   Organic, Nha QC, Trustpilot, Dang ky, Do luc: cham vao the -> ngan chi tiet co du. */
@media (max-width:640px){
  .th{display:none!important}
  .tbl::before{display:none!important}
  .th,#rows{min-width:0!important}
  /* 7 cot: 2 cot co dinh (tick, logo) + 5 cot bang nhau f. Hang tren: tick · logo · ten (3f) · ket luan (2f).
     Hang duoi chay HET be ngang the: Traffic (tick+logo+f ≈ 2f) · HH–don (2f) · CPC (2f) -> ~107px moi o o man 393px,
     "10% – $14.24" va "$0.20 – $1.66" khong gay dong nua */
  #rows>.tr{grid-template-columns:20px 34px repeat(5,minmax(0,1fr))!important;
    grid-template-areas:"ck ava ten ten ten ten ten" "s1 s1 s1 s2 s2 s3 s3";
    column-gap:6px!important;row-gap:12px!important;padding:12px 12px 13px!important;align-items:start}
  #rows>.tr>div:nth-child(1){grid-area:ck;align-self:start;margin-top:8px}
  #rows>.tr>div:nth-child(2){grid-area:ava}
  #rows>.tr>div:nth-child(3){grid-area:ten;min-width:0}
  #rows>.tr>div:nth-child(4){grid-area:s1}
  #rows>.tr>div:nth-child(6){grid-area:s2}
  #rows>.tr>div:nth-child(7){grid-area:s3}
  /* duoi ten chi giu nhan mang luoi + nhan "da dang ky…" (.g); "% HH" da co o o HH–don, cookie co trong ngan chi tiet */
  #rows>.tr>div:nth-child(3) .tags .tg:not(:first-child):not(.g){display:none}
  #rows>.tr>div:is(:nth-child(5),:nth-child(8),:nth-child(9),:nth-child(10),:nth-child(11),:nth-child(12)){display:none}
  #rows>.tr>div:is(:nth-child(4),:nth-child(6),:nth-child(7)){text-align:left;min-width:0;font-size:13px!important;line-height:1.3;overflow-wrap:anywhere}
  #rows>.tr>div:is(:nth-child(4),:nth-child(6),:nth-child(7))::before{display:block;margin-bottom:3px;font-size:9.5px;font-weight:600;
    letter-spacing:.07em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
  #rows>.tr>div:nth-child(4)::before{content:"Traffic"}
  #rows>.tr>div:nth-child(6)::before{content:"Commission"}
  html[lang="vi"] #rows>.tr>div:nth-child(6)::before{content:"Hoa hồng"}
  #rows>.tr>div:nth-child(7)::before{content:"CPC"}
  #rows>.tr>div:nth-child(7) small{display:none}
  #rows>.tr>div:is(:nth-child(4),:nth-child(6),:nth-child(7)) small{font-size:10.5px}
  .tr .nm{font-size:14.5px}
}
/* ── 3b. 641–760px (may tinh bang doc, dien thoai xoay ngang): van la bang, nhung cho cuon ngang that (dong chu "Vuot ngang" nay moi dung) ── */
@media (min-width:641px) and (max-width:760px){ .tbl{overflow-x:auto} .th{position:static} }

/* ── 6. Tab Du bao doanh thu: cot 1fr = minmax(auto,1fr) gian theo noi dung -> 417px; ep minmax(0,1fr) ── */
@media (max-width:1050px){ .calc{grid-template-columns:minmax(0,1fr)} }
.calc > *{min-width:0}

/* ── 7. May cham (khong co chuot): bo mau :hover dinh lai sau khi cham, bo nhan "Mo khoa" noi tren dong khoa ── */
@media (hover:none){
  #rows>.tr:not(.sel):hover{background:none}
  .tr.aw-khoa-dong:hover::after{display:none}
}
