:root{
  /* Tokens */
  --bg:#ffffff; --fg:#0f172a; --muted:#6b7280; --primary:#2563eb; --primary-600:#1d4ed8;
  --surface:#f8fafc; --border:#e5e7eb; --danger:#ef4444; --warning:#f59e0b; --success:#16a34a;
  --radius:12px; --shadow:0 6px 24px rgba(2,6,23,.06); --container:1180px; --gap:16px; --focus:0 0 0 3px rgba(37,99,235,.35);
  /* Controls & icons */
  --icon-size:18px; --icon-btn:32px; --ctrl-h:34px;
}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{
    --bg:#0b1220; --fg:#e5e7eb; --muted:#9aa3b2; --surface:#0e1628; --border:#1f2a44;
    --primary:#3b82f6; --primary-600:#2563eb; --shadow:0 6px 24px rgba(0,0,0,.35);
  }
}
html[data-theme="dark"]{
  --bg:#0b1220; --fg:#e5e7eb; --muted:#9aa3b2; --surface:#0e1628; --border:#1f2a44;
  --primary:#3b82f6; --primary-600:#2563eb; --shadow:0 6px 24px rgba(0,0,0,.35);
}

/* ===== Base ===== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  font-size: 16px;
  margin:0; font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:var(--bg); color:var(--fg); line-height:1.6; text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
a:hover{ color:var(--primary) }
.page-content a, .post-content a { color: #2563eb; }
.container{ max-width:var(--container); margin-inline:auto; padding:0 10px }
.muted{ color:var(--muted);font-size: 17px; }
.badge{ display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 12px; border-radius:999px; font-size:12px; background:var(--primary); color:#fff }
.cart{ position:relative }
.cart .badge{
  position:absolute; top:-2px; right:-2px; min-width:16px; height:16px; font-size:10px; padding:0 4px;
}
/* Accessibility */
.skip-link{ position:absolute; left:-9999px }
.skip-link:focus{ left:8px; top:8px; background:#fff; color:#000; padding:8px; border-radius:8px; z-index:999; box-shadow:var(--focus) }
a,button,[role="button"],input,select{ outline:none }
a:focus-visible, button:focus-visible, .btn:focus-visible, .input:focus-visible, select:focus-visible{ box-shadow:var(--focus); border-color:transparent }

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.70); backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--border)
}
html[data-theme="dark"] .site-header{ background:rgba(11,18,32,.55) }
.header-inner{ display:grid; gap:16px; align-items:center; padding:10px }

/* Brand / Nav */
.brand{ display:flex; align-items:center; gap:10px; font-weight:700 }
.brand img { width: 160px;}
.nav__toggle{ display:none; background:transparent; border:0; font-size:20px }
.nav__list{ display:flex; gap:16px; list-style:none; margin:0; padding:0; flex-wrap:nowrap }
.nav__list a{ white-space:nowrap; display:block; line-height:1; padding:8px 6px; font-weight:600; color:var(--muted); border-radius:8px }
.nav__list a.is-active, .nav__list a:hover{ color:var(--danger); background:var(--surface) }

