/* ===== KHO SAN PHAM CONG NGHE (29/09/2026) — chi dung cho #cong-nghe, sp-thanh-toan, sp-don-hang, qua-tang-cong-nghe ===== */

/* --- Dai qua o dau tab #cong-nghe --- */
.ks-banner{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 34px;padding:18px 24px;border:1px solid var(--line-gold);border-radius:18px;background:linear-gradient(100deg,rgba(255,174,15,.12),rgba(255,174,15,.03));text-decoration:none;color:var(--text);transition:border-color .2s,transform .2s}
.ks-banner:hover{border-color:var(--gold);transform:translateY(-2px)}
.ks-banner-nhan{flex:0 0 auto;background:var(--gold-grad);color:#1a1300;font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;font-weight:600;padding:6px 14px;border-radius:999px}
.ks-banner b{flex:1 1 320px;font-weight:500;line-height:1.6;color:#eee}
.ks-banner-nut{flex:0 0 auto;color:var(--gold);font-family:var(--cond);letter-spacing:.05em;text-transform:uppercase}

/* --- 4 cam ket --- */
.ks-camket{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:38px 0 0}
.ks-camket div{padding:18px 18px 16px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02)}
.ks-camket b{display:block;color:#fff;font-size:.98rem;margin-bottom:4px}
.ks-camket span{color:var(--ink-soft);font-size:.88rem;line-height:1.6}
.ks-camket a{color:var(--gold)}

/* --- Nut doi tren the san pham --- */
.ks-nut-doi{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ks-nut-doi .btn{padding-left:18px;padding-right:18px}

/* --- Khoi qua tang --- */
.ks-qua{margin:56px 0 0;padding:36px;border:1px solid var(--line-gold);border-radius:24px;background:linear-gradient(160deg,rgba(255,174,15,.08),rgba(255,174,15,.01));scroll-margin-top:170px}
.ks-qua-dau{text-align:center;max-width:720px;margin:0 auto 26px}
.ks-qua-dau h2{margin:12px 0 12px;font-family:var(--cond);font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.2;text-transform:uppercase;letter-spacing:.02em;color:#fff}
.ks-qua-dau p{color:var(--ink-soft);line-height:1.8;margin:0}
.ks-qua-luoi{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:26px}
.ks-qua-the{padding:22px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:rgba(0,0,0,.25)}
.ks-qua-the .so{font-family:var(--cond);color:var(--gold);font-size:1.6rem;line-height:1}
.ks-qua-the b{display:block;color:#fff;margin:10px 0 6px;line-height:1.45}
.ks-qua-the p{margin:0;color:var(--ink-soft);font-size:.9rem;line-height:1.7}
.ks-qua-form{max-width:640px;margin:0 auto}
.ks-qua-form .ks-hang{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ks-qua-form .btn{width:100%;justify-content:center}
[data-kho-qua-tai]{max-width:640px;margin:0 auto}
.ks-qua-chao{color:#fff;text-align:center;margin:0 0 14px}
.ks-qua-tai{display:flex;align-items:center;gap:14px;padding:16px 18px;margin:0 0 10px;border:1px solid var(--line-gold);border-radius:14px;background:rgba(255,174,15,.06);text-decoration:none;color:#fff;transition:background .2s}
.ks-qua-tai:hover{background:rgba(255,174,15,.14)}
.ks-qua-tai .ks-qua-so{font-family:var(--cond);color:var(--gold);font-size:1.2rem}
.ks-qua-tai b{flex:1;font-weight:500;line-height:1.5}
.ks-qua-tai em{font-style:normal;font-family:var(--cond);text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;color:#1a1300;background:var(--gold-grad);padding:6px 12px;border-radius:999px;white-space:nowrap}

/* --- Trang thanh toan / tra cuu --- */
.ks-tt{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:start;scroll-margin-top:96px}
.ks-tom{position:sticky;top:110px}
.ks-nhan{margin:4px 0 16px}
.ks-nhan>span{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:6px;font-weight:600}
.ks-nhan ul{margin:0;padding:0;list-style:none}
.ks-nhan li{padding:6px 0 6px 22px;position:relative;border:0;color:var(--ink-soft);font-size:.92rem;display:block}
.ks-nhan li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:700}
.ks-tong{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.ks-tong span{color:var(--ink-soft)}
.ks-tong b{font-family:var(--cond);font-size:2rem;color:var(--gold)}
.ks-buoc{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 18px;counter-reset:b}
.ks-buoc li{flex:1;text-align:center;padding:10px 6px;border-radius:999px;border:1px solid rgba(255,255,255,.12);color:#9a9a9a;font-size:.85rem;counter-increment:b}
.ks-buoc li::before{content:counter(b) ". "}
.ks-buoc li.on{border-color:var(--gold);color:var(--gold-soft);background:rgba(255,174,15,.1)}
.ks-buoc li.xong{border-color:rgba(255,174,15,.4);color:var(--gold)}
.ks-buoc li.xong::before{content:"✓ "}
.ks-form .btn-full{width:100%;justify-content:center;box-sizing:border-box}
.ks-dong-y{display:flex;gap:10px;align-items:flex-start;margin:4px 0 16px;color:var(--ink-soft);font-size:.9rem;line-height:1.6;cursor:pointer}
.ks-dong-y input{margin-top:4px;accent-color:#FFAE0F;width:18px;height:18px;flex:0 0 auto}
.ks-nut-lon{font-size:1.02rem;padding-top:16px;padding-bottom:16px}
.ks-hop{border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:26px;background:linear-gradient(160deg,#16181c,#0d0f12)}
.ks-hop+.ks-hop{margin-top:18px}
.ks-giua{text-align:center;max-width:620px;margin:0 auto}
.ks-ck{display:grid;grid-template-columns:230px 1fr;gap:22px;align-items:start}
.ks-qr{background:#fff;border-radius:14px;padding:10px;text-align:center}
.ks-qr img{width:100%;height:auto;display:block}
.ks-qr small{display:block;color:#333;font-size:.76rem;line-height:1.5;margin-top:6px}
.ks-dong{display:grid;grid-template-columns:108px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.ks-dong span{color:#9a9a9a;font-size:.88rem}
.ks-dong b{min-width:0;color:#fff;font-weight:600;overflow-wrap:anywhere}
/* Khung QR hẹp (laptop nhỏ, máy tính bảng ngang): QR lên trên, thông tin chuyển khoản xuống dưới */
.ks-hop{container-type:inline-size}
@container (max-width:600px){.ks-ck{grid-template-columns:1fr}.ks-qr{max-width:260px;margin:0 auto;width:100%}}
.ks-ma{color:var(--gold)!important;font-family:var(--cond);font-size:1.2rem;letter-spacing:.04em}
.ks-chep{flex:0 0 auto;border:1px solid var(--line-gold);background:none;color:var(--gold);border-radius:999px;padding:5px 12px;font-size:.8rem;cursor:pointer}
.ks-chep:hover{background:rgba(255,174,15,.12)}
.ks-cho{display:flex;gap:16px;align-items:flex-start;margin-top:22px;padding:18px;border-radius:14px;border:1px dashed var(--line-gold);background:rgba(255,174,15,.05);flex-wrap:wrap}
.ks-cho>div{flex:1 1 240px}
.ks-cho p{margin:4px 0 0;color:var(--ink-soft);line-height:1.7;font-size:.93rem}
.ks-cho .btn{margin-top:10px}
.ks-quay{flex:0 0 26px!important;width:26px;height:26px;border-radius:50%;border:3px solid rgba(255,174,15,.25);border-top-color:var(--gold);animation:ksQuay 1s linear infinite;margin-top:2px}
@keyframes ksQuay{to{transform:rotate(360deg)}}
.ks-het{flex-basis:100%!important;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.ks-xong{text-align:center;border-color:var(--gold)}
.ks-xong h2{margin:8px 0 6px}
.ks-xong p{color:var(--ink-soft);line-height:1.8}
.ks-tich{width:64px;height:64px;margin:0 auto;border-radius:50%;background:var(--gold-grad);color:#1a1300;display:grid;place-items:center;font-size:2rem;font-weight:700}
.ks-xong .btn{margin:14px 0 6px}
.ks-tt-nhan{display:inline-block;padding:6px 14px;border-radius:999px;border:1px solid var(--line-gold);color:var(--gold-soft)}
.ks-ds h3{margin-top:0}
.ks-ds-it{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07);text-decoration:none;color:var(--ink-soft)}
.ks-ds-it b{color:var(--gold);font-family:var(--cond);letter-spacing:.04em}
.ks-ds-it span{flex:1}
.ks-ds-it em{font-style:normal;font-size:.85rem;color:#fff}
.ks-tra{max-width:640px;margin:0 auto}
.ks-tra>*+*{margin-top:18px}

@media(max-width:1240px){ /* trình duyệt cũ không có container query */
  @supports not (container-type:inline-size){.ks-ck{grid-template-columns:1fr}.ks-qr{max-width:260px;margin:0 auto}}
}
@media(max-width:960px){
  .ks-camket{grid-template-columns:repeat(2,1fr)}
  .ks-qua-luoi{grid-template-columns:1fr}
  .ks-tt{grid-template-columns:1fr}
  .ks-tom{position:static;order:2}
}
@media(max-width:640px){
  .ks-banner{padding:16px}
  .ks-camket{grid-template-columns:1fr}
  .ks-qua{padding:24px 16px}
  .ks-qua-form .ks-hang{grid-template-columns:1fr}
  .ks-ck{grid-template-columns:1fr}
  .ks-qr{max-width:260px;margin:0 auto}
  .ks-dong{grid-template-columns:92px minmax(0,1fr) auto}
  .ks-ma{font-size:1.02rem;letter-spacing:.01em}
  .ks-buoc li{font-size:.76rem;padding:8px 4px}
  .ks-hop{padding:20px 16px}
  .ks-nut-doi{justify-content:stretch}.ks-nut-doi .btn{flex:1;justify-content:center}
}