/* Sora Media — nền trắng + bộ màu logo (xanh cổ vịt, đỏ cam). Layout: hub 1 cột, section rộng tối đa 1080px. */
:root{
  --bg:#ffffff;          /* nền trắng */
  --bg-2:#f5f6fa;        /* thẻ, khối nền nhạt */
  --bg-3:#e9ecf5;        /* hover */
  --line:#dfe3ee;
  --fg:#111526;          /* chữ chính, đen ngả xanh đêm */
  --fg-2:#3a4160;        /* chữ bài viết */
  --muted:#5b6382;
  --accent:#1a846b;      /* xanh cổ vịt của logo — NỀN nút chính, chữ trên nền này là trắng */
  --accent-deep:#136853; /* hover */
  --accent-ink:#14705b;  /* xanh cổ vịt dạng CHỮ: đường dẫn, nhãn */
  --hot:#d63a0a;         /* đỏ cam của logo — giá và điểm nhấn */
  --ok:#0e8553;          /* miễn phí */
  --font-display:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font-body);font-size:16px;line-height:1.65;
  padding-inline:16px;
}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1080px;margin-inline:auto}

/* ===== Nav ===== */
.nav{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  margin-inline:-16px;padding-inline:16px;
}
.nav-in{max-width:1080px;margin-inline:auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-block:12px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:.3px;color:var(--fg)}
.logo:hover{text-decoration:none}
.logo .dot{width:24px;height:32px;flex-shrink:0;background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMDMgLTEzNiAyMDYgMjcyIj48cGF0aCBkPSJNLTEuMDAsLTEzMy41MEExMDAsMTAwIDAgMCAwIC01OS43OCwtMTE0LjQwTC0yMC42OSwtNjAuNjBBMzMuNSwzMy41IDAgMCAxIC0xLjAwLC02Ny4wMFoiIGZpbGw9IiMxYTg0NmIiLz48cGF0aCBkPSJNLTcxLjcxLC0xMDQuMjFBMTAwLDEwMCAwIDAgMCAtOTkuNzcsLTQ5LjE0TC0zNC4wOSwtMzguNzRBMzMuNSwzMy41IDAgMCAxIC0yNC42OSwtNTcuMTlaIiBmaWxsPSIjNDY5YTU0Ii8+PHBhdGggZD0iTS0xMDEuMDAsLTMzLjUwQTEwMCwxMDAgMCAwIDAgLTgxLjkwLDI1LjI4TC0yOC4xMCwtMTMuODFBMzMuNSwzMy41IDAgMCAxIC0zNC41MCwtMzMuNTBaIiBmaWxsPSIjZmY2YjJiIi8+PHBhdGggZD0iTS03MS43MSwzNy4yMUExMDAsMTAwIDAgMCAwIC0xLjAwLDY2LjUwTC0xLjAwLDAuMDBBMzMuNSwzMy41IDAgMCAxIC0yNC42OSwtOS44MVoiIGZpbGw9IiNlZDM1MDIiLz48cGF0aCBkPSJNNzEuNzEsLTM3LjIxQTEwMCwxMDAgMCAwIDAgMS4wMCwtNjYuNTBMMS4wMCwwLjAwQTMzLjUsMzMuNSAwIDAgMSAyNC42OSw5LjgxWiIgZmlsbD0iI2VkMzUwMiIvPjxwYXRoIGQ9Ik0xMDEuMDAsMzMuNTBBMTAwLDEwMCAwIDAgMCA4MS45MCwtMjUuMjhMMjguMTAsMTMuODFBMzMuNSwzMy41IDAgMCAxIDM0LjUwLDMzLjUwWiIgZmlsbD0iI2ZmNmIyYiIvPjxwYXRoIGQ9Ik03MS43MSwxMDQuMjFBMTAwLDEwMCAwIDAgMCA5OS43Nyw0OS4xNEwzNC4wOSwzOC43NEEzMy41LDMzLjUgMCAwIDEgMjQuNjksNTcuMTlaIiBmaWxsPSIjNDY5YTU0Ii8+PHBhdGggZD0iTTEuMDAsMTMzLjUwQTEwMCwxMDAgMCAwIDAgNTkuNzgsMTE0LjQwTDIwLjY5LDYwLjYwQTMzLjUsMzMuNSAwIDAgMSAxLjAwLDY3LjAwWiIgZmlsbD0iIzFhODQ2YiIvPjwvc3ZnPg==") center/contain no-repeat}
.nav-links{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.nav-links a{color:var(--muted);padding:7px 12px;border-radius:999px;font-size:14.5px;font-weight:600}
.nav-links a:hover{color:var(--fg);background:var(--bg-3);text-decoration:none}
.nav-links a.on{color:#fff;background:var(--accent)}

/* ===== Hero ===== */
.hero{padding-block:64px 48px;text-align:center;position:relative}
.hero .eyebrow,.eyebrow{
  display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);border:1px solid var(--line);border-radius:999px;padding:5px 14px;background:var(--bg-2)
}
.hero h1{
  font-family:var(--font-display);font-weight:800;font-size:clamp(30px,5.4vw,52px);
  line-height:1.15;margin:20px auto 14px;max-width:17ch;text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--hot)}
.hero p.lead{color:var(--muted);max-width:56ch;margin:0 auto 28px;font-size:17.5px}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-block;padding:12px 24px;border-radius:10px;font-weight:700;font-size:15.5px;
  border:1px solid var(--line);color:var(--fg);background:var(--bg-2);cursor:pointer
}
.btn:hover{background:var(--bg-3);text-decoration:none}
.btn.gold{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.gold:hover{background:var(--accent-deep)}

/* ===== Stats ===== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-block:36px}
.stat{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:18px 16px;text-align:center}
.stat b{display:block;font-size:26px;font-weight:800;color:var(--hot);font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:13.5px}

/* ===== Sections ===== */
section{padding-block:40px}
.sec-head{text-align:center;max-width:62ch;margin:0 auto 32px}
.sec-head h2{font-family:var(--font-display);font-weight:800;font-size:clamp(23px,3.4vw,32px);margin:14px 0 8px;text-wrap:balance}
.sec-head p{color:var(--muted);margin:0}

/* ===== Cards ===== */
.grid{display:grid;gap:14px}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:22px;
  display:flex;flex-direction:column;gap:8px;min-width:0
}
.card:hover{border-color:#bfc6dc}
.card .ic{font-size:24px}
.card h3{margin:0;font-size:17px;font-weight:700}
.card p{margin:0;color:var(--muted);font-size:14.5px;flex:1}
.card .go{font-weight:700;font-size:14.5px}

/* ===== Store ===== */
.filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:26px}
.filters button{
  border:1px solid var(--line);background:var(--bg-2);color:var(--muted);
  padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit
}
.filters button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.prod{position:relative}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{font-size:11.5px;font-weight:700;letter-spacing:.05em;padding:3px 9px;border-radius:999px}
.badge.free{background:rgba(14,133,83,.12);color:var(--ok)}
.badge.aff{background:rgba(255,107,43,.14);color:#b3400d}
.badge.own{background:rgba(70,100,220,.12);color:#3049b0}
.price{font-weight:800;font-size:16px;color:var(--fg);font-variant-numeric:tabular-nums}
.price small{color:var(--muted);font-weight:500}

/* ===== Tools ===== */
.tool{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:26px;margin-bottom:22px}
.tool h2,.tool h3{margin:0 0 4px;font-size:19px;font-weight:800}
.tool .sub{color:var(--muted);font-size:14.5px;margin:0 0 18px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;min-width:0}
.field label{font-size:13.5px;font-weight:700;color:var(--muted)}
input[type=text],input[type=number],input[type=email],input[type=tel],select,textarea{
  background:var(--bg);border:1px solid var(--line);border-radius:9px;color:var(--fg);
  padding:11px 13px;font-size:15px;font-family:inherit;width:100%
}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-ink);outline-offset:1px;border-color:var(--accent)}
.tool-row{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.result{
  background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:16px;
  font-size:15px;margin-top:6px;white-space:pre-wrap;word-break:break-word
}
.result b{color:var(--hot);font-size:22px;font-variant-numeric:tabular-nums}
.check{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;cursor:pointer}
.check input{width:18px;height:18px;margin-top:3px;accent-color:var(--accent);flex-shrink:0}
.check span{font-size:14.5px}
.check.done span{color:var(--muted);text-decoration:line-through}

/* ===== Steps (hoc-tap) ===== */
.step{display:flex;gap:18px;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:14px}
.step .no{
  width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;
  font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-variant-numeric:tabular-nums
}
.step .bd{min-width:0}
.step h2,.step h3{margin:2px 0 6px;font-size:17.5px}
.step p{margin:0;color:var(--muted);font-size:14.5px}
.step ul{margin:8px 0 0;padding-left:18px;color:var(--muted);font-size:14.5px}
.step li{margin-bottom:4px}

/* ===== Note / disclaimer ===== */
.note{
  border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;
  background:var(--bg-2);padding:14px 16px;font-size:14px;color:var(--muted);margin-block:22px
}

/* ===== Newsletter ===== */
.news{background:linear-gradient(160deg,var(--bg-3),var(--bg-2));border:1px solid var(--line);border-radius:18px;padding:34px 26px;text-align:center}
.news h2{font-family:var(--font-display);font-weight:800;font-size:clamp(21px,3vw,27px);margin:0 0 8px}
.news p{color:var(--muted);max-width:52ch;margin:0 auto 20px;font-size:15px}
.news form{display:flex;gap:10px;max-width:460px;margin-inline:auto;flex-wrap:wrap}
.news input{flex:1;min-width:200px}
.news .msg{margin-top:12px;font-size:14px;color:var(--ok);min-height:1.4em}

/* ===== Footer ===== */
footer{border-top:1px solid var(--line);margin-top:48px;margin-inline:-16px;padding-inline:16px}
.foot-in{max-width:1080px;margin-inline:auto;padding-block:30px;color:var(--muted);font-size:13.5px}
.foot-in p{margin:0 0 8px}

/* ===== Toast ===== */
#toast{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  background:var(--fg);border:1px solid var(--fg);color:#fff;box-shadow:0 8px 24px rgba(17,21,38,.25);
  padding:12px 20px;border-radius:12px;font-size:14.5px;max-width:90vw;text-align:center;z-index:99
}
/* ===== Cửa hàng: đầu trang, thanh công cụ ===== */
.wrap.wide{max-width:1240px}
.shop-head{padding-block:40px 14px;text-align:center}
.shop-head h1{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,4vw,38px);margin:0 0 10px;text-wrap:balance}
.shop-head p{color:var(--muted);max-width:60ch;margin:0 auto 22px}
.shop-search{max-width:560px;margin-inline:auto}
.shop-search input{border-radius:999px;padding:13px 22px;background:var(--bg-2);border-color:var(--bg-2)}
.shop-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.shop-count{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.shop-sort select{width:auto;border-radius:999px;padding:9px 16px;font-size:14px;background:var(--bg-2)}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 0}
.legend{list-style:none;margin:34px 0 0;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2);display:grid;gap:12px;font-size:14px;color:var(--muted)}
.legend li{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.lg{display:inline-block;border-radius:999px;padding:5px 14px;font-size:12.5px;font-weight:700;border:1px solid transparent;flex-shrink:0}

/* ===== Lưới & thẻ sản phẩm ===== */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:28px 18px}
.pc{display:flex;flex-direction:column;gap:9px;min-width:0}
.pc-h{margin:0;flex:1;font-size:13.5px;line-height:1.42;font-weight:800}
.pc-thumb{display:block;border-radius:12px;box-shadow:0 4px 14px rgba(17,21,38,.12)}
.pc-thumb:hover{text-decoration:none}
.pc-title{color:var(--fg);font-weight:800;font-size:13.5px;line-height:1.42;text-transform:uppercase;letter-spacing:.01em;flex:1}
.pc-title:hover{color:var(--accent-ink);text-decoration:none}
.pre.free{color:var(--ok)}
.pre.own{color:var(--hot)}
.pc-price{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.pc-price.free{color:var(--ok)}
.pc-price.own{color:var(--hot)}
.pc-price.aff{color:var(--muted);font-weight:600}
.pc-price s{color:var(--muted);font-weight:500;margin-left:4px}
.pc-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:2px}
.pc-more{font-size:13px;color:var(--muted);font-weight:600}
.pc-more:hover{color:var(--fg)}
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:9px 18px;font-size:13.5px;font-weight:700;border:1px solid transparent;cursor:pointer;font-family:inherit;line-height:1.3}
.pill:hover{text-decoration:none}
.a-own{background:var(--accent);border-color:var(--accent);color:#fff}
.a-own:hover{background:var(--accent-deep)}
.a-aff{background:var(--fg);border-color:var(--fg);color:#fff}
.a-aff:hover{background:#2c3352}
.a-free{background:transparent;border-color:var(--ok);color:var(--ok)}
.a-free:hover{background:rgba(14,133,83,.1)}
.btn.big{display:block;width:100%;text-align:center;font-family:inherit}
.btn.a-own,.btn.a-aff,.btn.a-free{border-width:1px;border-style:solid}
.btn.a-own:hover{background:var(--accent-deep)}
.btn.a-aff:hover{background:#2c3352}
.btn.a-free:hover{background:rgba(14,133,83,.1)}

/* ===== Ảnh bìa vẽ bằng CSS ===== */
.thumb{
  --g1:#141a2c;--g2:#3a4772;--g3:#8a9ad0;
  position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;isolation:isolate;
  container-type:inline-size;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:0 8% 9%;background:linear-gradient(125deg,var(--g1) 0%,var(--g2) 58%,var(--g3) 100%);
  color:#fff;
}
.thumb::before{content:"";position:absolute;inset:0;z-index:-1;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.055) 0 12px,transparent 12px 26px)}
.thumb::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 0% 100%,rgba(0,0,0,.5),transparent 60%)}
.t-gold{--g1:#3a2705;--g2:#b9791a;--g3:#f5b942}
.t-blue{--g1:#0b1c47;--g2:#2456c9;--g3:#5aa0ff}
.t-green{--g1:#062b1c;--g2:#12845a;--g3:#5fcf9a}
.t-red{--g1:#3d0a12;--g2:#b3243a;--g3:#ff7a6b}
.t-violet{--g1:#22104a;--g2:#6a3fd1;--g3:#b08cff}
.t-teal{--g1:#052c36;--g2:#0f8fa3;--g3:#5fe0e6}
.t-slate{--g1:#141a2c;--g2:#3a4772;--g3:#8a9ad0}
.th-to{font-weight:800;font-size:18px;font-size:clamp(15px,11.5cqw,46px);line-height:1.14;letter-spacing:-.01em;
  text-transform:uppercase;transform:skew(-5deg);text-shadow:0 .06em 0 rgba(0,0,0,.35),0 0 .5em rgba(0,0,0,.25)}
.th-nho{font-weight:700;font-size:9px;font-size:clamp(8.5px,4.3cqw,16px);letter-spacing:.08em;text-transform:uppercase;
  background:rgba(0,0,0,.42);padding:.28em .75em;border-radius:999px;margin-bottom:.55em;max-width:100%}
.th-ic{position:absolute;right:3%;bottom:-8%;z-index:-1;font-size:60px;font-size:clamp(40px,36cqw,150px);line-height:1;
  opacity:.3;transform:rotate(-12deg)}
.th-nhan{position:absolute;top:9%;right:-13%;transform:rotate(36deg);background:#e5323e;
  font-weight:800;font-size:9px;font-size:clamp(8.5px,4.2cqw,15px);letter-spacing:.1em;padding:.22em 3.4em}
.th-src{position:absolute;left:8%;bottom:7%;font-weight:700;font-size:7.5px;font-size:clamp(7px,3.3cqw,12px);letter-spacing:.14em;opacity:.8}

/* ===== Trang chi tiết sản phẩm ===== */
.crumb{margin:0 0 14px;font-size:14px;color:var(--muted)}
.pd-head{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);gap:24px;align-items:center;margin-bottom:26px}
@media (max-width:700px){.pd-head{grid-template-columns:1fr}}
.pd-info{min-width:0}
.rel-h{font-size:20px;font-weight:800;margin:40px 0 16px}
.mbar{display:none}
@media (max-width:820px){
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.97);border-top:1px solid var(--line)}
  .mbar-price{font-weight:800;color:var(--hot);font-variant-numeric:tabular-nums}
  body.has-mbar{padding-bottom:70px}
  body.has-mbar #toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
.pd-title{font-family:var(--font-display);font-weight:800;font-size:clamp(22px,3.6vw,32px);margin:8px 0 6px;text-wrap:balance}
.pd-sub{color:var(--muted);margin:0;max-width:62ch}
.pd-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:22px;align-items:start}
@media (max-width:820px){.pd-grid{grid-template-columns:1fr}}
.pd-art{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:26px;min-width:0}
.pd-art h2{font-size:19px;margin:26px 0 10px;line-height:1.35}
.pd-art h2:first-child{margin-top:0}
.pd-fig{margin:16px 0 20px}
.pd-fig img{display:block;width:100%;max-width:640px;height:auto;border-radius:12px;border:1px solid var(--line)}
.pd-fig figcaption{margin-top:8px;font-size:13px;color:var(--muted)}
.pd-art h3{font-size:17.5px;margin:22px 0 8px}
.pd-art p{margin:0 0 12px;color:var(--fg-2);font-size:15px}
.pd-art ul{margin:0 0 14px;padding-left:20px;color:var(--fg-2);font-size:15px}
.pd-art li{margin-bottom:6px}
.eeat-box{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--bg-2);border-radius:10px;padding:14px 16px;margin:16px 0;font-size:14.5px;color:var(--fg-2)}
.pros-cons{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:16px 0}
.pros-cons h3,.pros-cons h4{margin:0 0 8px;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.pros h3,.pros h4{color:var(--ok)}.cons h3,.cons h4{color:var(--hot)}
.pros,.cons{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;min-width:0}
.pros ul,.cons ul{margin:0;padding-left:18px;font-size:14px}
.buybox{background:var(--bg);border:2px solid var(--accent);box-shadow:0 10px 30px rgba(17,21,38,.08);border-radius:16px;padding:22px;position:sticky;top:calc(70px + env(safe-area-inset-top,0px))}
.bb-price{font-weight:800;font-size:26px;color:var(--hot);margin-bottom:14px;font-variant-numeric:tabular-nums}
.bb-price small{display:block;font-size:13px;color:var(--muted);font-weight:500;margin-top:2px}
.buy-note{color:var(--muted);font-size:13px;margin:10px 0 0}
.bb-trust{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.bb-trust li{margin-bottom:6px}

/* ===== Modal thanh toán SePay ===== */
#ck-overlay{position:fixed;inset:0;background:rgba(17,21,38,.55);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px}
#ck-modal{background:var(--bg);border:1px solid var(--line);box-shadow:0 20px 60px rgba(17,21,38,.25);border-radius:18px;padding:26px;max-width:460px;width:100%;max-height:88vh;overflow-y:auto;position:relative}
#ck-close{position:absolute;top:12px;right:12px;background:var(--bg-2);border:1px solid var(--line);color:var(--muted);border-radius:8px;width:32px;height:32px;cursor:pointer;font-size:14px}
#ck-close:hover{color:var(--fg)}
.demo-bar{margin-inline:-16px;padding:7px 16px;background:#fff6e0;border-bottom:1px solid #e0a526;color:#7a5200;text-align:center;font-size:13px;font-weight:600}
.demo-banner{background:#fff6e0;border:1px solid #e0a526;color:#7a5200;border-radius:10px;padding:10px 12px;font-size:13px;margin:16px 0 12px}
.ck-eyebrow{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ck-title{margin:0 28px 4px 0;font-size:18px;font-weight:800}
.ck-price{margin:0 0 16px;font-size:22px;font-weight:800;color:var(--hot);font-variant-numeric:tabular-nums}
.ck-hint{color:var(--muted);font-size:12.5px}
.qr-wrap{display:flex;justify-content:center;margin:14px 0}
.qr-box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;display:inline-block}
.copy-rows{display:flex;flex-direction:column;gap:6px;margin:14px 0}
.copy-row{display:flex;align-items:center;gap:10px;background:var(--bg-2);border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:14px}
.cr-label{color:var(--muted);flex-shrink:0;width:96px;font-size:12.5px}
.cr-val{font-weight:700;word-break:break-all;flex:1;font-variant-numeric:tabular-nums}
.cr-btn{background:var(--bg);border:1px solid var(--line);color:var(--accent-ink);border-radius:7px;padding:4px 10px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;flex-shrink:0}
.cr-btn:hover{border-color:var(--accent)}
.ck-steps{margin:14px 0 0;padding-left:20px;font-size:14px;color:var(--fg-2)}
.ck-steps li{margin-bottom:8px}

/* ===== Bán tự động: chờ tiền, nhập Machine ID, nhận key ===== */
.don-ok{background:#e9f7f1;border:1px solid #9ad7bf;color:#0f5c46;border-radius:10px;padding:10px 12px;font-size:14px;margin:4px 0 12px}
.don-cho{background:var(--bg-2);border:1px dashed var(--line);border-radius:10px;padding:10px 12px;font-size:13.5px;color:var(--fg-2);margin:12px 0}
.don-loi{color:#b3243a;font-size:13.5px;margin:10px 0 0}
.don-key{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;word-break:break-all;margin-bottom:10px}
.don-chep{width:100%}
.don-xn{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;margin:2px 0 14px;cursor:pointer;color:var(--fg-2)}
.don-xn input{width:18px;height:18px;margin-top:2px;accent-color:var(--accent);flex-shrink:0}
.don-link{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12.5px;color:var(--muted);margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.don-link span{flex-basis:100%}
.don-link a{word-break:break-all;color:var(--accent-ink);flex:1 1 200px;min-width:0}
.don-trang{max-width:520px;margin:0 auto;background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:26px}
@media (max-width:600px){.don-trang{padding:20px 16px}}

/* ===== Bài "Chọn ngách": nhóm câu hỏi và bảng 100 ngách ===== */
.q-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px 22px;margin-bottom:14px}
.q-group h3{margin:0 0 10px;font-size:15px;font-weight:800;color:var(--accent-ink);letter-spacing:.04em;text-transform:uppercase}
.nlist{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg)}
.nrow{display:grid;grid-template-columns:36px minmax(0,1.15fr) minmax(0,1.9fr) 132px 96px;gap:14px;align-items:center;padding:12px 16px;border-top:1px solid var(--line)}
.nrow:first-child{border-top:0}
.nrow.head{background:var(--bg-2);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.n-no{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.n-ten b{display:block;font-size:15px;line-height:1.35}
.n-ten small{color:var(--muted);font-size:12.5px}
.n-con{color:var(--fg-2);font-size:13.5px}
.n-cpm{font-weight:800;color:var(--hot);font-variant-numeric:tabular-nums;white-space:nowrap}
.n-go{text-align:right}
.pill.a-plain{background:var(--bg-2);border-color:var(--line);color:var(--fg);padding:7px 14px;font-size:12.5px}
.pill.a-plain:hover{background:var(--bg-3)}
@media (max-width:760px){
  .nrow{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:start}
  .nrow.head,.n-no{display:none}
  .n-cpm{text-align:right}
  .n-con,.n-go{grid-column:1/-1}
  .n-go{text-align:left}
}

/* ===== Thẻ bài viết ===== */
.art-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.art-card{display:flex;gap:18px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:22px;color:var(--fg);box-shadow:0 4px 14px rgba(17,21,38,.06);min-width:0}
.art-card:hover{border-color:var(--accent);text-decoration:none}
.art-ic{font-size:30px;line-height:1;background:var(--bg-2);border-radius:14px;padding:14px;flex-shrink:0}
.art-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.art-tag{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hot)}
.art-title{margin:0;font-size:18px;font-weight:800;line-height:1.35}
.art-desc{font-size:14.5px;color:var(--muted)}
.art-card .go{font-weight:700;font-size:14.5px;color:var(--accent-ink)}
@media (max-width:560px){.art-list{grid-template-columns:1fr}.art-card{padding:18px;gap:14px}}

button:focus-visible,a:focus-visible,.check:focus-within{outline:2px solid var(--accent-ink);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  .card,.btn,.filters button{transition:background .15s,border-color .15s}
}
@media (max-width:560px){
  .step{flex-direction:column;gap:10px}
  .hero{padding-block:44px 32px}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
  .pc-title{font-size:12.5px}
  .pill{padding:8px 14px;font-size:13px}
  .filters{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding-bottom:6px}
  .filters button{flex-shrink:0}
}

/* ===== Đồng bộ máy tính và điện thoại ===== */
/* Nhãn và nút: chữ không nhỏ hơn 12px, vùng bấm không thấp hơn 36px */
.badge{font-size:12px}
.pill{min-height:36px;white-space:nowrap}
.pill.a-plain{padding:8px 14px}
.cr-btn{min-height:32px}
/* Nội dung chuyển khoản xuống dòng ở khoảng trắng, không cắt giữa dãy số */
.cr-val{word-break:normal;overflow-wrap:anywhere}
@media (max-width:760px){
  /* Bảng 100 ngách trên điện thoại: giá CPM nằm cùng hàng với tên ngách */
  .nrow .n-ten{grid-column:1;grid-row:1}
  .nrow .n-cpm{grid-column:2;grid-row:1;align-self:start;text-align:right}
}
/* Hàng nút trên thẻ sản phẩm: không bao giờ rớt dòng lệch nhau giữa các thẻ */
.pc-act{flex-wrap:nowrap;gap:10px}
.pc-act .pill{padding-inline:14px;font-size:13px}
.pc-more{white-space:nowrap}
/* Nút menu chỉ hiện trên điện thoại */
.nav-toggle{display:none}
@media (max-width:760px){
  .nav.js-nav .nav-in{flex-wrap:wrap;gap:10px}
  .nav.js-nav .nav-toggle{display:inline-flex;align-items:center;gap:8px;margin-left:auto;min-height:40px;padding:8px 14px;
    background:var(--bg-2);border:1px solid var(--line);border-radius:10px;color:var(--fg);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
  .nav.js-nav .nav-links{display:none;width:100%;margin-left:0;flex-direction:column;gap:2px;padding-bottom:6px}
  .nav.js-nav.open .nav-links{display:flex}
  .nav.js-nav .nav-links a{padding:11px 14px;border-radius:10px;font-size:15.5px}
}
@media (max-width:560px){
  /* 4 ô số liệu xếp 2 cột thay vì 1 cột dài */
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:14px 10px}
  .stat b{font-size:22px}
  /* Thẻ sản phẩm hẹp: nút chiếm trọn chiều ngang, "Chi tiết" nằm ngay dưới, thẻ nào cũng cao như nhau */
  .pc-act{flex-direction:column;align-items:stretch;gap:4px}
  .pc-act .pill{width:100%}
  .pc-more{text-align:center;padding:6px 0}
  .cta-row .btn{flex:1 1 100%;text-align:center}
  .shop-bar{gap:8px}
  .buybox{position:static}
  #ck-modal{padding:20px 16px}
}

/* ===== Trình tạo mô tả: dòng đếm từ ===== */
.md-stat{margin:12px 0 0;font-size:13.5px;color:var(--muted);overflow-wrap:anywhere}
.md-len-field{max-width:280px}
@media (max-width:560px){.md-len-field{max-width:none}}
/* Hộp thanh toán: chọn gói */
.ck-goi{display:flex;flex-direction:column;gap:8px;margin:4px 0 16px}
.ck-goi-item{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:var(--bg)}
.ck-goi-item:has(input:checked){border-color:var(--accent);background:var(--bg-2)}
.ck-goi-item input{margin-top:4px;accent-color:var(--accent);flex-shrink:0}
.ck-goi-item b{display:block;font-size:15px}
.ck-goi-item small{display:block;color:var(--muted);font-size:13px;margin-top:2px}