/* ============================================================
   wp.edu.vn — Stylesheet dùng chung cho toàn bộ trang
   ============================================================ */
:root{
  --bg:#0b1020;
  --bg-soft:#121933;
  --card:#161e3d;
  --card-2:#1b2547;
  --line:rgba(255,255,255,.08);
  --txt:#eef1fb;
  --txt-soft:#d3dbf5;
  --muted:#9aa6c9;
  --brand:#5b8cff;
  --brand-2:#7c5cff;
  --accent:#22d3a6;
  --warn:#ffb020;
  --danger:#ff5d5d;
  --radius:16px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --max:1180px;
  /* surfaces & effects (đổi theo theme) */
  --surface-alt:rgba(255,255,255,.02);
  --ghost:rgba(255,255,255,.04);
  --ghost-hover:rgba(255,255,255,.09);
  --tab-bg:rgba(255,255,255,.03);
  --header-bg:rgba(11,16,32,.7);
  --glow1:rgba(124,92,255,.18);
  --glow2:rgba(91,140,255,.15);
  --screen-from:#0e1530;
  --screen-to:#0b1020;
  --chip-txt:#cdd6f5;
  --input-bg:rgba(255,255,255,.04);
}
/* ===== Chế độ SÁNG ===== */
[data-theme="light"]{
  --bg:#f5f7fe;
  --bg-soft:#ffffff;
  --card:#ffffff;
  --card-2:#eef2fb;
  --line:rgba(13,22,55,.10);
  --txt:#10172e;
  --txt-soft:#39446b;
  --muted:#647199;
  --shadow:0 18px 50px rgba(40,60,120,.16);
  --surface-alt:rgba(13,22,55,.025);
  --ghost:rgba(13,22,55,.04);
  --ghost-hover:rgba(13,22,55,.08);
  --tab-bg:rgba(13,22,55,.035);
  --header-bg:rgba(255,255,255,.8);
  --glow1:rgba(124,92,255,.14);
  --glow2:rgba(91,140,255,.13);
  --screen-from:#eaf0ff;
  --screen-to:#f5f7fe;
  --chip-txt:#39446b;
  --input-bg:rgba(13,22,55,.04);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--glow1), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, var(--glow2), transparent 55%),
    var(--bg);
  color:var(--txt);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background-color .3s ease, color .3s ease;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 20px;border-radius:12px;font-weight:600;font-size:15px;
  border:1px solid transparent;cursor:pointer;transition:.2s;white-space:nowrap;
}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 10px 30px rgba(91,140,255,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(91,140,255,.5)}
.btn-ghost{background:var(--ghost);border-color:var(--line);color:var(--txt)}
.btn-ghost:hover{background:var(--ghost-hover)}
.btn-block{width:100%;justify-content:center}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;background:rgba(91,140,255,.12);border:1px solid rgba(91,140,255,.25);color:#bcd0ff}

