/* Trang san pham TikTok Live 24/7. Dung lai bien mau + nhip chu cua assets/styles.css,
   chi them phan rieng cua trang nay. */

.tl-page{background:#fff}

/* Thanh menu nam DE LEN hero toi thay vi la mot dai trang rieng ben tren — bo duoc duong cat
   ngang lam trang trong nhu hai manh ghep, va man hinh dau tien lien mach mot khoi. */
.tl-page .site-header{position:absolute;top:0;left:0;right:0;z-index:10;max-width:1120px;margin:auto;
  border-bottom:1px solid rgba(160,225,238,.16);background:transparent}
.tl-page .site-header nav{display:flex;color:#b9d6e0}
.tl-page .site-header nav a:hover{color:#6ff0e0}
.tl-page .site-header .brand{color:#fff}
/* Logo la anh mau navy — dat thang len nen toi thi chim. Long trong mot o nen sang de no noi. */
.tl-page .site-header .brand-mark{background:#fff;border-radius:9px;padding:3px;box-sizing:content-box}
.tl-page .site-header .brand b{color:#5fe3e0}
.tl-page .site-header>.button{background:rgba(255,255,255,.1);border:1px solid rgba(160,225,238,.34);color:#eaf8fa;box-shadow:none}
.tl-page .site-header>.button:hover{background:rgba(255,255,255,.2)}
.tl-hero-wrap{padding-top:74px}

/* ---------------------------------------------------------------- hero (nen toi cong nghe)

   Truoc day hero nen trang, cung tone voi ca trang -> nhin phang, khong co diem nhan va khong
   goi duoc cam giac "phong live". Doi sang nen toi + luoi + quang sang mau neon: mat nguoi xem
   bat duoc ngay day la san pham live/game, va phan con lai cua trang (nen sang) nho do noi han.  */

.tl-hero-wrap{position:relative;overflow:hidden;background:linear-gradient(165deg,#0a2033 0%,#0e3247 46%,#124b5c 100%)}

/* Luoi mo phong "khong gian ky thuat" — rat mo, chi du de be mat khong bi phang lì. */
.tl-grid-bg{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(120,220,235,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(120,220,235,.055) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 78% 68% at 50% 42%,#000 40%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 78% 68% at 50% 42%,#000 40%,transparent 100%)}

/* Hai quang sang mau TikTok (cyan + hong) — nguon sang duy nhat, dat lech nhau cho co chieu sau. */
.tl-glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(70px)}
.tl-glow-1{width:520px;height:520px;top:-190px;right:-90px;background:radial-gradient(circle,rgba(37,244,238,.34),transparent 68%)}
.tl-glow-2{width:440px;height:440px;bottom:-210px;left:-120px;background:radial-gradient(circle,rgba(254,44,85,.24),transparent 68%)}

.tl-hero{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center;padding-top:74px;padding-bottom:86px}

/* Nhan "dang phat" co cham do nhap nhay — tin hieu quen thuoc cua nguoi xem live. */
.tl-live-pill{display:inline-flex;align-items:center;gap:9px;padding:8px 15px 8px 11px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(140,225,240,.28);
  font-size:11px;font-weight:800;letter-spacing:.1em;color:#9fe4ee}
.tl-live-pill b{width:8px;height:8px;border-radius:50%;background:#ff4d6a;flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(255,77,106,.2);animation:tl-live 1.6s ease-in-out infinite}
@keyframes tl-live{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}

.tl-hero h1{font-size:56px;line-height:1.04;margin:24px 0 22px;color:#fff;font-weight:780;letter-spacing:-.038em}
.tl-hero h1 span{background:linear-gradient(100deg,#3fe0e8,#7ef0d0 55%,#ffd166);-webkit-background-clip:text;background-clip:text;color:transparent}
.tl-hero-copy>p{font-size:16.5px;line-height:1.75;color:#b8d2dd;max-width:520px;margin:0}

.tl-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.tl-btn-main{display:inline-flex;align-items:center;gap:12px;padding:15px 24px;border-radius:13px;font-size:15px;font-weight:800;
  color:#06222e;background:linear-gradient(120deg,#3fe0e8,#6ff0c8);box-shadow:0 14px 34px rgba(63,224,232,.3);transition:.22s}
.tl-btn-main b{font-size:14px;padding:5px 10px;border-radius:8px;background:rgba(6,34,46,.16)}
.tl-btn-main:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(63,224,232,.42)}
.tl-btn-ghost{display:inline-flex;align-items:center;padding:15px 22px;border-radius:13px;font-size:15px;font-weight:750;
  color:#dff2f6;border:1px solid rgba(160,225,238,.34);background:rgba(255,255,255,.05);transition:.22s}
.tl-btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(160,225,238,.6)}

.tl-hero-proof{list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px;margin:30px 0 0;padding:0}
.tl-hero-proof li{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:650;color:#a9c8d4}
.tl-hero-proof svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:#4fe0c4;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* Khoi minh hoa 3 buoc — dung kinh mo tren nen toi thay vi the trang duc. */
.tl-flow{display:grid;gap:9px;justify-items:stretch;padding:22px;border-radius:24px;
  border:1px solid rgba(150,215,232,.2);background:rgba(255,255,255,.055);backdrop-filter:blur(10px);
  box-shadow:0 30px 70px rgba(3,18,30,.45),inset 0 1px 0 rgba(255,255,255,.12)}
.tl-step{background:rgba(255,255,255,.94);border:0;border-radius:16px;padding:15px 17px;box-shadow:0 10px 24px rgba(3,18,30,.22)}
.tl-step-tag{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.08em;font-weight:800;text-transform:uppercase;color:#15697e;margin-bottom:11px}
.tl-step-tag i{width:19px;height:19px;border-radius:6px;background:#0e3247;color:#7ce8e0;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:850;flex:0 0 auto}
.tl-arrow{justify-self:center;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(126,232,224,.14)}
.tl-arrow svg{width:15px;height:15px;fill:none;stroke:#7ce8e0;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.tl-chat-row{display:flex;align-items:center;gap:10px;padding:6px 0}
.tl-chat-row i{width:28px;height:28px;border-radius:9px;background:#e7f2f4;color:#0f6270;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:850;flex:0 0 auto}
.tl-chat-row b{display:block;font-size:11px;color:var(--navy);line-height:1.3}
.tl-chat-row span{font-size:12px;color:#4a6675}
.tl-chat-live i{background:#ffe0e6;color:#c2183c}
.tl-chat-live span{color:#c2183c;font-weight:750}

.tl-stage{position:relative;height:104px;border-radius:13px;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;gap:14px;padding:0 16px 16px;
  background:radial-gradient(circle at 50% 118%,rgba(63,224,232,.4),transparent 58%),linear-gradient(160deg,#0d2b40,#14505f)}
.tl-av{width:22px;height:34px;border-radius:11px 11px 6px 6px;display:block;flex:0 0 auto;animation:tl-bounce 1.9s ease-in-out infinite}
.tl-av1{background:#4fe0c4}
.tl-av2{background:#ffd166;animation-delay:.24s}
.tl-av3{background:#ff6b8a;height:42px;animation-delay:.48s}
.tl-av4{background:#6fd4ee;animation-delay:.72s}
@keyframes tl-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.tl-stage-hud{position:absolute;top:10px;left:12px;display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;letter-spacing:.05em;color:#d3f2ee;background:rgba(4,26,38,.5);border:1px solid rgba(150,230,225,.24);border-radius:20px;padding:5px 10px}
.tl-stage-hud b{width:5px;height:5px;border-radius:50%;background:#4fe0c4;flex:0 0 auto}

.tl-obs{display:flex;align-items:center;gap:10px;background:#f2f7f8;border-radius:12px;padding:12px 14px}
.tl-obs b{font-size:12px;color:var(--navy);flex:1}
.tl-obs small{font-size:10px;color:#63727c;font-weight:700}
.tl-rec{width:9px;height:9px;border-radius:50%;background:#e2513c;flex:0 0 auto;box-shadow:0 0 0 3px rgba(226,81,60,.18);animation:tl-live 1.6s ease-in-out infinite}

/* ---------------------------------------------------------------- diem manh */

.tl-features{padding-top:96px;padding-bottom:96px}
.tl-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tl-feature-grid article{border:1px solid var(--line);border-radius:20px;padding:26px 24px 28px;background:#fff;box-shadow:0 12px 32px rgba(13,45,73,.06);transition:.22s}
.tl-feature-grid article:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(13,45,73,.1)}
.tl-feat-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:20px;transition:.22s}
.tl-feat-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* Moi the mot mau rieng: mat luot qua la phan biet duoc 4 y, khong bi thanh mot khoi xam dong nhat. */
.tl-feat-a{background:linear-gradient(145deg,#d4f3ea,#eafaf6);color:#0d7a63}
.tl-feat-b{background:linear-gradient(145deg,#ffe2d2,#fff2ea);color:#c2451c}
.tl-feat-c{background:linear-gradient(145deg,#e3ddf7,#f2effb);color:#5344b8}
.tl-feat-d{background:linear-gradient(145deg,#d3ecf5,#eaf6fa);color:#0b6b80}
.tl-feature-grid article:hover .tl-feat-icon{transform:scale(1.06) rotate(-3deg)}
.tl-feature-grid h3{font-size:18px;line-height:1.28;color:var(--navy);margin-bottom:10px;min-height:2.56em}
.tl-feature-grid p{font-size:14px;line-height:1.68;color:var(--muted);margin:0}

/* ---------------------------------------------------------------- huong dan (slideshow) */

.tl-guide{max-width:none;background:radial-gradient(circle at 92% 8%,rgba(123,110,230,.1),transparent 24%),#eef5f7;
  border-top:1px solid #dde9ed;border-bottom:1px solid #dde9ed;
  padding-left:max(24px,calc((100% - 1072px)/2));padding-right:max(24px,calc((100% - 1072px)/2))}
.tl-slider{display:grid;gap:20px}
.tl-slide-stage{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}
.tl-figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 18px 45px rgba(13,45,73,.09)}
.tl-img-wrap{position:relative;background:#0e2c44;display:grid;place-items:center;min-height:380px}
.tl-img-wrap img{display:block;width:100%;height:auto;max-height:620px;object-fit:contain}
.tl-img-empty{display:grid;gap:9px;justify-items:center;text-align:center;padding:60px 30px;color:#b6cdd8}
.tl-img-empty b{font-size:17px;color:#dceaf0}
.tl-img-empty span{font-size:13px;line-height:1.6;max-width:380px}
.tl-img-empty code{background:rgba(255,255,255,.12);border-radius:5px;padding:2px 6px;font-size:12px}
.tl-figure figcaption{display:flex;align-items:flex-start;gap:14px;padding:22px 26px 24px}
.tl-step-no{flex:0 0 auto;min-width:34px;height:34px;padding:0 9px;border-radius:11px;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:850}
.tl-figure figcaption p{margin:0;font-size:16px;line-height:1.7;color:#2c4759;padding-top:4px}

.tl-nav{width:46px;height:46px;border-radius:50%;border:1px solid #cbdde4;background:#fff;color:var(--navy);font-size:24px;line-height:1;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 10px 24px rgba(13,45,73,.1);transition:.2s;flex:0 0 auto}
.tl-nav:hover:not(:disabled){background:var(--navy);color:#fff;transform:translateY(-2px)}
.tl-nav:active:not(:disabled){transform:translateY(0)}
.tl-nav:disabled{opacity:.35;cursor:not-allowed}

.tl-dots{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tl-dot{width:34px;height:34px;border-radius:11px;border:1px solid #cbdde4;background:#fff;color:#5c7280;font-size:12px;font-weight:800;cursor:pointer;transition:.18s}
.tl-dot:hover{border-color:var(--blue);color:var(--blue)}
.tl-dot[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---------------------------------------------------------------- mua cong cu */

.tl-buy{padding-top:96px;padding-bottom:96px}
.tl-buy-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}

/* The gia la noi ra quyet dinh mua — truoc day no trang nhat nhu moi the khac nen bi chim giua
   trang. Doi sang nen toi cung tone voi hero: mat tu dong dung lai o day. */
.tl-price-card{position:relative;overflow:hidden;border:1px solid rgba(150,215,232,.22);border-radius:24px;padding:32px;
  background:radial-gradient(circle at 88% 0%,rgba(63,224,232,.22),transparent 42%),linear-gradient(165deg,#0d2b40,#123f52);
  box-shadow:0 26px 60px rgba(6,30,45,.32);display:flex;flex-direction:column}
.tl-price-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.tl-badge{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  background:linear-gradient(120deg,#3fe0e8,#6ff0c8);color:#06222e;border-radius:99px;padding:7px 12px}
.tl-price-head h3{font-size:26px;color:#fff;margin:0;line-height:1.2}
.tl-price{display:flex;align-items:baseline;gap:5px;padding-bottom:20px;border-bottom:1px solid rgba(160,225,238,.18);margin-bottom:20px}
.tl-price b{font-size:50px;line-height:1;letter-spacing:-.045em;
  background:linear-gradient(100deg,#5fe8e2,#8ff5cd);-webkit-background-clip:text;background-clip:text;color:transparent}
.tl-price span{font-size:22px;font-weight:800;color:#7ceae0}
.tl-price small{font-size:15px;color:#9fc0cd;margin-left:6px}
.tl-price-list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px}
.tl-price-list li{position:relative;padding-left:28px;font-size:15px;line-height:1.6;color:#c6dde6}
.tl-price-list li b{color:#fff}
.tl-price-list li::before{content:"";position:absolute;left:0;top:5px;width:17px;height:17px;border-radius:50%;
  background:rgba(79,224,196,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234fe0c4' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:11px 11px;background-position:center;background-repeat:no-repeat}
.tl-pay-btn{width:100%;margin-top:auto;background:linear-gradient(120deg,#3fe0e8,#6ff0c8);color:#06222e;
  box-shadow:0 14px 32px rgba(63,224,232,.28);font-size:15px}
.tl-pay-btn:hover{background:linear-gradient(120deg,#2ad4dd,#57e9bd);transform:translateY(-2px)}
.tl-pay-note{color:#a8c6d2!important}
.tl-pay-note b{color:#8ff5cd}
.tl-pay-btn:disabled{opacity:.6;cursor:progress}
.tl-pay-note{font-size:13px;line-height:1.65;color:var(--muted);margin:14px 0 0;text-align:center}
.tl-pay-error{margin:12px 0 0;padding:11px 13px;border-radius:10px;background:#fff1f1;color:#a3342c;font-size:13px;line-height:1.55}

/* Nam ngay canh the gia (nen toi) — de trang tron thi hai o nhin lech han nhau. Cho no mot lop
   nen xanh nhat cung ho mau + vien dut, doc ra ngay la "khu vuc dang khoa, se mo sau khi tra tien". */
.tl-deliver{border:1.5px dashed #b9d5e0;border-radius:24px;padding:32px;
  background:radial-gradient(circle at 50% 0%,rgba(63,224,232,.1),transparent 55%),linear-gradient(180deg,#f7fcfd,#eaf4f7);
  display:grid;align-content:center;justify-items:center;text-align:center;min-height:340px}
.tl-deliver h3{font-size:22px;color:var(--navy);margin:0 0 10px}
.tl-deliver p{font-size:15px;line-height:1.7;color:var(--muted);margin:0;max-width:360px}
.tl-lock{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;font-size:26px;margin-bottom:18px;
  background:linear-gradient(150deg,#dff4f5,#fff);border:1px solid #c6e4ea;box-shadow:0 12px 28px rgba(13,45,73,.1)}
.tl-deliver-steps{text-align:left;margin:22px 0 0;padding-left:20px;display:grid;gap:9px;font-size:14px;line-height:1.6;color:#4a6675}
.tl-deliver-wait,.tl-deliver-checking,.tl-deliver-done,.tl-deliver-qr{display:grid;justify-items:center}

/* Ma QR hien ngay tren trang — khach khong phai roi sang trang khac roi tim duong quay lai. */
.tl-qr-sub{margin-bottom:16px!important}
.tl-qr-img{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:0 12px 30px rgba(13,45,73,.1)}
.tl-qr-img img{display:block;width:230px;height:230px}
.tl-qr-info{display:grid;gap:9px;width:100%;max-width:340px;margin:18px 0 0;text-align:left}
.tl-qr-info>div{display:flex;justify-content:space-between;gap:14px;align-items:baseline;border-bottom:1px dashed #dbe6ea;padding-bottom:8px}
.tl-qr-info>div:last-child{border-bottom:0}
.tl-qr-info dt{margin:0;font-size:13px;color:var(--muted);flex:0 0 auto}
.tl-qr-info dd{margin:0;font-size:14px;font-weight:750;color:var(--navy);text-align:right;word-break:break-word}
#tl-qr-amount{color:#a8431f;font-size:17px}
.tl-qr-waiting{display:flex;align-items:center;gap:9px;margin-top:18px!important;font-size:14px!important;font-weight:700;color:#0f6270!important}
.tl-dot-pulse{width:9px;height:9px;border-radius:50%;background:#12a58c;flex:0 0 auto;animation:tl-pulse 1.4s ease-in-out infinite}
@keyframes tl-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.tl-qr-link{margin-top:14px;font-size:13px;font-weight:750;color:var(--blue);text-decoration:underline}
.tl-qr-link:hover{color:var(--navy)}
@media(max-width:600px){.tl-qr-img img{width:200px;height:200px}}

.tl-spinner{width:44px;height:44px;border-radius:50%;border:4px solid #d5e6ec;border-top-color:var(--blue);animation:tl-spin 1s linear infinite;margin-bottom:18px}
@keyframes tl-spin{to{transform:rotate(360deg)}}

.tl-done-icon{width:58px;height:58px;border-radius:50%;background:#dcf2ec;color:#12735f;display:grid;place-items:center;font-size:27px;font-weight:850;margin-bottom:16px}
.tl-done-sub{margin-bottom:18px!important}
.tl-key-box{display:flex;gap:8px;width:100%;max-width:420px;margin-bottom:18px}
.tl-key-box input{flex:1;min-width:0;border:1px solid #cfdde4;border-radius:10px;padding:12px;font-size:13px;font-family:Consolas,"Courier New",monospace;color:var(--ink);background:#fff}
.tl-copy-btn{border:1px solid #cfdde4;background:#fff;border-radius:10px;padding:0 15px;font-size:13px;font-weight:800;color:var(--navy);cursor:pointer;transition:.2s;flex:0 0 auto}
.tl-copy-btn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.tl-download-btn{width:100%;max-width:420px}
.tl-deliver-note{font-size:13px!important;margin-top:14px!important}

/* ---------------------------------------------------------------- may tinh bang / dien thoai */

@media(max-width:900px){
  .tl-page .site-header nav{display:none}
  .tl-hero{grid-template-columns:1fr;gap:36px;padding-top:54px;padding-bottom:64px}
  .tl-hero h1{font-size:42px}
  .tl-glow-1{width:360px;height:360px;top:-150px;right:-110px}
  .tl-glow-2{width:300px;height:300px;bottom:-160px;left:-130px}
  .tl-feature-grid{grid-template-columns:repeat(2,1fr)}
  .tl-buy-grid{grid-template-columns:1fr}
  .tl-slide-stage{grid-template-columns:1fr;gap:14px}
  .tl-nav{position:static}
  .tl-slide-stage .tl-prev{grid-row:2;justify-self:start}
  .tl-slide-stage .tl-figure{grid-row:1}
  .tl-slide-stage .tl-next{grid-row:2;justify-self:end;margin-top:-46px}
}

@media(max-width:600px){
  .tl-hero{padding-top:44px}
  .tl-hero h1{font-size:34px;line-height:1.1;margin:18px 0}
  .tl-hero-copy>p{font-size:15px}
  .tl-flow{padding:22px 18px}
  .tl-features{padding-bottom:66px}
  .tl-feature-grid{grid-template-columns:1fr;gap:14px}
  .tl-feature-grid article{padding:22px 20px 24px}
  .tl-guide{padding-left:20px;padding-right:20px}
  .tl-img-wrap{min-height:240px}
  .tl-figure figcaption{padding:18px 20px 20px;gap:11px}
  .tl-figure figcaption p{font-size:15px}
  .tl-buy{padding-top:66px;padding-bottom:70px}
  .tl-price-card,.tl-deliver{padding:24px 20px}
  .tl-price b{font-size:38px}
  .tl-key-box{flex-direction:column}
  .tl-copy-btn{padding:12px}
}

/* ---------------------------------------------------- Tuy bien game bang AI (#tuy-bien)
   Diem ban hang manh nhat: mot ban quyen dung duoc nhieu kieu game. Trinh bay theo mach
   "ta bang loi -> AI viet file -> game len song" de nguoi xem hieu ngay ma khong phai doc dai. */
.tl-custom{background:radial-gradient(circle at 6% 10%,rgba(123,110,230,.1),transparent 26%),radial-gradient(circle at 94% 88%,rgba(255,189,88,.13),transparent 24%),#f7fafb;max-width:none;padding-left:max(24px,calc((100% - 1072px)/2));padding-right:max(24px,calc((100% - 1072px)/2));border-top:1px solid #e4edf1;border-bottom:1px solid #dde9ee}

/* Hang the loai game — cho thay ngay "khong chi mot tro choi" truoc khi doc chu nao. */
/* Luoi 3x2 o dung bang nhau tuyet doi, thay vi flex-wrap de o cuoi roi xuong mot minh. */
.tl-genres{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin:0 0 42px;padding:0}
.tl-genres li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 18px 11px 12px;box-shadow:0 8px 20px rgba(13,45,73,.05);font-size:14px;font-weight:750;color:var(--navy)}
.tl-genres b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#eaf4f4;flex:0 0 auto}
.tl-genres svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tl-genres li{transition:.2s}
.tl-genres li:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(13,45,73,.1)}
/* Mau chu icon theo tung the loai — bang mau am/lanh xen ke cho hang the co nhip. */
.tl-genres li:nth-child(1) b{color:#c2451c}
.tl-genres li:nth-child(2) b{color:#5344b8}
.tl-genres li:nth-child(3) b{color:#0d7a63}
.tl-genres li:nth-child(4) b{color:#b07d10}
.tl-genres li:nth-child(5) b{color:#0b6b80}
.tl-genres li:nth-child(1) b{background:#ffe3d8}
.tl-genres li:nth-child(2) b{background:#e5e0f5}
.tl-genres li:nth-child(3) b{background:#dcf2ec}
.tl-genres li:nth-child(4) b{background:#fff0d6}
.tl-genres li:nth-child(5) b{background:#dceaf5}
.tl-genre-more{border-style:dashed!important;color:var(--muted)!important;font-weight:700!important}
.tl-genre-more b{background:#eef3f5!important;color:var(--blue)}

/* Ba buoc ngang hang — moi buoc mot hinh minh hoa that thay vi chi chu. */
.tl-custom-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:16px;align-items:stretch}
.tl-cf-step{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 24px 24px;box-shadow:0 14px 36px rgba(13,45,73,.07);display:flex;flex-direction:column}
.tl-cf-no{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--navy);color:#fff;font-size:14px;font-weight:800;margin-bottom:16px}
.tl-cf-step h3{font-size:19px;line-height:1.25;color:var(--navy);margin:0 0 9px}
.tl-cf-step>p{font-size:14px;line-height:1.65;color:var(--muted);margin:0 0 18px}
.tl-cf-arrow{align-self:center;font-size:22px;color:#9ab6c4;font-weight:800}

/* Buoc 1 — o chat gui cho AI */
.tl-prompt{margin-top:auto;background:linear-gradient(160deg,#f4f9fa,#eef5f8);border:1px solid #dfeaef;border-radius:15px;padding:15px}
.tl-prompt-head{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:800;letter-spacing:.06em;color:#5f7886;margin-bottom:11px}
.tl-prompt-head i{width:26px;height:26px;border-radius:8px;background:var(--navy);color:#fff;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:850}
.tl-prompt p{margin:0;font-size:13.5px;line-height:1.62;color:#33505f}
/* Vi du thu hai — cho thay doi sang the loai khac cung chi la mot cau ta, dong thoi lam cot 1
   day ngang cot 2 thay vi ho mot khoang trong lon o giua. */
.tl-prompt-alt{margin-top:10px;background:#fff;border-style:dashed}
.tl-prompt-alt p{color:#4a6675}
.tl-prompt b{color:var(--navy);background:#fff;border:1px solid #dbe7ec;border-radius:5px;padding:1px 5px;font-size:12.5px}

/* Buoc 2 — file cau hinh AI tra ve */
.tl-code{margin-top:auto;background:#0e2c44;border-radius:15px;overflow:hidden;box-shadow:0 14px 30px rgba(8,32,52,.2)}
.tl-code-head{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.1)}
.tl-code-head i{width:8px;height:8px;border-radius:50%;background:#456f88;flex:0 0 auto}
.tl-code-head span{margin-left:7px;font-size:10px;letter-spacing:.08em;color:#93b3c4;font-weight:700}
.tl-code pre{margin:0;padding:14px 16px 16px;overflow-x:auto}
.tl-code code{font-family:Consolas,"Courier New",monospace;font-size:11.5px;line-height:1.75;color:#cfe6f0;white-space:pre}

/* Buoc 3 — ket qua tren song */
.tl-result{margin-top:auto;display:grid;gap:10px}
.tl-result-chat{display:grid;gap:7px}
.tl-result-chat span{display:flex;align-items:center;gap:9px;background:#f3f8f9;border-radius:11px;padding:9px 12px;font-size:12.5px;color:#3d5a6b;font-weight:700}
.tl-result-chat i{width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:800;flex:0 0 auto}
.tl-result-board{background:linear-gradient(160deg,#16374f,#1f5a6b);border-radius:13px;padding:14px 15px;display:grid;gap:8px;box-shadow:0 12px 26px rgba(13,45,73,.16)}
.tl-result-board b{font-size:11.5px;letter-spacing:.05em;color:#a8e6dc}
.tl-result-board span{display:flex;justify-content:space-between;font-size:12.5px;color:#e4eff3;font-weight:700}
.tl-result-board em{font-style:normal;color:#ffce7a}

.tl-custom-note{margin:34px 0 0;text-align:center;font-size:15px;line-height:1.7;color:#42606f;font-weight:650}

@media(max-width:900px){
  .tl-custom-flow{grid-template-columns:1fr;gap:14px}
  /* Xep doc thi bo mui ten: o luoi mot cot no bi keo cao bang ca the roi de len noi dung hai
     ben (da do: chong lan ca 2 the). Cac buoc von da danh so 1-2-3 nen khong mat mach doc. */
  .tl-cf-arrow{display:none}
}
@media(max-width:600px){
  .tl-custom{padding-left:20px;padding-right:20px}
  .tl-genres{grid-template-columns:1fr;gap:8px;margin-bottom:30px}
  .tl-genres li{font-size:13px;padding:9px 14px 9px 10px}
  .tl-genres b{width:28px;height:28px;font-size:13px}
  .tl-cf-step{padding:22px 20px}
  .tl-custom-note{font-size:14px;margin-top:26px}
}

/* ---------------------------------------------------------------- danh gia (nen toi tao nhip)

   Ba phan lien nhau (Kieu game / Huong dan / Danh gia) truoc day deu nen sang nhat, doc lien
   mach thi thanh mot dai dai khong co diem dung. Cho phan Danh gia nen toi: vua tao nhip
   sang-toi-sang, vua day loi nguoi da dung len thanh diem nhan ngay truoc luc khach nhin gia. */
.tl-page .testimonials{position:relative;overflow:hidden;max-width:none;
  padding-left:max(24px,calc((100% - 1072px)/2));padding-right:max(24px,calc((100% - 1072px)/2));
  background:radial-gradient(circle at 12% 10%,rgba(63,224,232,.16),transparent 30%),radial-gradient(circle at 88% 88%,rgba(254,44,85,.12),transparent 28%),linear-gradient(165deg,#0b2739,#113f52)}
.tl-page .testimonials .overline{color:#6fe4dc}
.tl-page .testimonials h2{color:#fff}
.tl-page .testimonials h2 em{color:#7ceae0}
.tl-page .rating b{color:#fff}
.tl-page .rating small{color:#9fc0cd}
.tl-page .quote-grid article{background:rgba(255,255,255,.055);border:1px solid rgba(150,215,232,.2);
  box-shadow:0 20px 45px rgba(4,22,35,.3);backdrop-filter:blur(8px)}
.tl-page .quote-grid article>p{color:#dcecf2}
.tl-page .quote-grid footer b{color:#fff}
.tl-page .quote-grid footer small{color:#a3c2ce}
.tl-page .quote-grid article:nth-child(1) footer>span{background:rgba(79,224,196,.18);color:#7ceac8}
.tl-page .quote-grid article:nth-child(2) footer>span{background:rgba(255,150,120,.18);color:#ffb59c}
.tl-page .quote-grid article:nth-child(3) footer>span{background:rgba(150,140,240,.2);color:#c3b9ff}

/* Khoi "Tu van" nen toi phai tran het chieu ngang nhu hero va khoi Danh gia. Truoc day no thua
   .section{max-width:1120px} nen bi thu vao giua, de lo hai vien trang o bon goc. */
.tl-page .contact-section{max-width:none;
  padding-left:max(24px,calc((100% - 1072px)/2));padding-right:max(24px,calc((100% - 1072px)/2))}

/* ---------------------------------------------------------------- thong nhat bo goc

   Truoc day trang dung 8 ban kinh bo goc khac nhau (8/13/15/16/20/22/24px) — moi khoi mot kieu,
   nhin ky thi thay so le. Gom ve THANG 3 BAC theo cap do lop:
     22px  khoi lon  (the, khung, form)
     14px  khoi long ben trong khoi lon (o code, o nhac, the nho, icon)
     12px  nut va o nhap
     999px chip dang vien thuoc (giu nguyen)
   Bac trong luon nho hon bac ngoai — do la cach vien trong va vien ngoai nhin song song nhau. */

/* Bac 1 — khoi lon */
.tl-feature-grid article,
.tl-cf-step,
.tl-page .quote-grid article,
.tl-price-card,
.tl-deliver,
.tl-flow,
.tl-figure,
.tl-page .lead-form{border-radius:22px}

/* Bac 2 — khoi long ben trong */
.tl-step,
.tl-code,
.tl-prompt,
.tl-result-board,
.tl-feat-icon,
.tl-stage,
.tl-qr-img{border-radius:14px}

/* Bac 3 — nut va o nhap */
.tl-btn-main,
.tl-btn-ghost,
.tl-pay-btn,
.tl-page .submit-button,
.tl-page .lead-form input,
.tl-page .lead-form select,
.tl-download-btn{border-radius:12px}

/* ---------------------------------------------------------------- thong nhat chieu cao nut

   Lay nut "Gui thong tin" (52px) lam chuan. Truoc do hai nut o hero cao 62px, nut chuyen slide
   46px — dung canh nhau thi thay ro do le. Dat CUNG mot chieu cao toi thieu cho moi nut, va bo
   padding doc (dung canh giua theo flex) de chu dai ngan the nao thi nut van cao dung bang nhau. */
.tl-btn-main,
.tl-btn-ghost,
.tl-pay-btn,
.tl-download-btn,
.tl-copy-btn,
.tl-nav,
.tl-page .button,
.tl-page .submit-button{min-height:52px;padding-top:0;padding-bottom:0;
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}

/* Nut chuyen slide la nut tron -> chieu rong bang chieu cao cho tron deu, khong bi bau duc. */
.tl-nav{width:52px;min-width:52px;padding-left:0;padding-right:0}

/* Nut trai rong het khoi thi dung block-level flex, khong phai inline. */
.tl-pay-btn,
.tl-download-btn,
.tl-page .submit-button{display:flex;width:100%}

/* So hotline o cuoi trang: cho noi hon chu thuong va bam goi duoc tren dien thoai. */
.tl-hotline a{font-weight:800;color:var(--navy);border-bottom:1px solid rgba(13,45,73,.25)}
.tl-hotline a:hover{color:var(--blue);border-bottom-color:var(--blue)}

/* ---------------------------------------------------------------- form tu van (gui mail that) */

/* O nhap cau hoi: cung khung/vien voi o mot dong, chi khac la cao hon va keo gian duoc chieu doc. */
.tl-page .lead-form textarea{width:100%;border:1px solid #d4dfe5;background:#fbfcfc;border-radius:12px;
  padding:14px;color:var(--ink);font-size:16px;line-height:1.6;outline:none;resize:vertical;min-height:112px;
  font-family:inherit;box-sizing:border-box}
.tl-page .lead-form textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(36,125,145,.1)}

/* Nut Zalo thay cho nut Gui sau khi gui xong — giu dung khuon nut chuan (cao 52px, bo goc 12px)
   de cho do khong bi nhay khi doi nut. */
.tl-zalo-btn{background:linear-gradient(120deg,#0d8bf2,#0068ff);box-shadow:0 12px 28px rgba(0,104,255,.24);
  text-decoration:none}
.tl-zalo-btn:hover{background:linear-gradient(120deg,#0a7ad8,#0059d9)}

.tl-f-msg{margin:0;font-size:14px;line-height:1.6;padding:12px 14px;border-radius:12px}
.tl-f-ok{background:#e4f6ef;color:#146d5b;font-weight:700}
.tl-f-loi{background:#fff1f1;color:#a3342c}

/* Footer thu gon con ~70% chieu cao: chieu cao toi thieu 115 -> 80px, dem doc 28 -> 20px.
   Van du cho ba khoi (logo / hotline / menu) nam mot hang, chi bot phan trong thua. */
.tl-page .site-footer{min-height:80px;padding-top:20px;padding-bottom:20px}

/* Khung anh huong dan: nen TRANG va co le trang quanh anh. Truoc day nen xanh dam va anh dan sat
   mep nen bi bo goc theo khung ngoai — anh chup man hinh bi cat bon goc, nhin nhu loi. Co le trang
   thi anh giu nguyen goc vuong, dong thoi tach khoi vien khung cho de nhin. */
.tl-page .tl-img-wrap{background:#fff;padding:18px}
.tl-page .tl-img-wrap img{border-radius:0;box-shadow:0 2px 10px rgba(13,45,73,.1)}

/* Khung "chua co hinh" gio nam tren nen trang -> doi lai mau chu cho doc duoc. */
.tl-page .tl-img-empty{color:#5c7482}
.tl-page .tl-img-empty b{color:var(--navy)}

/* ---------------------------------------------------------------- khung anh huong dan

   Truoc day hai nut chuyen slide nam CHIEM CHO hai ben, day khung anh thut vao 68px moi ben so
   voi cac khoi khac (le 172 thay vi 104) — nhin ro la khong thang hang. Cho hai nut NOI LEN TREN
   anh (position absolute) de khung anh rong dung bang moi khoi con lai. */
.tl-page .tl-slide-stage{position:relative;display:block}
.tl-page .tl-figure{width:100%;margin:0}
.tl-page .tl-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;margin:0;
  background:rgba(255,255,255,.94);border:1px solid var(--line);color:var(--navy);
  box-shadow:0 6px 18px rgba(13,45,73,.14)}
.tl-page .tl-nav:hover:not(:disabled){background:#fff;box-shadow:0 8px 22px rgba(13,45,73,.2)}
.tl-page .tl-prev{left:14px}
.tl-page .tl-next{right:14px}

/* Anh chiem 80% chieu rong khung trang, can giua — chua nhieu khoang tho hai ben cho de nhin. */
.tl-page .tl-img-wrap img{width:80%;margin:0 auto}

/* Hai nut mui ten: BO moi hieu ung dich chuyen, chi doi mau.
   Ly do phai bo han: nut duoc can giua bang transform:translateY(-50%). Rule hover cu dat
   transform:translateY(-2px) de len chinh no -> mat phan can giua, nut tut hang xuong roi bat
   len khi roi chuot (dung cai "nhay len xuong"). Giu nguyen transform can giua o moi trang thai. */
.tl-page .tl-nav,
.tl-page .tl-nav:hover:not(:disabled),
.tl-page .tl-nav:active:not(:disabled){transform:translateY(-50%);box-shadow:none;transition:background .18s,color .18s,border-color .18s}
.tl-page .tl-nav:hover:not(:disabled){background:var(--navy);border-color:var(--navy);color:#fff}
.tl-page .tl-nav:active:not(:disabled){background:#0a2233;border-color:#0a2233;color:#fff}

/* Nut mui ten nam tren nen anh mau trang -> vien mo nhat gan nhu tang hinh. Cho vien dam va
   day hon, chu mui ten dam hon, kem bong nhe de tach khoi anh phia sau. */
.tl-page .tl-nav{background:#fff;border:2px solid #b7cbd6;color:var(--navy);font-size:26px;font-weight:800;
  box-shadow:0 4px 14px rgba(13,45,73,.16)}
.tl-page .tl-nav:hover:not(:disabled){background:var(--navy);border-color:var(--navy);color:#fff;
  box-shadow:0 6px 18px rgba(13,45,73,.28)}
.tl-page .tl-nav:disabled{opacity:.4}

/* Vien #b7cbd6 do duoc tuong phan 1.68 tren nen trang — qua nhat, gan nhu khong thay nut.
   Doi sang mau dam hon (do lai: ~5.0) de nut noi ro ma van khong nang ne. */
.tl-page .tl-nav{border-color:#4e6a7a}

/* Khoang tho quanh anh: 18px -> 54px (gap 3 lan) cho anh khong dinh sat vien khung trang. */
.tl-page .tl-img-wrap{padding:54px}

/* ---------------------------------------------------------------- chu thich duoi anh

   Chu thich moi buoc dai ngan khac nhau (1 den 3 dong), lam khung trang cao thap khac nhau ->
   bam chuyen buoc thi ca khoi giat len xuong. Chot cung cho chua DUNG 3 DONG: buoc nao ngan hon
   thi phan con lai de trong, buoc nao dai hon thi cat bot va them dau "…". Nho vay chieu cao
   khung khong bao gio doi khi chuyen qua lai. */
.tl-page .tl-figure figcaption{min-height:calc(3 * 1.7 * 16px + 4px + 42px);align-items:flex-start}
.tl-page #tl-caption{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:600px){
  /* Chu nho hon tren dien thoai -> chieu cao 3 dong cung nho lai theo. */
  .tl-page .tl-figure figcaption{min-height:calc(3 * 1.7 * 15px + 4px + 38px)}
}

/* Anh cac buoc khong cung kich thuoc tuyet doi (2880x1800, 2868x1779, 2867x1782...) nen chieu cao
   hien ra chenh nhau vai pixel -> chuyen buoc thi anh to nho nhay nhe. Chot khung anh ve DUNG mot
   ti le 16:10, anh nam gon ben trong (object-fit:contain, khong bi keo meo). Anh nao le ti le thi
   thua vien trang mong, con KHUNG thi khong bao gio doi kich thuoc. */
.tl-page .tl-img-wrap img{width:80%;aspect-ratio:16/10;height:auto;max-height:none;object-fit:contain}

/* Van con lech 4px o buoc co chu dai nhat: min-height chi la muc TOI THIEU, chu day 3 dong that
   van cao hon duoc. Chot cung chieu cao dung 3 dong cho chinh doan chu (1.7 x 3 dong), phan thua
   cat di — tu day khung khong con co gian theo do dai chu. */
.tl-page #tl-caption{height:calc(1.7em * 3);overflow:hidden}
.tl-page .tl-figure figcaption{min-height:0}

/* Do duoc 76px trong giua day anh va dong chu (54 le duoi khung anh + 22 le tren doan chu) —
   nhieu gap doi khoang can thiet, nhin nhu chu bi roi ra khoi anh. Bo le duoi cua khung anh,
   chi giu le cua doan chu; le tren/trai/phai cua anh van giu 54px cho thoang. */
.tl-page .tl-img-wrap{padding:54px 54px 0}
.tl-page .tl-figure figcaption{padding-top:24px;padding-bottom:20px}

/* Ba hop minh hoa trong 3 buoc truoc day moi hop mot chieu cao roi can theo day -> DINH lech
   nhau toi 100px. Boc chung vao mot khung gian deu (flex:1) de ca dinh lan day cung thang hang. */
.tl-cf-media{flex:1;display:flex;flex-direction:column;justify-content:flex-start;margin-top:18px}
.tl-cf-media>.tl-prompt:first-child,
.tl-cf-media>.tl-code,
.tl-cf-media>.tl-result{margin-top:0}
.tl-cf-media>.tl-code,.tl-cf-media>.tl-result{flex:1}
.tl-cf-media>.tl-code pre{height:100%;box-sizing:border-box}

/* ---------------------------------------------------------------- khung chat trong hero

   Truoc day chi la ba dong chu tren nen trang, ben phai bo trong — nhin trong tenh va nguoi xem
   khong doan duoc "go binh luan xong thi ra cai gi". Nay moi dong la mot cap: LENH nguoi xem go
   (bong bong chu) -> ICON hieu ung hien ra tren man hinh live. Ba dong lan luot sang len theo
   nhip nhu chat that dang chay xuong. */
.tl-page .tl-chat-row{display:flex;align-items:center;gap:11px;padding:7px 0;
  animation:tl-chat-vao 3.6s ease-in-out var(--tre,0s) infinite}
@keyframes tl-chat-vao{
  0%,4%{opacity:.35;transform:translateY(5px)}
  12%,72%{opacity:1;transform:translateY(0)}
  100%{opacity:.35;transform:translateY(0)}
}
.tl-page .tl-ava{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:11px;font-weight:850;flex:0 0 auto;color:#fff}
.tl-ava-1{background:linear-gradient(140deg,#3fbfd8,#2b93b8)}
.tl-ava-2{background:linear-gradient(140deg,#ff8f6b,#f2643f)}
.tl-ava-3{background:linear-gradient(140deg,#8f7ce8,#6a55d6)}

.tl-chat-body{flex:1;display:flex;align-items:center;gap:9px;min-width:0}
.tl-chat-body b{font-size:11px;color:#7b8e9b;font-weight:750;flex:0 0 auto}
/* Lenh go trong bong bong: nhin la biet day la chu nguoi xem go, khong phai chu mo ta. */
.tl-cmd{font-size:12.5px;font-weight:800;color:var(--navy);background:#eef5f7;
  border:1px solid #dbe8ec;border-radius:99px;padding:5px 11px;white-space:nowrap}
.tl-chat-live .tl-cmd{background:#ffe9e3;border-color:#ffd0c3;color:#c2451c}

/* Icon hieu ung ben phai — dau ra cua lenh vua go. */
.tl-fx{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;
  animation:tl-fx-nhip 3.6s ease-in-out var(--tre,0s) infinite}
.tl-fx svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tl-fx-a{background:#dff2f6;color:#0f6f85}
.tl-fx-b{background:#ffe6db;color:#c2451c}
.tl-fx-c{background:#ece7fb;color:#5b4bc4}
@keyframes tl-fx-nhip{
  0%,8%{transform:scale(.82);opacity:.5}
  16%{transform:scale(1.12);opacity:1}
  24%,72%{transform:scale(1);opacity:1}
  100%{transform:scale(1);opacity:.55}
}

/* Nguoi dung bat "giam chuyen dong" trong he dieu hanh thi tat het cho do chong mat. */
@media(prefers-reduced-motion:reduce){
  .tl-page .tl-chat-row,.tl-fx{animation:none;opacity:1;transform:none}
}

/* Chu trong khung chat phai LUON doc duoc: bo kieu mo dan cuoi chu ky (co luc chi con 35% do
   dam — ai nhin vao dung luc do se thay chu nhat nhoa). Giu dong chat ro net, chi de icon hieu
   ung nhun nhip lam diem song dong. */
.tl-page .tl-chat-row{animation:none;opacity:1;transform:none}
.tl-page .tl-fx{animation:tl-fx-nhip 3.6s ease-in-out var(--tre,0s) infinite}
@keyframes tl-fx-nhip{
  0%,10%{transform:scale(1)}
  16%{transform:scale(1.18)}
  24%,100%{transform:scale(1)}
}
/* Bong bong lenh sang len dung luc icon nhun — cho thay ro "go cai nay thi ra cai kia". */
.tl-page .tl-cmd{animation:tl-cmd-sang 3.6s ease-in-out var(--tre,0s) infinite}
@keyframes tl-cmd-sang{
  0%,10%{box-shadow:0 0 0 0 rgba(63,224,232,0)}
  16%{box-shadow:0 0 0 4px rgba(63,224,232,.28)}
  30%,100%{box-shadow:0 0 0 0 rgba(63,224,232,0)}
}
@media(prefers-reduced-motion:reduce){
  .tl-page .tl-fx,.tl-page .tl-cmd{animation:none}
}

/* Mau avatar bi rule cu ".tl-chat-row i" (uu tien cao hon .tl-ava-1) de mat -> nen nhat ma chu
   lai trang, gan nhu khong doc duoc chu cai. Viet lai voi uu tien du cao de an chac. */
.tl-page .tl-chat-row .tl-ava{color:#fff;border-radius:50%;width:30px;height:30px}
.tl-page .tl-chat-row .tl-ava-1{background:linear-gradient(140deg,#3fbfd8,#2380a5)}
.tl-page .tl-chat-row .tl-ava-2{background:linear-gradient(140deg,#ff8f6b,#e04f2c)}
.tl-page .tl-chat-row .tl-ava-3{background:linear-gradient(140deg,#8f7ce8,#5b45c9)}
/* Ten nguoi xem cung dang qua nhat so voi phan con lai. */
.tl-page .tl-chat-body b{color:#5c7482}

/* Chu trong khung chat tuy dat chuan tuong phan nhung co 11px — nho qua nen doc van thay mo.
   Tang co chu, lam dam mau va them vien ro cho bong bong lenh. */
.tl-page .tl-chat-body b{font-size:12.5px;font-weight:800;color:#3d5768}
.tl-page .tl-cmd{font-size:13.5px;font-weight:850;color:var(--navy);background:#e6f1f4;border:1.5px solid #b9d5de}
.tl-page .tl-chat-live .tl-cmd{background:#ffe2d9;border-color:#f5b49f;color:#a8380f}
.tl-page .tl-chat-row .tl-ava{width:32px;height:32px;font-size:12px;font-weight:850;
  box-shadow:0 2px 6px rgba(13,45,73,.18)}
/* Icon hieu ung dam hon de can voi phan chu vua tang. */
.tl-page .tl-fx{width:34px;height:34px}
.tl-page .tl-fx svg{width:18px;height:18px;stroke-width:2.2}
.tl-page .tl-fx-a{background:#d3edf3;color:#0b5f73}
.tl-page .tl-fx-b{background:#ffdccf;color:#a8380f}
.tl-page .tl-fx-c{background:#e3dcfa;color:#4a38b0}

/* ---------------------------------------------------------------- hai cach dung (#cach-dung)

   Nguoi ban hang quan tam DON hang chu khong chi "vui". Khoi nay tach ro hai muc dich: giu chan
   nguoi xem (game) va day hang ra don (phat video san pham). Hai the dat canh nhau, cung khuon,
   the ban hang duoc nhan manh hon mot chut vi do la ly do mua thuc te nhat. */
.tl-usecase{background:linear-gradient(180deg,#fff,#f4f9fb)}
.tl-uc-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.tl-uc{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:22px;padding:30px;
  background:#fff;box-shadow:0 16px 40px rgba(13,45,73,.07)}
.tl-uc-ban{border-color:#ffd2c2;background:linear-gradient(180deg,#fff,#fff8f5);
  box-shadow:0 20px 46px rgba(194,69,28,.1)}

.tl-uc-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.tl-uc-no{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(140deg,#1a6f86,#0d2d49);color:#fff;font-size:14px;font-weight:850}
.tl-uc-ban .tl-uc-no{background:linear-gradient(140deg,#f2643f,#c2451c)}
.tl-uc-head h3{font-size:22px;line-height:1.25;color:var(--navy);margin:0 0 4px}
.tl-uc-sub{margin:0;font-size:13px;font-weight:750;color:#0f6f85}
.tl-uc-ban .tl-uc-sub{color:#c2451c}
.tl-uc-desc{font-size:15px;line-height:1.7;color:var(--muted);margin:0 0 18px}

.tl-uc-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.tl-uc-list li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.55;color:#3d5768;font-weight:650}
.tl-uc-list li::before{content:"";position:absolute;left:0;top:3px;width:17px;height:17px;border-radius:50%;
  background:#dff2f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5f73' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.tl-uc-ban .tl-uc-list li::before{background-color:#ffdccf;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8380f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

/* --- minh hoa --- */
.tl-uc-art{margin-top:auto;position:relative;border-radius:16px;overflow:hidden;min-height:186px;
  display:flex;align-items:center;justify-content:center;padding:18px}
.tl-uc-art-game{background:radial-gradient(circle at 50% 120%,rgba(63,224,232,.36),transparent 62%),linear-gradient(160deg,#0d2b40,#14505f)}
.tl-uc-art-ban{background:radial-gradient(circle at 50% 0%,rgba(255,150,110,.28),transparent 60%),linear-gradient(160deg,#12293c,#2a3f4f);gap:14px}

.tl-uc-live{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:6px;z-index:2;
  background:rgba(226,81,60,.92);color:#fff;border-radius:20px;padding:4px 10px;font-size:9.5px;font-weight:850;letter-spacing:.08em}
.tl-uc-live b{width:5px;height:5px;border-radius:50%;background:#fff}

.tl-uc-stage{display:flex;align-items:flex-end;gap:12px;height:74px}
.tl-uc-stage i{width:20px;border-radius:10px 10px 5px 5px;display:block}
.tl-uc-stage i:nth-child(1){height:44px;background:#4fe0c4}
.tl-uc-stage i:nth-child(2){height:56px;background:#ffd166}
.tl-uc-stage i:nth-child(3){height:38px;background:#ff6b8a}
.tl-uc-stage i:nth-child(4){height:50px;background:#6fd4ee}
.tl-uc-cmt{position:absolute;right:14px;bottom:14px;display:grid;gap:6px;justify-items:end}
.tl-uc-cmt span{background:rgba(255,255,255,.14);border:1px solid rgba(160,225,238,.28);color:#dff2f6;
  border-radius:20px;padding:4px 10px;font-size:10px;font-weight:750}

/* Khung dien thoai doc mo phong man hinh live co gio hang */
.tl-uc-phone{position:relative;width:104px;height:150px;border-radius:14px;border:2px solid rgba(255,255,255,.28);
  background:linear-gradient(165deg,#1b3d52,#0e2434);flex:0 0 auto;overflow:hidden}
.tl-uc-video{position:absolute;inset:30px 10px 44px;border-radius:9px;background:rgba(255,255,255,.1);
  display:grid;place-items:center;gap:5px;color:#cfe8f0}
.tl-uc-video svg{width:22px;height:22px;fill:currentColor}
.tl-uc-video small{font-size:7.5px;font-weight:750;letter-spacing:.03em}
.tl-uc-gio{position:absolute;right:8px;bottom:26px;width:26px;height:26px;border-radius:8px;
  background:#ff7a45;display:grid;place-items:center;color:#fff;box-shadow:0 4px 12px rgba(255,122,69,.5)}
.tl-uc-gio svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tl-uc-gio em{position:absolute;top:-5px;right:-5px;min-width:15px;height:15px;border-radius:50%;background:#fff;
  color:#c2451c;font-style:normal;font-size:9px;font-weight:850;display:grid;place-items:center;border:1.5px solid #ff7a45}
.tl-uc-bio{position:absolute;left:8px;right:8px;bottom:7px;background:#fff;color:var(--navy);border-radius:7px;
  padding:5px;text-align:center;font-size:7.5px;font-weight:850}
.tl-uc-hoi{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,190,160,.3);border-radius:12px;padding:9px 12px;color:#ffe2d6;font-size:11.5px;line-height:1.5;max-width:168px}
.tl-uc-hoi i{width:22px;height:22px;border-radius:50%;background:linear-gradient(140deg,#ff9a6b,#e0562c);
  color:#fff;font-style:normal;font-size:10px;font-weight:850;display:grid;place-items:center;flex:0 0 auto}

@media(max-width:900px){.tl-uc-grid{grid-template-columns:1fr}}
@media(max-width:600px){
  .tl-uc{padding:24px 20px}
  .tl-uc-head h3{font-size:20px}
  .tl-uc-art{min-height:170px}
  .tl-uc-art-ban{flex-direction:column;gap:12px;padding:16px}
  .tl-uc-hoi{max-width:100%}
}

/* ================================================================ TOI UU DIEN THOAI

   1) CHONG BI CAT — o luoi (grid/flex), moi o mac dinh khong duoc phep hep hon noi dung ben
   trong (min-width:auto). Gap noi dung dai la o phinh ra, day ca khoi vuot khung roi bi
   "main{overflow:hidden}" cat mat — do duoc 311px trong khung chi 280px o man 320. Cho phep
   moi o co lai (min-width:0) la het cat, ap dung cho toan bo cac luoi cua trang. */
.tl-hero>*,.tl-flow>*,.tl-feature-grid>*,.tl-uc-grid>*,.tl-custom-flow>*,
.tl-buy-grid>*,.quote-grid>*,.contact-section>*,.tl-chat-body,.tl-uc,.tl-cf-step{min-width:0}
.tl-hero-copy h1,.tl-hero-copy p{overflow-wrap:anywhere}

@media(max-width:600px){
  /* 2) VUNG BAM — chuan toi thieu 44px de ngon tay bam khong truot. Day so buoc dang 34px. */
  .tl-page .tl-dot{min-width:44px;height:44px;font-size:14px}
  .tl-dots{gap:8px}
  .tl-page .tl-copy-btn{min-width:80px}

  /* 3) CHU QUA NHO — duoi 12px tren dien thoai la moi mat. Nang cac nhan phu len muc doc duoc. */
  .tl-obs small{font-size:11.5px}
  .tl-uc-cmt span{font-size:11.5px;padding:5px 11px}
  .tl-code-head span{font-size:11px}
  .tl-stage-hud{font-size:11px}
  .tl-uc-video small{font-size:10px}
  .tl-uc-bio{font-size:10px;padding:7px}
  .tl-genres b{width:32px;height:32px}

  /* Khung dien thoai mo phong nho qua tren mobile -> phong to cho nhin ro chi tiet. */
  .tl-uc-phone{width:132px;height:190px}
  .tl-uc-video{inset:34px 12px 50px}
  .tl-uc-video svg{width:26px;height:26px}
  .tl-uc-gio{width:30px;height:30px;bottom:30px}
  .tl-uc-gio svg{width:16px;height:16px}
}

@media(max-width:600px){
  /* Cac link o chan trang chi cao 19px — ngon tay bam de truot sang link ben canh. Noi vung bam
     len 44px bang padding doc, chu van giu nguyen co nen nhin khong to ra. */
  .tl-page .site-footer>div:last-child{display:flex;flex-wrap:wrap;gap:2px 6px}
  .tl-page .site-footer>div:last-child a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px}
  .tl-page .tl-hotline{display:flex;align-items:center;min-height:44px}
  .tl-page .tl-hotline a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
  /* Logo o dau va cuoi trang cung la link -> cho du cao de bam. */
  .tl-page .brand{min-height:44px}

  /* Khoi ma nguon rong hon man hinh 3px o may 320. Cho chu tu xuong dong thay vi tran ra ngoai. */
  .tl-page .tl-code pre{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tl-page .tl-code code{white-space:pre-wrap;word-break:break-word;font-size:10.5px}

  /* Quang sang trang tri rong hon man hinh (khong gay tran vi bi cat, nhung thu nho cho gon). */
  .tl-glow-1{width:260px;height:260px}
  .tl-glow-2{width:220px;height:220px}
}

@media(max-width:600px){
  /* Dua moi nhan phu len it nhat 12px — nguong doc thoai mai tren dien thoai. Cac khung minh hoa
     duoc noi rong tuong ung de chu khong bi chat. */
  .tl-obs small,.tl-uc-cmt span,.tl-code-head span,.tl-stage-hud,
  .tl-uc-video small,.tl-uc-bio,.tl-price small,.tl-qr-info dt{font-size:12px}
  .tl-uc-phone{width:150px;height:212px}
  .tl-uc-video{inset:38px 12px 56px}
  .tl-uc-bio{padding:8px;bottom:8px;left:10px;right:10px}
  .tl-uc-gio{bottom:34px;right:10px}
  .tl-obs{gap:8px;padding:12px}
  .tl-stage-hud{padding:6px 11px}
}

@media(max-width:600px){
  /* Not con lai: nhan bang xep hang, chu cai vien tron trong the danh gia, va nhan "Ban day du". */
  .tl-result-board b{font-size:12px}
  .tl-page .quote-grid footer>span{font-size:12px;width:42px;height:42px}
  .tl-page .tl-badge{font-size:12px;padding:7px 13px}
}

@media(max-width:900px){
  /* Khoi tieu de moi phan le ra van chia 2 cot tren dien thoai: rule ".section-head{2 cot}" trong
     styles.css nam SAU media query gom ve 1 cot nen de mat no. Hau qua: tieu de chi rong 196px,
     vo thanh 4-5 dong ("Mot cong / cu, / hai cach ra / tien."). Gom lai 1 cot, chu chay het be ngang. */
  .tl-page .section-head{grid-template-columns:1fr;gap:16px;margin-bottom:32px}
  .tl-page .section-head h2{font-size:34px;line-height:1.12}
  .tl-page .section-head p{font-size:15.5px;max-width:none}
  .tl-page .testimonials .rating{text-align:left}
}
@media(max-width:600px){
  .tl-page .section-head h2{font-size:31px}
}