/* ===================================================================
   VI SAO CAC HIEU UNG DUOI DAY PHAI CO `!important`
   -------------------------------------------------------------------
   Theme Blogger cua trang co san doan reset rat pho bien:

       @media (prefers-reduced-motion: reduce) {
         *, *::before, *::after { animation-duration: .01ms !important; ... }
       }

   No ap len `*` va co `!important`, nen MOI hoat anh tren trang bi ep ve
   0,00001 giay - chay xong tuc khac, mat khong thay gi. Do la ly do ba
   cham, cac nut va dai sang cung chet mot luc, va sua bao nhieu lan trong
   file nay cung vo ich neu khong co `!important`.
   Trieu chung de nhan: `getComputedStyle(el).animationDuration` tra ve
   `1e-05s` tren MOI phan tu, ke ca phan tu khong khai hoat anh nao.

   Chi danh dau `!important` cho dung nhung hieu ung nhe (do mo, bong do,
   do net) - khong dung cho thu gi quet ngang man hinh manh.
   =================================================================== */

/* ANHPNG - cong cu lam net. Bo cuc do chu du an ve tay, gom BA vung:
 *
 *   [quang cao]  [khung anh]  [dieu khien / thong bao]
 *
 * Va ba trang thai khung:
 *   pick  - chua co anh:      [quang cao] [nut Chon anh]
 *   work  - da co anh:        [quang cao] [anh] [dieu khien]
 *   msg   - phai bao han muc: [anh to] [thong bao]   <- quang cao BI AN
 *
 * Vi sao an quang cao o trang thai msg: do la luc duy nhat khach phai doc mot
 * doan chu dai va bam mot nut quyet dinh (dang nhap / mua goi). De quang cao
 * canh do la keo mat khach di khoi dung viec ta can ho lam.
 */