/* Search (pill) */
.search{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; margin:0;
  background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:none;
}
.search__input{
  font-size: 14px;font-weight: 500;
  border:0 !important; background:transparent !important; height:var(--ctrl-h);
  line-height:var(--ctrl-h); padding:0 12px; min-width:0; outline:none; -webkit-appearance:none;
}
.btn{ height:38px; padding:0 14px; border-radius:10px; border:1px solid transparent; cursor:pointer; font-weight:600; display:inline-flex; align-items:center; gap:8px; justify-content:center; box-shadow:var(--shadow); background:var(--surface); color:var(--fg) }
.btn--primary{ background:var(--primary); color:#fff; border-radius:8px; box-shadow:none; padding:0 14px }
.btn--primary:hover{ background:var(--primary-600) }
.btn--secondary{ background:var(--surface); border-color:var(--border) }
.btn--ghost{ background:transparent; border:1px solid var(--border) }
.btn--sm{ height:var(--ctrl-h); }
.btn-xl{ height:44px; padding:0 16px }
.btn[disabled]{ opacity:.7; cursor:wait }

/* Actions (no pill) */
.header-actions{ display:flex; justify-content:flex-end }
.actions-group{ background:transparent !important; border:0 !important; padding:0 !important; gap:8px !important; display:flex; align-items:center }
.icon-btn{ width:var(--icon-btn); height:var(--icon-btn); border:0; background:transparent; border-radius:8px; display:grid; place-items:center; cursor:pointer }
.icon-btn:hover{ background:rgba(2,6,23,.05) }
html[data-theme="dark"] .icon-btn:hover{ background:rgba(255,255,255,.06) }
.icon{ width:var(--icon-size); height:var(--icon-size); stroke:currentColor; fill:none; stroke-width:2 }

/* Avatar dropdown (click-to-open) */
.avatar{ width:24px; height:24px; border-radius:999px; border:1px solid var(--border) }
.avatar-menu{ position:relative; display:flex; align-items:center; gap:8px }
.avatar-menu .dropdown{
  position:absolute; right:0; top:30px; background:var(--bg); border:1px solid var(--border);
  border-radius:12px; padding:8px; min-width:160px; box-shadow:var(--shadow); display:none
}
.avatar-menu .dropdown a, .avatar-menu .dropdown button{
  display:block; width:100%; text-align:left; padding:8px 10px; background:transparent; border:0; color:inherit; border-radius:8px
}
.avatar-menu .dropdown a:hover, .avatar-menu .dropdown button:hover{ background:var(--surface) }
.avatar-menu .avatar{ cursor:pointer }
.avatar-menu.is-open .dropdown{ display:block }

/* ===== Generic ===== */
.hero{ background:linear-gradient(180deg,var(--surface),transparent); padding:15px 0 }
.hero .lead{ font-size:18px; color:var(--muted) }
.content{ padding:15px 0 48px }
.card{ background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow) }
.card--hover:hover{ transform:translateY(-3px); transition:.2s ease; box-shadow:0 10px 30px rgba(2,6,23,.12) }
.grid{ display:grid; gap:16px }

.table{ width:100%; border-collapse:collapse; border:1px solid var(--border); border-radius:12px; overflow:hidden }
.table th,.table td{ padding:10px 12px; border-bottom:1px solid var(--border); text-align:left }
.table th{ background:var(--surface); color:var(--muted) }
.list-plain{ list-style:none; margin:0; padding:0 }
.list-plain li a{ display:block; padding:6px 0; color:inherit; font-size: 17px; }
.list-plain li a:hover{ color:var(--danger) }
.newsletter{ display:flex; flex-direction:column; gap:8px }
.newsletter input{ height:40px; border:1px solid var(--border); border-radius:10px; padding:0 12px; background:var(--bg); color:var(--fg) }