/* HEADER */
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:var(--header-bg);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.3px}
.logo .mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--brand),var(--brand-2));display:grid;place-items:center;font-size:16px;font-weight:900;color:#fff;box-shadow:0 8px 20px rgba(124,92,255,.45)}
.logo b{color:var(--brand)}
.menu{display:flex;gap:28px;font-size:15px;font-weight:500;color:var(--muted)}
.menu a:hover,.menu a.active{color:var(--txt)}
.nav-actions{display:flex;align-items:center;gap:12px}
.theme-toggle{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;border:1px solid var(--line);background:var(--ghost);cursor:pointer;font-size:17px;line-height:1;transition:.2s;color:var(--txt)}
.theme-toggle:hover{background:var(--ghost-hover);transform:translateY(-1px)}
.theme-toggle .ic-moon{display:none}
.theme-toggle .ic-sun{display:block}
[data-theme="light"] .theme-toggle .ic-sun{display:none}
[data-theme="light"] .theme-toggle .ic-moon{display:block}
.cart-link{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:11px;border:1px solid var(--line);background:var(--ghost);font-size:18px;transition:.2s}
.cart-link:hover{background:var(--ghost-hover)}
.cart-link .count{position:absolute;top:-6px;right:-6px;background:var(--danger);color:#fff;font-size:11px;font-weight:800;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px}
.hamburger{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer}
.hamburger span{display:block;width:20px;height:2px;background:var(--txt);margin:4px 0;border-radius:2px}

/* HERO */
.hero{padding:72px 0 40px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero h1{font-size:52px;line-height:1.08;font-weight:900;letter-spacing:-1.5px;margin:18px 0}
.hero h1 .grad{background:linear-gradient(120deg,var(--brand),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:18px;color:var(--muted);max-width:540px}
.hero-cta{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.hero-stats{display:flex;gap:34px;margin-top:38px}
.hero-stats .n{font-size:28px;font-weight:800}
.hero-stats .l{font-size:13px;color:var(--muted)}
.hero-visual{position:relative}
.browser{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.browser .bar{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--card-2)}
.browser .bar i{width:11px;height:11px;border-radius:50%;display:block}
.browser .url{margin-left:12px;flex:1;background:rgba(0,0,0,.25);border-radius:8px;padding:5px 12px;font-size:12px;color:var(--muted)}
.browser .screen{padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:12px;background:linear-gradient(180deg,var(--screen-from),var(--screen-to))}
.mini{border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--card-2)}
.mini .thumb{height:74px;background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.mini:nth-child(2) .thumb{background:linear-gradient(135deg,#22d3a6,#5b8cff)}
.mini:nth-child(3) .thumb{background:linear-gradient(135deg,#ff7eb6,#7c5cff)}
.mini:nth-child(4) .thumb{background:linear-gradient(135deg,#ffb020,#ff5d5d)}
.mini .meta{padding:8px 10px;font-size:12px}
.mini .meta .t{font-weight:600}
.mini .meta .p{color:var(--accent);font-weight:700}
.float-badge{position:absolute;right:-14px;bottom:-16px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px;box-shadow:var(--shadow);display:flex;align-items:center;gap:10px}
.float-badge .ic{width:38px;height:38px;border-radius:10px;background:rgba(34,211,166,.15);display:grid;place-items:center;color:var(--accent);font-size:18px}

/* TRUSTED / LOGOS strip */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface-alt)}
.strip .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 20px;justify-content:center}
.strip span{color:var(--muted);font-size:13px}
.strip .chip{padding:6px 14px;border-radius:8px;border:1px solid var(--line);font-weight:600;font-size:13px;color:var(--chip-txt)}

/* SECTION */
section.block{padding:70px 0}
.head{text-align:center;max-width:640px;margin:0 auto 44px}
.head h2{font-size:36px;font-weight:800;letter-spacing:-.8px}
.head p{color:var(--muted);margin-top:10px}
.surface-alt{background:var(--surface-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* PAGE HEAD + BREADCRUMB (trang con) */
.page-head{padding:38px 0 6px}
.breadcrumb{display:flex;gap:8px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.breadcrumb a:hover{color:var(--brand)}
.breadcrumb .sep{opacity:.5}
.page-title{font-size:34px;font-weight:800;letter-spacing:-.6px;margin-top:10px}
.page-sub{color:var(--muted);margin-top:6px}

/* CATEGORY TABS */
.tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
.tab{padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:var(--tab-bg);color:var(--muted);font-weight:600;font-size:14px;cursor:pointer;transition:.2s}
.tab.active,.tab:hover{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent}

/* PRODUCT GRID */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s;position:relative}
.card:hover{transform:translateY(-6px);border-color:rgba(91,140,255,.4);box-shadow:var(--shadow)}
.card .cover{height:185px;position:relative;overflow:hidden;display:block}
.card .cover .g{position:absolute;inset:0}
.g1{background:linear-gradient(135deg,#5b8cff,#7c5cff)}
.g2{background:linear-gradient(135deg,#22d3a6,#0ea5e9)}
.g3{background:linear-gradient(135deg,#ff7eb6,#7c5cff)}
.g4{background:linear-gradient(135deg,#ffb020,#ff5d5d)}
.g5{background:linear-gradient(135deg,#0ea5e9,#22d3a6)}
.g6{background:linear-gradient(135deg,#a78bfa,#ec4899)}
.card .cover .fakeui{position:absolute;inset:18px;border-radius:10px;background:rgba(255,255,255,.12);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.25)}
.card .cover .fakeui::before{content:"";position:absolute;top:10px;left:10px;right:60%;height:8px;border-radius:4px;background:rgba(255,255,255,.6)}
.card .cover .fakeui::after{content:"";position:absolute;top:26px;left:10px;right:30%;height:6px;border-radius:4px;background:rgba(255,255,255,.4)}
.badge-type{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:#fff;padding:4px 10px;border-radius:8px;font-size:11px;font-weight:700;letter-spacing:.3px}
.badge-hot{position:absolute;top:12px;right:12px;background:var(--warn);color:#231a00;padding:4px 10px;border-radius:8px;font-size:11px;font-weight:800}
.card .body{padding:16px 18px 18px}
.card .body h3{font-size:17px;font-weight:700}
.card .body .cat{font-size:12px;color:var(--muted);margin-top:2px}
.stars{color:var(--warn);font-size:13px;margin-top:8px}
.stars span{color:var(--muted)}
.card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.price{font-size:20px;font-weight:800}
.price small{font-size:13px;color:var(--muted);text-decoration:line-through;font-weight:500;margin-left:6px}
.card .actions{display:flex;gap:8px;margin-top:14px}
.card .actions .btn{flex:1;justify-content:center;padding:10px;font-size:14px}

/* FEATURES */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.feat .ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:rgba(91,140,255,.12);margin-bottom:14px}
.feat h3{font-size:18px;font-weight:700;margin-bottom:6px}
.feat p{color:var(--muted);font-size:14px}

/* PRICING */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column}
.plan.popular{border-color:var(--brand);background:linear-gradient(180deg,rgba(91,140,255,.12),var(--card));position:relative}
.plan.popular::before{content:"PHỔ BIẾN NHẤT";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;padding:5px 14px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.5px}
.plan h3{font-size:18px;font-weight:700}
.plan .amt{font-size:40px;font-weight:900;margin:14px 0 2px}
.plan .amt small{font-size:15px;color:var(--muted);font-weight:500}
.plan ul{list-style:none;margin:20px 0;display:flex;flex-direction:column;gap:11px;flex:1}
.plan li{font-size:14px;color:var(--txt-soft);display:flex;gap:9px;align-items:flex-start}
.plan li::before{content:"✓";color:var(--accent);font-weight:800}
.plan li.off{color:var(--muted)}
.plan li.off::before{content:"✕";color:#5a6488}

/* DEMO CTA banner */
.banner{background:linear-gradient(120deg,rgba(91,140,255,.18),rgba(124,92,255,.14));border:1px solid rgba(124,92,255,.3);border-radius:24px;padding:48px;text-align:center}
.banner h2{font-size:32px;font-weight:800;letter-spacing:-.6px}
.banner p{color:var(--muted);margin:10px auto 26px;max-width:520px}

/* STEPS */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{text-align:center;padding:10px}
.step .num{width:52px;height:52px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;font-weight:800;font-size:20px;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 10px 26px rgba(91,140,255,.4)}
.step h3{font-size:16px;font-weight:700;margin-bottom:6px}
.step p{font-size:13px;color:var(--muted)}

/* TESTIMONIALS */
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.test{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.test .q{font-size:15px;color:var(--txt-soft)}
.test .who{display:flex;align-items:center;gap:12px;margin-top:18px}
.test .av{width:42px;height:42px;border-radius:50%;color:#fff;background:linear-gradient(135deg,var(--brand),var(--accent));display:grid;place-items:center;font-weight:800}
.test .who .nm{font-weight:700;font-size:14px}
.test .who .rl{font-size:12px;color:var(--muted)}

/* FAQ */
.faq{max-width:760px;margin:0 auto}
.qa{border:1px solid var(--line);border-radius:12px;background:var(--card);margin-bottom:12px;overflow:hidden}
.qa summary{padding:18px 20px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-size:22px;color:var(--brand)}
.qa[open] summary::after{content:"–"}
.qa .a{padding:0 20px 18px;color:var(--muted);font-size:14px}

/* ====== FORM CONTROLS (dùng chung) ====== */
.field{display:block;margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--txt-soft);margin-bottom:6px}
.input,select.input,textarea.input{width:100%;background:var(--input-bg);border:1px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--txt);font-size:14px;font-family:inherit;transition:.2s}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(91,140,255,.18)}
.input::placeholder{color:var(--muted)}

/* ============================================================
   TRANG: CHI TIẾT SẢN PHẨM
   ============================================================ */
.pd-grid{display:grid;grid-template-columns:1.4fr .85fr;gap:34px;align-items:start;padding:24px 0 10px}
.gallery .main-shot{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);height:420px}
.gallery .main-shot .g{position:absolute;inset:0}
.gallery .main-shot .winbar{position:relative;z-index:2;display:flex;gap:7px;padding:12px 14px;background:rgba(0,0,0,.25)}
.gallery .main-shot .winbar i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.6)}
.gallery .main-shot .mock{position:absolute;inset:46px 22px 22px;border-radius:12px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3)}
.gallery .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.gallery .thumbs .t{height:72px;border-radius:10px;border:1px solid var(--line);cursor:pointer;transition:.2s}
.gallery .thumbs .t:hover{transform:translateY(-3px);border-color:var(--brand)}
.pd-info .ptype{display:inline-flex;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.pd-info h1{font-size:30px;font-weight:800;letter-spacing:-.5px;margin:8px 0}
.pd-meta{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin:6px 0 18px}
.pd-meta b{color:var(--txt)}
.buybox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;position:sticky;top:88px}
.buybox .price-row{display:flex;align-items:baseline;gap:10px}
.buybox .now{font-size:34px;font-weight:900}
.buybox .was{font-size:16px;color:var(--muted);text-decoration:line-through}
.buybox .save{margin-left:auto;background:rgba(34,211,166,.15);color:var(--accent);font-weight:700;font-size:12px;padding:4px 10px;border-radius:8px}
.buybox .lic{margin:16px 0}
.buybox .lic .opt{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:11px;padding:12px;margin-bottom:9px;cursor:pointer;transition:.2s}
.buybox .lic .opt:hover{border-color:var(--brand)}
.buybox .lic .opt.sel{border-color:var(--brand);background:rgba(91,140,255,.1)}
.buybox .lic .opt .r{width:18px;height:18px;border-radius:50%;border:2px solid var(--muted);flex:0 0 auto;display:grid;place-items:center}
.buybox .lic .opt.sel .r{border-color:var(--brand)}
.buybox .lic .opt.sel .r::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--brand)}
.buybox .lic .opt .nm{font-weight:700;font-size:14px}
.buybox .lic .opt .ds{font-size:12px;color:var(--muted)}
.buybox .lic .opt .pr{margin-left:auto;font-weight:800}
.buybox .assure{margin-top:14px;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--txt-soft)}
.buybox .assure div::before{content:"✓ ";color:var(--accent);font-weight:800}
/* tabs nội dung sản phẩm */
.pd-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:14px 0 22px;flex-wrap:wrap}
.pd-tabs .t{padding:11px 16px;font-weight:600;font-size:14px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.pd-tabs .t.active{color:var(--txt);border-color:var(--brand)}
.pd-pane{display:none}
.pd-pane.active{display:block}
.pd-pane p{color:var(--txt-soft);margin-bottom:12px}
.spec{display:grid;grid-template-columns:1fr 1fr;gap:10px 30px;max-width:640px}
.spec .row{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:9px 0;font-size:14px}
.spec .row span{color:var(--muted)}
.featlist{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.featlist li{font-size:14px;color:var(--txt-soft);display:flex;gap:8px}
.featlist li::before{content:"✓";color:var(--accent);font-weight:800}
/* reviews */
.rev{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:18px;margin-bottom:12px}
.rev .top{display:flex;align-items:center;gap:12px}
.rev .av{width:40px;height:40px;border-radius:50%;color:#fff;background:linear-gradient(135deg,var(--brand),var(--accent));display:grid;place-items:center;font-weight:800}
.rev .nm{font-weight:700;font-size:14px}
.rev .dt{font-size:12px;color:var(--muted)}
.rev .body{margin-top:10px;color:var(--txt-soft);font-size:14px}

/* ============================================================
   TRANG: CỬA HÀNG (danh sách + lọc)
   ============================================================ */
.shop-grid{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start}
.filters{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;position:sticky;top:88px}
.filters .fg{padding:14px 0;border-bottom:1px solid var(--line)}
.filters .fg:last-child{border-bottom:none}
.filters h4{font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:12px}
.check{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--txt-soft);padding:5px 0;cursor:pointer}
.check input{accent-color:var(--brand);width:16px;height:16px}
.check .n{margin-left:auto;color:var(--muted);font-size:12px}
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.shop-toolbar .count{color:var(--muted);font-size:14px}
.shop-toolbar select.input{width:auto;padding:9px 12px}
.shop-grid .grid{grid-template-columns:repeat(2,1fr)}
.pagination{display:flex;gap:8px;justify-content:center;margin-top:36px}
.pagination a{min-width:40px;height:40px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line);background:var(--card);font-weight:600;font-size:14px;transition:.2s}
.pagination a:hover{border-color:var(--brand)}
.pagination a.active{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent}

/* ============================================================
   TRANG: GIỎ HÀNG & THANH TOÁN
   ============================================================ */
.cart-layout{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start;padding:10px 0 20px}
.cart-list{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cart-item{display:grid;grid-template-columns:84px 1fr auto;gap:16px;align-items:center;padding:18px;border-bottom:1px solid var(--line)}
.cart-item:last-child{border-bottom:none}
.cart-item .thumb{height:64px;border-radius:10px}
.cart-item .ttl{font-weight:700;font-size:15px}
.cart-item .sub{font-size:12px;color:var(--muted);margin-top:3px}
.cart-item .pr{font-weight:800;font-size:16px;text-align:right}
.cart-item .rm{display:block;font-size:12px;color:var(--danger);margin-top:6px;cursor:pointer;text-align:right}
.summary{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;position:sticky;top:88px}
.summary h3{font-size:17px;font-weight:700;margin-bottom:14px}
.sum-row{display:flex;justify-content:space-between;font-size:14px;color:var(--txt-soft);padding:7px 0}
.sum-row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-size:18px;font-weight:800;color:var(--txt)}
.coupon{display:flex;gap:8px;margin:14px 0}
.coupon .input{flex:1}
.pay-methods{display:flex;flex-direction:column;gap:10px;margin:6px 0 4px}
.pay-opt{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:11px;padding:13px;cursor:pointer;transition:.2s}
.pay-opt:hover{border-color:var(--brand)}
.pay-opt.sel{border-color:var(--brand);background:rgba(91,140,255,.1)}
.pay-opt .r{width:18px;height:18px;border-radius:50%;border:2px solid var(--muted);display:grid;place-items:center;flex:0 0 auto}
.pay-opt.sel .r{border-color:var(--brand)}
.pay-opt.sel .r::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--brand)}
.pay-opt .logo-m{margin-left:auto;font-weight:800;font-size:12px;padding:4px 9px;border-radius:7px;border:1px solid var(--line)}
.cart-empty{text-align:center;padding:70px 20px;color:var(--muted)}
.cart-empty .ic{font-size:46px}

/* ============================================================
   TRANG: TÀI KHOẢN
   ============================================================ */
.acct-grid{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:start;padding:10px 0 20px}
.acct-side{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;position:sticky;top:88px}
.acct-user{display:flex;align-items:center;gap:12px;padding:10px 10px 16px;border-bottom:1px solid var(--line);margin-bottom:10px}
.acct-user .av{width:46px;height:46px;border-radius:50%;color:#fff;background:linear-gradient(135deg,var(--brand),var(--accent));display:grid;place-items:center;font-weight:800;font-size:18px}
.acct-user .nm{font-weight:700;font-size:15px}
.acct-user .em{font-size:12px;color:var(--muted)}
.acct-nav a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;font-size:14px;font-weight:600;color:var(--txt-soft);cursor:pointer;transition:.2s}
.acct-nav a:hover{background:var(--ghost)}
.acct-nav a.active{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}
.acct-panel{display:none}
.acct-panel.active{display:block}
.panel-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:18px}
.panel-card h3{font-size:17px;font-weight:700;margin-bottom:16px}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.stat .n{font-size:26px;font-weight:800}
.stat .l{font-size:13px;color:var(--muted)}
.dl-item{display:grid;grid-template-columns:54px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.dl-item:last-child{border-bottom:none}
.dl-item .ic{width:54px;height:54px;border-radius:11px;display:grid;place-items:center;font-size:22px}
.dl-item .ttl{font-weight:700;font-size:14px}
.dl-item .sub{font-size:12px;color:var(--muted)}
.keybox{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;background:var(--input-bg);border:1px solid var(--line);border-radius:8px;padding:5px 9px;color:var(--txt-soft);margin-top:5px;display:inline-block}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th{text-align:left;color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.4px;padding:10px 12px;border-bottom:1px solid var(--line)}
table.tbl td{padding:13px 12px;border-bottom:1px solid var(--line);color:var(--txt-soft)}
table.tbl tr:last-child td{border-bottom:none}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:7px}
.tag.ok{background:rgba(34,211,166,.15);color:var(--accent)}
.tag.wait{background:rgba(255,176,32,.15);color:var(--warn)}

/* FOOTER */
footer{border-top:1px solid var(--line);background:var(--bg-soft);padding:54px 0 28px;margin-top:30px}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.f-grid h4{font-size:14px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:14px}
.f-grid a{display:block;color:var(--txt-soft);font-size:14px;margin-bottom:9px}
.f-grid a:hover{color:var(--brand)}
.f-grid p{color:var(--muted);font-size:14px;margin-top:12px;max-width:300px}
.pay{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.pay .m{padding:6px 10px;border:1px solid var(--line);border-radius:8px;font-size:12px;font-weight:700;background:var(--tab-bg)}
.f-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:36px;padding-top:22px;color:var(--muted);font-size:13px;flex-wrap:wrap;gap:10px}

/* RESPONSIVE */
@media(max-width:980px){
  .pd-grid{grid-template-columns:1fr}
  .buybox,.summary,.filters,.acct-side{position:static}
}
@media(max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero h1{font-size:40px}
  .grid,.feat-grid,.price-grid,.test-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .shop-grid{grid-template-columns:1fr}
  .cart-layout{grid-template-columns:1fr}
  .acct-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .menu,.nav-actions .btn-ghost{display:none}
  .hamburger{display:block}
  .hero h1{font-size:32px}
  .grid,.feat-grid,.price-grid,.test-grid,.steps,.f-grid,.shop-grid .grid,.spec,.featlist,.stat-row{grid-template-columns:1fr}
  .hero-stats{gap:22px}
  .head h2,.banner h2{font-size:26px}
  .browser .screen{grid-template-columns:1fr 1fr}
  section.block{padding:50px 0}
  .banner{padding:32px 20px}
  .gallery .main-shot{height:300px}
  .cart-item{grid-template-columns:64px 1fr}
  .cart-item .pr{grid-column:2;text-align:left}
}

/* ============================================================
   ĐIỀU CHỈNH RIÊNG CHO WORDPRESS
   ============================================================ */
/* Menu (wp_nav_menu xuất ra thẻ <li>) */
.menu li{list-style:none;display:flex;align-items:center}
.menu .custom-logo{border-radius:8px}
.logo .custom-logo-link{display:inline-flex}

/* Phân trang dạng <ul class="page-numbers"> */
.pagination ul,ul.page-numbers{display:flex;gap:8px;justify-content:center;list-style:none;padding:0;flex-wrap:wrap}
.pagination .page-numbers,ul.page-numbers .page-numbers{min-width:40px;height:40px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line);background:var(--card);font-weight:600;font-size:14px;transition:.2s;padding:0 10px}
.pagination a.page-numbers:hover{border-color:var(--brand)}
.pagination .page-numbers.current{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent}
.pagination .page-numbers.dots{border:none;background:none}

/* Form đăng nhập mặc định của WP */
.login-username,.login-password,.login-remember,.login-submit{margin-bottom:14px}
#loginform label{display:block;font-size:13px;font-weight:600;color:var(--txt-soft);margin-bottom:6px}
#loginform input[type="text"],#loginform input[type="password"]{width:100%;background:var(--input-bg);border:1px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--txt);font-size:14px}
#loginform input[type="text"]:focus,#loginform input[type="password"]:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(91,140,255,.18)}
#loginform .login-remember label{font-weight:500;color:var(--muted)}
#loginform input[type="submit"]{width:100%;cursor:pointer;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border:none;padding:12px;border-radius:12px;font-weight:600;font-size:15px}

/* Nội dung bài viết / trang (the_content) */
.entry-content p{margin-bottom:14px}
.entry-content img{max-width:100%;height:auto;border-radius:10px}
.pd-pane h2,.pd-pane h3{margin:14px 0 8px}
.pd-pane ul,.pd-pane ol{margin:0 0 14px 20px;color:var(--txt-soft)}

/* Comments (đánh giá) */
.comment-list{list-style:none;margin:0;padding:0}
.comment-list li{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:16px;margin-bottom:12px}
.comment-list .fn{font-weight:700}
.comment-respond{margin-top:18px}
.comment-form input,.comment-form textarea{width:100%;background:var(--input-bg);border:1px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--txt);font-family:inherit;margin-bottom:12px}
.comment-form .submit{width:auto;cursor:pointer;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border:none;padding:11px 22px;border-radius:12px;font-weight:600}

/* Trang Liên hệ */
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:28px;align-items:start}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}

/* ============================================================
   WOOCOMMERCE — khoác giao diện theme
   ============================================================ */
.woocommerce-wrap a.button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce .button{
  background:linear-gradient(135deg,var(--brand),var(--brand-2))!important;color:#fff!important;border:none!important;
  border-radius:12px!important;padding:12px 20px!important;font-weight:600!important;font-size:14px!important;cursor:pointer;transition:.2s;line-height:1.2!important
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce .button:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(91,140,255,.4)}
.woocommerce .button.alt,.woocommerce #place_order{background:linear-gradient(135deg,var(--accent),var(--brand))!important}
.woocommerce span.price,.woocommerce div.product p.price,.woocommerce ul.products li.product .price{color:var(--txt)!important;font-weight:800}
.woocommerce div.product p.price del,.woocommerce span.price del{color:var(--muted)!important;font-weight:500}

/* Thông báo */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  background:var(--card)!important;border:1px solid var(--line)!important;border-left:4px solid var(--brand)!important;
  color:var(--txt)!important;border-radius:12px!important;padding:14px 18px!important
}
.woocommerce-error{border-left-color:var(--danger)!important}
.woocommerce-message{border-left-color:var(--accent)!important}

/* Form & input WooCommerce */
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce .select2-container,.woocommerce-page form .form-row input.input-text,.woocommerce table.cart td.actions .coupon .input-text,.woocommerce #customer_details input,.woocommerce #customer_details select,.woocommerce #customer_details textarea{
  background:var(--input-bg)!important;border:1px solid var(--line)!important;border-radius:10px!important;color:var(--txt)!important;padding:11px 13px!important
}
.woocommerce form .form-row label{color:var(--txt-soft);font-weight:600;font-size:13px}

/* Bảng (giỏ hàng, đơn hàng) */
.woocommerce table.shop_table{border:1px solid var(--line)!important;border-radius:var(--radius)!important;background:var(--card)!important;border-collapse:separate!important}
.woocommerce table.shop_table th{color:var(--muted)!important;font-size:13px;text-transform:uppercase;letter-spacing:.4px}
.woocommerce table.shop_table td{border-top:1px solid var(--line)!important;color:var(--txt-soft)!important}
.woocommerce .cart_totals h2,.woocommerce-checkout h3{color:var(--txt)}

/* Lưới sản phẩm WooCommerce mặc định (nếu dùng shortcode) */
.woocommerce ul.products li.product{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;transition:.25s}
.woocommerce ul.products li.product:hover{transform:translateY(-5px);border-color:rgba(91,140,255,.4)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:15px;font-weight:700;color:var(--txt)}

/* Trang Tài khoản WooCommerce (My Account) */
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--line)}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child{border-bottom:none}
.woocommerce-account .woocommerce-MyAccount-navigation li a{display:block;padding:13px 16px;font-weight:600;font-size:14px;color:var(--txt-soft)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}
.woocommerce-account .woocommerce-MyAccount-content{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
@media(min-width:768px){
  .woocommerce-account .woocommerce-MyAccount-navigation{width:25%}
  .woocommerce-account .woocommerce-MyAccount-content{width:72%}
}