.apx-shell {
  --apx-blue: #1447c9;
  --apx-blue-dark: #0e3597;
  --apx-blue-soft: #eaf0ff;
  --apx-green: #0f7a45;
  --apx-green-bg: #e8f6ee;
  --apx-amber: #8a5a00;
  --apx-amber-bg: #fff5e0;
  --apx-red: #d02419;
  --apx-red-bg: #fdeeec;
  --apx-line: #e2e8f2;
  --apx-bg: #f6f8fc;
  --apx-text: #14203a;
  --apx-muted: #5f7086;
  box-sizing: border-box;
  max-width: 1004px;
  margin: 16px auto;
  padding: 0 12px;
  color: var(--apx-text);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.apx-shell *, .apx-shell *::before, .apx-shell *::after { box-sizing: border-box; }

.apx-card {
  background: #fff;
  border: 1px solid var(--apx-line);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(16, 32, 60, .07);
  overflow: hidden;
}

/* ------------------------------------------------------- thanh nhan dien */
.apx-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 16px;
  background: linear-gradient(180deg, #fbfcff, var(--apx-bg));
  border-bottom: 1px solid var(--apx-line);
}
.apx-id { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.apx-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  object-fit: cover; background: var(--apx-blue-soft);
  border: 1px solid var(--apx-line);
}
.apx-avatar.ghost { display: grid; place-items: center; color: #8496ab; }
.apx-avatar.ghost svg { width: 20px; height: 20px; }
.apx-id-text { min-width: 0; }
.apx-name {
  font-weight: 700; font-size: 14.5px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px;
}
.apx-rank {
  font-size: 12.5px; line-height: 1.35; color: var(--apx-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 380px;
}
.apx-rank b { color: var(--apx-text); font-weight: 700; }
.apx-rank.paid b { color: var(--apx-green); }

.apx-bar-right { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.apx-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent;
}
.apx-chip.free  { color: var(--apx-muted); background: #eef2f7; border-color: #dde4ee; }
.apx-chip.trial { color: var(--apx-amber); background: var(--apx-amber-bg); border-color: #f2dfae; }
.apx-chip.paid  { color: var(--apx-green); background: var(--apx-green-bg); border-color: #bfe3cd; }
.apx-chip.out   { color: var(--apx-red);   background: var(--apx-red-bg);   border-color: #f6c9c4; }

/* --------------------------------------------------------------- nut bam */
.apx-btn {
  appearance: none; border: 1px solid transparent; border-radius: 12px;
  padding: 12px 18px; font: inherit; font-size: 14.5px; font-weight: 700;
  cursor: pointer; text-decoration: none; position: relative; overflow: hidden;
  transition: background-color .16s, border-color .16s, box-shadow .16s, transform .08s;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.apx-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.apx-btn:active:not(:disabled) { transform: translateY(1px); }
.apx-btn:disabled { opacity: .5; cursor: not-allowed; }
.apx-btn.block { width: 100%; }

.apx-btn.primary {
  background: linear-gradient(180deg, #1a55dd, var(--apx-blue));
  color: #fff; box-shadow: 0 4px 14px rgba(20, 71, 201, .28);
}
.apx-btn.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #1449c4, var(--apx-blue-dark));
  box-shadow: 0 6px 18px rgba(20, 71, 201, .36);
}
/* Vet sang chay qua khi ro chuot - nho thoi, du de nut trong "song". */
.apx-btn.primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.30), transparent);
  transform: translateX(-180%);
}
.apx-btn.primary:hover:not(:disabled)::after { animation: apxShine .75s ease !important; }
@keyframes apxShine { to { transform: translateX(320%); } }

.apx-btn.ghost { background: #fff; color: var(--apx-text); border-color: #ccd6e4; }
.apx-btn.ghost:hover:not(:disabled) { background: #f3f6fa; border-color: #b3c2d6; }
.apx-btn.google { background: #fff; color: #2a3646; border-color: #ccd6e4; padding: 9px 15px; font-size: 14px; }
.apx-btn.link {
  background: none; border: 0; color: var(--apx-muted);
  padding: 6px 4px; font-size: 13px; font-weight: 600;
}
.apx-btn.link:hover { color: var(--apx-blue); }

/* ------------------------------------------------------------ ba vung */
.apx-body {
  display: grid; gap: 16px; align-items: center;
  padding: 16px 16px 18px;
}
/* Cot quang cao dat CUNG 300px, dung bang o AdSense.
 * Truoc day chia theo ti le nen no ra 288px va o quang cao 300px bi cat mat
 * 12px o mep - tren blog test khong lo vi AdSense chua tra ve quang cao nao.
 *
 * Cot anh dat cung 250px, dung bang CHIEU CAO cua o AdSense (300x250), nen
 * khung anh vuong 250x250 cao dung bang khoi quang cao ben canh. Chu du an
 * chot lay chieu cao nay lam chuan cho giao dien may tinh. */
.apx-body[data-man="pick"] {
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-areas: "ads main";
}
.apx-body[data-man="work"] {
  grid-template-columns: 300px 250px minmax(0, 1fr);
  grid-template-areas: "ads view side";
}
.apx-body[data-man="msg"] {
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "view side";
}
.apx-ads  { grid-area: ads;  min-width: 0; }
.apx-main { grid-area: main; min-width: 0; }
.apx-view { grid-area: view; min-width: 0; }
.apx-side { grid-area: side; min-width: 0; }

.apx-body[data-man="pick"] .apx-view,
.apx-body[data-man="pick"] .apx-side { display: none; }
.apx-body[data-man="work"] .apx-main { display: none; }
.apx-body[data-man="msg"]  .apx-main,
.apx-body[data-man="msg"]  .apx-ads  { display: none; }
.apx-ads.empty { display: none; }

/* Khong co quang cao nao duoc tra ve thi bo han cot do, khong de lai mot
 * mang trong canh khu lam viec. Tren trang that co quang cao thi bo cuc quay
 * ve dung ba vung nhu ban ve. */
.apx-body.khong-qc[data-man="pick"] { grid-template-columns: 1fr; grid-template-areas: "main"; }
.apx-body.khong-qc[data-man="work"] {
  grid-template-columns: 250px minmax(0, 430px);
  grid-template-areas: "view side";
  justify-content: center;
}

/* ------------------------------------------------------------ quang cao */
/* Khong dat nhan chu nao phia tren: nhan lam khoi quang cao cao hon 250px
 * va lech voi khung anh ben canh. */
.apx-ads { text-align: center; align-self: start; line-height: 0; }

/* --------------------------------------------------- buoc chon anh */
.apx-main { text-align: center; padding: 10px 4px; }
.apx-pick-btn {
  appearance: none; border: 0; cursor: pointer;
  width: 100%; max-width: 420px; padding: 22px 24px;
  border-radius: 16px; font: inherit; font-size: 25px; font-weight: 800;
  letter-spacing: .01em; color: #fff;
  background: linear-gradient(180deg, #1a55dd, var(--apx-blue));
  box-shadow: 0 8px 22px rgba(20, 71, 201, .34);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  position: relative; overflow: hidden;
  transition: transform .12s, box-shadow .16s;
}
.apx-pick-btn svg { width: 27px; height: 27px; }
.apx-pick-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(20, 71, 201, .42); }
.apx-pick-btn:active { transform: translateY(0); }
.apx-pick-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent);
  transform: translateX(-180%);
  animation: apxPickShine 3.4s ease-in-out infinite !important;
}
@keyframes apxPickShine { 0%, 55% { transform: translateX(-180%); } 100% { transform: translateX(320%); } }

.apx-main.over .apx-pick-btn { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(20, 71, 201, .5); }
.apx-pick-hint {
  margin-top: 14px; color: var(--apx-muted); font-size: 14px; line-height: 1.6;
}
.apx-pick-hint b { color: var(--apx-text); font-weight: 700; }
.apx-file { display: none; }

/* Thong bao khi CHUA co anh - nam ngay duoi nut "Chon anh". Cot phai bi an
 * o bo cuc nay nen day la cho duy nhat khach nhin thay duoc. */
.apx-pick-msg:not(:empty) {
  margin: 16px auto 0; max-width: 420px; text-align: left;
  padding: 14px 16px; border-radius: 13px;
  background: var(--apx-red-bg); border: 1px solid #f6c9c4;
}
.apx-pick-msg .apx-msg-text { margin-bottom: 0; }
.apx-pick-msg .apx-msg-text .calm { color: var(--apx-text); font-weight: 600; }
.apx-pick-msg .apx-btn { margin-top: 12px; }

/* --------------------------------------------------- khung anh (VUONG) */
.apx-view { align-self: start; }
.apx-stage {
  position: relative; aspect-ratio: 1 / 1;
  border-radius: 14px; overflow: hidden;
  background: #e9edf4; border: 1px solid var(--apx-line);
  display: grid; place-items: center;
}
.apx-stage img {
  display: block; width: 100%; height: 100%;
  object-fit: contain;                 /* giu dung ti le anh, khong bop meo */
  transition: filter .35s ease;
}
.apx-stage.empty img { display: none; }
/* Luc dang chay: nen toi de vong phan tram mau trang noi ro tren MOI loai
 * anh, ke ca anh nen trang. */
.apx-stage.working { background: #0f1725; border-color: #0f1725; }
/* Anh "tho" rat nhe trong luc chay - bien do nho, chu ky dai, de nguoi nhin
 * cam thay may dang song chu khong phai mot tam anh dung im. */
.apx-stage.working img {
  filter: blur(11px) brightness(.5) saturate(.85);
  animation: apxTho 3.6s ease-in-out infinite alternate !important;
}
@keyframes apxTho {
  from { filter: blur(10px) brightness(.52) saturate(.85); }
  to   { filter: blur(13px) brightness(.46) saturate(.82); }
}

/* Dai sang quet DI ROI QUET LAI - dau hieu "may dang lam viec", khong he
 * noi may dang o cong doan nao. */
.apx-sweep { display: none; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.apx-stage.working .apx-sweep { display: block; }
/* Dai sang: rong hon, mo hon va cham hon ban cu (38% / .55 / 2.4s). Doc o
 * mot dai rong va nhat thi mat doc duoc la "dang chay" ma khong bi keo su chu
 * y khoi vong phan tram - do moi la thu khach can nhin. */
.apx-sweep::after {
  content: ""; position: absolute; top: -25%; bottom: -25%; left: 0; width: 58%;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%, rgba(160,205,255,.11) 28%,
    rgba(255,255,255,.38) 50%, rgba(160,205,255,.11) 72%, rgba(255,255,255,0) 100%);
  animation: apxSweep 4s cubic-bezier(.4, 0, .3, 1) infinite alternate !important;
}
@keyframes apxSweep {
  from { transform: translateX(-105%); }
  to   { transform: translateX(250%); }
}

/* ------------------------------------------------ nut TAI ANH VE MAY
 * Day la khoanh khac khach cho doi ca chuc giay de den. Nut phai noi bat
 * ngay khi hien ra, roi tho nhe de mat khong luot qua - nhung KHONG nhap
 * nhay, vi nhap nhay tren nut chinh trong thanh phien nhieu. */
.apx-btn.tai-ve {
  animation: apxHienNut .34s cubic-bezier(.2,.8,.3,1) both,
             apxNhipSang 3.2s ease-in-out .5s infinite !important;
}
@keyframes apxHienNut {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes apxNhipSang {
  0%, 100% { box-shadow: 0 4px 14px rgba(20, 71, 201, .28); }
  50%      { box-shadow: 0 6px 22px rgba(20, 71, 201, .46); }
}
/* Vet loe chay qua MOT lan luc nut vua hien, khong lap lai. */
.apx-btn.tai-ve::after { animation: apxShine 1.05s ease .28s 1 both !important; }
.apx-btn.tai-ve:hover:not(:disabled) { transform: translateY(-1px); }

.apx-ring { position: absolute; display: none; place-items: center; }
.apx-stage.working .apx-ring { display: grid; }
/* Quang sang rat nhat tho sau vong phan tram. Chi doi DO MO nen no song
 * duoc ca khi khach bat "giam chuyen dong", va vi no nam duoi vong nen khong
 * lam kho doc con so. */
.apx-ring::before {
  content: ""; position: absolute; width: 168px; height: 168px; border-radius: 50%;
  background: radial-gradient(circle, rgba(150,200,255,.30) 0%, rgba(150,200,255,.10) 45%, transparent 70%);
  animation: apxQuang 3.4s ease-in-out infinite alternate !important;
  pointer-events: none;
}
@keyframes apxQuang { from { opacity: .35; transform: scale(.94); } to { opacity: .95; transform: scale(1.06); } }

.apx-ring svg { display: block; transform: rotate(-90deg); position: relative; }
.apx-ring circle { fill: none; stroke-linecap: round; }
.apx-ring .bg { stroke: rgba(255,255,255,.22); }
.apx-ring .fg { stroke: #fff; transition: stroke-dashoffset .35s ease !important; }
.apx-ring-num {
  position: absolute; color: #fff; font-weight: 800;
  font-size: 27px; letter-spacing: -.02em; text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
.apx-ring-num span { font-size: 15px; font-weight: 600; opacity: .85; }

.apx-view-btn { margin-top: 10px; display: none; }
.apx-view-btn.on { display: flex; }

/* --------------------------------------------------- cot dieu khien */
.apx-side { align-self: center; }
.apx-pane { display: none; }
.apx-pane.on { display: block; animation: apxIn .22s ease both; }
@keyframes apxIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.apx-label {
  display: block; font-size: 14px; font-weight: 700;
  margin-bottom: 8px; color: var(--apx-text);
}
.apx-select { position: relative; margin-bottom: 12px; }
.apx-select select {
  width: 100%; padding: 13px 40px 13px 14px; border-radius: 12px;
  border: 1.5px solid var(--apx-blue); background: #fff; font: inherit;
  font-size: 14.5px; font-weight: 600; color: var(--apx-text); cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.apx-select select:focus { outline: 2px solid rgba(20,71,201,.35); outline-offset: 1px; }
.apx-select::after {
  content: ""; position: absolute; right: 15px; top: 50%; pointer-events: none;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--apx-blue); border-bottom: 2px solid var(--apx-blue);
  transform: rotate(45deg);
}

.apx-status-title {
  font-size: 16px; font-weight: 800; color: var(--apx-blue);
  margin-bottom: 6px; display: flex; align-items: center; gap: 8px;
}
.apx-status-title.ok { font-style: italic; }
.apx-status-title svg { width: 19px; height: 19px; }
.apx-status-line { color: var(--apx-muted); font-size: 13.5px; line-height: 1.6; }
.apx-status-line b { color: var(--apx-text); font-weight: 700; }

.apx-dots { display: inline-flex; gap: 4px; margin-left: 2px; }
.apx-dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--apx-blue);
  animation: apxDot 1.2s ease-in-out infinite !important;
}
.apx-dots i:nth-child(2) { animation-delay: .18s; }
.apx-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes apxDot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.apx-done-meta { margin: 4px 0 14px; color: var(--apx-muted); font-size: 13.5px; }
.apx-done-meta b { color: var(--apx-text); font-weight: 700; }

/* ------------------------------------------------------------ thong bao */
.apx-msg-text {
  color: var(--apx-red); font-weight: 700; font-size: 15px; line-height: 1.65;
  margin-bottom: 16px;
}
.apx-msg-text.calm { color: var(--apx-text); font-weight: 600; }
.apx-msg-text b { font-weight: 800; }

/* Nut o man thong bao la loi thoat duy nhat cua khach, nen no phai bat mat:
 * vien sang nhap nhe cong mot vet loe chay qua. */
.apx-cta { width: 100%; font-size: 15px; padding: 14px 20px; animation: apxCtaPulse 2.1s ease-in-out infinite; }
.apx-cta::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  animation: apxCtaShine 2.8s ease-in-out infinite;
}
.apx-cta:hover { animation-play-state: paused; }
@keyframes apxCtaPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(20,71,201,.30), 0 0 0 0 rgba(20,71,201,.42); }
  55%      { box-shadow: 0 4px 14px rgba(20,71,201,.30), 0 0 0 10px rgba(20,71,201,0); }
}
@keyframes apxCtaShine {
  0%        { transform: translateX(-170%); }
  60%, 100% { transform: translateX(330%); }
}

/* O Turnstile nam ngoai luoi de khong chiem mot o cua luoi. */
.apx-turnstile:not(:empty) { display: flex; justify-content: center; padding: 0 0 10px; }

/* Khach bat "giam chuyen dong" (Windows: Tro nang > Hieu ung hinh anh).
 *
 * Truoc day khoi nay tat SACH moi hieu ung - ke ca ba cham va bong do nut -
 * nen man hinh tro nen chet cung: khach khong biet may dang chay hay da treo.
 * Do khong phai y nghia cua thiet lap nay. Thiet lap nay noi "dung DI CHUYEN
 * truoc mat toi", khong noi "dung bao cho toi biet may dang lam viec".
 *
 * Nen o day chi bo nhung gi dung `transform` (dich chuyen, phong to, nay len)
 * va giu lai nhung gi chi doi DO MO / BONG DO / DO NET - mat van doc duoc la
 * may dang chay ma khong co gi quet ngang man hinh.
 */
@media (prefers-reduced-motion: reduce) {
  /* Bo phan DI CHUYEN */
  .apx-cta, .apx-cta::before, .apx-pick-btn::after,
  .apx-btn.primary:hover::after, .apx-btn.tai-ve::after,
  .apx-pane.on { animation: none; }

  /* Dai sang VAN QUET DI QUET LAI, khong doi sang ban dung yen.
   * Chu du an yeu cau ro hieu ung nay, va no khong thuoc loai gay kho chiu:
   * dai rong 58%, do sang dinh .38, mot chu ky 4 giay, khong nhap nhay,
   * khong xoay, khong phong to. Giu nguyen o day de trai nghiem giong nhau
   * tren moi may, thay vi moi may mot kieu. */

  /* Nut tai ve: bo nhip nay len, GIU nhip bong do. */
  .apx-btn.tai-ve { animation: apxNhipSang 3.2s ease-in-out infinite !important; }

  /* Quang sang: bo phan phong to, giu phan mo dan. */
  .apx-ring::before { animation: apxQuangMo 3.4s ease-in-out infinite alternate !important; transform: none; }
  @keyframes apxQuangMo { from { opacity: .35; } to { opacity: .95; } }

  /* Ba cham va anh "tho" giu nguyen: ca hai chi doi do mo / do net,
   * khong dich chuyen mot pixel nao. */
}

@media (max-width: 860px) {
  .apx-body { gap: 14px; padding: 14px 12px 16px; }
  /* Phai neu dich danh ca ban CO va ban KHONG co quang cao: luat
   * `.apx-body.khong-qc[data-man=...]` o tren cu the hon luat trong media
   * query, nen neu chi viet ban thuong thi tren dien thoai hai cot van nam
   * canh nhau va anh bi bop con hon mot phan tu. Da mac dung loi nay mot lan. */
  .apx-body[data-man="pick"],
  .apx-body.khong-qc[data-man="pick"] { grid-template-columns: 1fr; grid-template-areas: "main" "ads"; }
  .apx-body[data-man="work"],
  .apx-body.khong-qc[data-man="work"] { grid-template-columns: 1fr; grid-template-areas: "view" "side" "ads"; }
  .apx-body[data-man="msg"],
  .apx-body.khong-qc[data-man="msg"]  { grid-template-columns: 1fr; grid-template-areas: "view" "side"; }
  .apx-bar { padding: 11px 13px; }
  .apx-name { max-width: 62vw; }
  /* Dong han dung phai xuong hang chu KHONG duoc cat cut: so ngay con lai la
   * thu khach can thay nhat, cat mat la mat luon y nghia cua dong nay. */
  .apx-rank { max-width: none; white-space: normal; overflow: visible; }
  .apx-bar-right { width: 100%; }
  .apx-pick-btn { font-size: 21px; padding: 18px 20px; }
  .apx-pick-hint { font-size: 13.5px; }
}