/* Chips / Stars */
.chip{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; background:var(--surface); border:1px solid var(--border); font-size:12px; color:var(--muted) }
.stars{ display:inline-flex; align-items:center; gap:4px }
.stars__num{ font-size:12px; color:var(--muted) }
.star{
  --s:14px; width:var(--s); height:var(--s); display:inline-block;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431L24 9.753l-6 5.847L19.335 24 12 19.897 4.665 24 6 15.6 0 9.753l8.332-1.735z"/></svg>') center/contain no-repeat;
  -webkit-mask:inherit; background:#e5e7eb;
}
.star.is-full{ background:linear-gradient(135deg,#f59e0b,#facc15) }
.star.is-half{ background:linear-gradient(90deg,#f59e0b 50%, #e5e7eb 50%) }

/* Blur-up */
.img-blur{ filter:blur(6px) saturate(1) contrast(1.02); transform:scale(1.02) }
.img-blur.is-loaded{ filter:none; transform:none; transition:filter .35s ease, transform .35s ease }

/* Product grid */
.grid--products{ display:grid; gap:16px; grid-template-columns:repeat(4,minmax(0,1fr)) }
@media (max-width:1200px){ .grid--products{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:860px){  .grid--products{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:480px){  .grid--products{ grid-template-columns:1fr } }

.mt-10{ margin-top:10px } .w-full{ width:100% }
.mb-10 {margin-bottom: 10px;}
.my-10{ margin:10px 0 }
.my-30{ margin:30px 0 }

/* Product card bits you kept */
.product__media{ position:relative; overflow:hidden; border-radius:14px }
.product__img{ width:100%; height:auto; display:block }
.product__hover{
  position:absolute; left:10px; right:10px; bottom:10px; display:flex; gap:8px;
  opacity:0; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease; pointer-events:none;
}
.product:hover .product__hover{ opacity:1; transform:none }
.product__hover .btn{ pointer-events:auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.product__actions{ display:flex; align-items:center; gap:12px; margin-top:10px; justify-content:flex-start }
.product__actions > *{ flex:1 1 0; min-width:0 }
.product__actions > form{ display:flex; width:100% }
.product__actions > form .btn{ width:100% }
.btn--block{ flex:1 1 auto; width:100% }
.btn--ghost{ flex:0 0 auto }
.badge--owned{ background:#2563eb; color:#fff }
.product__title{ margin:8px 0 6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }

/* Share buttons (1 bản duy nhất) */
.pd-share{ display:flex; align-items:center; gap:10px }
.share-btn{
  width:40px; height:40px; display:grid; place-items:center; border-radius:999px;
  border:1px solid var(--border,#e5e7eb); background:#fff; color:#334155; text-decoration:none;
  transition:transform .15s, box-shadow .15s, background .15s, color .15s; box-shadow:0 2px 10px rgba(2,6,23,.04);
}
.share-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(2,6,23,.10) }
.share-btn[href*="facebook.com"]:hover{ background:#1877F2; color:#fff; border-color:#1877F2 }
.share-btn[href*="twitter.com"]:hover{ background:#000; color:#fff; border-color:#000 }
.share-btn[title*="Sao chép"]:hover{ background:#16a34a; color:#fff; border-color:#16a34a }
.share-tip{ margin-left:4px; font-size:12px; color:#16a34a; background:#ecfdf5; border:1px solid #a7f3d0; padding:4px 8px; border-radius:8px }

/* ===== Layout breakpoints ===== */
/* Desktop (>=821px): brand | nav | search | actions */
@media (min-width:821px){
  .header-inner{
    grid-template-columns:auto 1fr minmax(240px,28vw) auto !important;
    grid-template-areas:"brand nav search actions";
  }
  .brand{ grid-area:brand } .nav{ grid-area:nav } #searchForm{ grid-area:search } .header-actions{ grid-area:actions }
  #navToggle, #searchToggle{ display:none !important }
  .nav__list{ display:flex !important }
  .icon-btn{ width:32px; height:32px }
  .search__input{ height:32px }
  .btn--sm, .btn--primary{ height:38px }
}
/* Mid desktop: thu gọn search */
@media (min-width:821px) and (max-width:1100px){
  .nav__list{ gap:12px }
  .nav__list a{ font-size:14px }
  #searchForm{ width:clamp(200px,22vw,320px) !important }
}
/* Mobile (<821px): hàng 1 = [☰] [Logo] [actions]; hàng 2 = search; menu overlay */
@media (max-width:820px){
  .header-inner{
    grid-template-columns:auto 1fr auto !important;
    grid-template-areas:
      "menu brand actions"
      "search search search";
    row-gap:8px;
  }
  .nav{ grid-area:menu } .brand{ grid-area:brand } .header-actions{ grid-area:actions } #searchForm{ grid-area:search }
  .nav__toggle{ display:inline-flex; width:40px; height:40px; padding:0 }
  #searchForm{ display:none } #searchForm.is-open{ display:flex }
  .nav__list{ display:none }
  .nav__list.is-open{
    display:flex; position:fixed; left:12px; right:12px; top:64px;
    flex-direction:column; gap:6px; background:var(--bg);
    border:1px solid var(--border); border-radius:12px; padding:10px; box-shadow:var(--shadow); z-index:60;
  }
}

.title_home {font-size: 20px;margin:0 0 10px;}
.tc-pagination{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px}
.tc-pagination__meta{color:var(--muted,#6b7280); font-size:.95rem}
.tc-pagination__nav{display:flex; align-items:center; gap:6px}

.tc-page{
  --h: 40px;
  min-width: var(--h);
  height: var(--h);
  padding: 0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border,#e5e7eb);
  border-radius: 10px;
  background: #fff;
  color: var(--fg,#0f172a);
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(2,6,23,.04);
  transition: .15s ease;
}
.tc-page:hover{ border-color: var(--primary,#2563eb); color: var(--primary,#2563eb); transform: translateY(-1px); }
.tc-page.is-active{
  background: var(--primary,#2563eb);
  border-color: var(--primary,#2563eb);
  color: #fff;
  box-shadow: 0 6px 18px rgba(37,99,235,.25);
  pointer-events: none;
}
.tc-page--icon{ padding:0; width: var(--h); }
.tc-page--gap{
  border: 1px dashed var(--border,#e5e7eb);
  background: transparent; font-weight: 700; color: var(--muted,#6b7280);
  pointer-events: none;
}
.tc-page.is-disabled{ opacity:.45; pointer-events:none; }

/* .page-content ul, .product-detail ul, .post-content ul {
  list-style: none;
  padding-left: 0;
} */
/* .page-content ul li, .product-detail ul li, .post-content ul li {
  background: #f8fafc;
  padding: 5px 16px;
  border-radius: 5px;
  margin-bottom: 8px;
  position: relative;
  padding-left: 40px;
} */
/* .page-content ul li::before, .product-detail ul li::before, .post-content ul li::before {
  content: "✓";
  position: absolute;
  left: 15px;
  color: #16a34a;
  font-weight: bold;
} */

/* ===== LIST BASE ===== */
.page-content ul,
.page-content ol,
.product-detail ul,
.product-detail ol,
.post-content ul,
.post-content ol {
  padding-left: 1.6em;
  margin: 8px 0;
}

/* ===== LIST ITEM ===== */
.page-content li,
.product-detail li,
.post-content li {
  margin: 4px 0;
  line-height: 1.6;
}

/* 🔥 FIX LỆCH DO <p> TRONG <li> */
.page-content li > p,
.product-detail li > p,
.post-content li > p {
  margin: 0;
  display: inline;
}

/* ===== MARKER (bullet / number) ===== */
.page-content li::marker,
.product-detail li::marker,
.post-content li::marker {
  color: #666;
  font-weight: 500;
}

/* ===== UL STYLE ===== */
.page-content ul,
.product-detail ul,
.post-content ul {
  list-style-type: disc;
}

/* ===== OL STYLE ===== */
.page-content ol,
.product-detail ol,
.post-content ol {
  list-style-type: decimal;
}

/* ===== OPTIONAL: đẹp hơn (giống Medium) ===== */
.page-content ol li::marker,
.product-detail ol li::marker,
.post-content ol li::marker {
  font-weight: 600;
  color: #999;
}

.page-content ul li::marker,
.product-detail ul li::marker,
.post-content ul li::marker {
  color: #999;
}

/* ===== Hero ===== */
.page-hero{
  padding: 60px 20px 60px;
  border-bottom: 1px solid #e5e7eb;
  background: radial-gradient(circle at 20% 30%, #6366f120, transparent 50%),
  linear-gradient(135deg, #f8fafc, #eef2ff);
}

.hero-title{
  font-size: 35px;
  font-weight: 800;
  margin: 0;
  color: #111827;
}

.hero-sub{
  font-size: 16px;
  color: #6b7280;
}

/* ===== Content ===== */
.page-body{
  padding: 15px 0px;
}

.page-content{
  line-height: 1.8;
  font-size: 16px;
  color: #374151;
}

.page-content p {
    margin: 0;
}
.page-content h2 {
    font-size: 24px;
    margin: 20px 0 10px;
    color: #111827;
}
.page-content h3 {
    font-size: 20px;
    margin: 18px 0 8px;
    color: #111827;
}

@media (max-width: 640px){
  .tc-pagination{ flex-direction:column; align-items:flex-start; gap:10px }
  .tc-pagination__nav{ gap:4px }
  .tc-page{ --h:36px; padding:0 10px }
}

/* ==============================
   CODE BLOCK <pre>
   ============================== */

pre {
    margin: 20px 0;
    padding: 16px 20px;

    background: #f6f8fa;
    border-radius: 10px;

    overflow-x: auto;

    font-size: 15px;
    line-height: 1.7;

    color: #24292f;

    white-space: pre;
    tab-size: 4;
}

/* Code bên trong pre */
pre code {
    padding: 0;
    background: transparent;
    border: none;

    font-family: inherit;
    font-size: inherit;
    color: inherit;
}


/* ==============================
   BLOCKQUOTE
   ============================== */

blockquote {
    margin: 20px 0;
    padding: 14px 20px;

    background: #f8fafc;

    border-left: 4px solid #3b82f6;
    border-radius: 0 8px 8px 0;

    color: #475569;

    font-size: 16px;
    line-height: 1.7;

    font-style: italic;
}

/* Không để margin của p làm blockquote quá cao */
blockquote p {
    margin: 0;
}


/* ==============================
   MOBILE
   ============================== */

@media (max-width: 768px) {

    pre {
        padding: 14px;
        font-size: 14px;
        border-radius: 8px;
    }

    blockquote {
        padding: 12px 16px;
        font-size: 15px;
    }
}