/* ==========================================================================
   laptop.info.vn — Design System
   Prototype tĩnh (HTML/CSS/JS). Chưa lồng PHP.

   Kế thừa kiến trúc của lamdep.info.vn: cùng cấu trúc token --c-*, cùng tên
   component chung (.card, .badge, .callout, .panel, .prose, .toc, .chip…) để
   khi lồng PHP các view dùng lại được. Khác ở ba điểm:
     1. Bảng màu — xanh thép / indigo kỹ thuật, thay cho hồng đất
     2. Component riêng của site này:
        .laptop-card, .spec-table, .spec-grid, .bar-meter, .port-list,
        .verdict-box, .compare-table (có tô sáng ô thắng), .gen-timeline
     3. Không có .rating sao — site là nơi TRA THÔNG SỐ, không phải nơi
        chấm điểm. Chỗ nào cần "đánh giá" thì dùng .bar-meter (điểm hiệu năng
        có nguồn) để người đọc thấy con số thật.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Màu thương hiệu: xanh thép ngả indigo — tông "kỹ thuật" nhưng không lạnh
     gắt như xanh dương thuần. Chọn hướng trầm vì site là nơi ĐỌC BẢNG SỐ:
     màu bão hoà cao làm bảng thông số dài gây mỏi mắt. */
  --c-brand-50:  #f1f5fb;
  --c-brand-100: #e0e9f6;
  --c-brand-200: #c2d3ec;
  --c-brand-300: #93aeda;
  --c-brand-500: #4f72b5;
  --c-brand-600: #3a5795;
  --c-brand-700: #2d4477;
  --c-brand-900: #1a2744;

  /* Màu nhấn phụ — hổ phách kỹ thuật, dùng cho nhãn "đã đo kiểm", ô thắng
     trong bảng so sánh. Tách riêng khỏi --c-warn để hai ngữ nghĩa không lẫn. */
  --c-accent:    #b06d12;
  --c-accent-bg: #fdf4e6;

  /* Trung tính — ngả xanh lạnh nhẹ cho khớp tông thương hiệu */
  --c-ink:      #171c26;
  --c-body:     #414956;
  --c-muted:    #6d7684;
  --c-line:     #e2e6ec;
  --c-line-2:   #eef1f5;
  --c-bg:       #ffffff;
  --c-bg-soft:  #f7f9fb;

  /* Ngữ nghĩa — dùng cho nhãn phân khúc, mức hiệu năng, cảnh báo thông số */
  --c-ok:       #1f7a4d;
  --c-ok-bg:    #e7f4ed;
  --c-low:      #2b6cb0;
  --c-low-bg:   #eaf2fa;
  --c-warn:     #a06400;
  --c-warn-bg:  #fdf3e0;
  --c-high:     #c2410c;
  --c-high-bg:  #fdefe8;
  --c-danger:   #b31f2b;
  --c-danger-bg:#fdecec;

  /* Typography — Inter cho UI và bảng số, JetBrains Mono cho mã máy / thông số
     dạng số. Site này cần font đẳng chiều cho cột số: "i5-13500H" và
     "i7-13700HX" phải thẳng cột mới so sánh được bằng mắt. */
  --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
            "Liberation Mono", monospace;

  --fs-xs: .8125rem;   /* 13 */
  --fs-sm: .875rem;    /* 14 */
  --fs-base: 1rem;     /* 16 */
  --fs-md: 1.0625rem;  /* 17 — body bài viết */
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 2.875rem;

  /* Spacing / layout */
  --sp: 8px;
  --w-max: 1200px;
  --w-prose: 720px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;

  --sh-1: 0 1px 2px rgba(23,28,38,.06), 0 1px 3px rgba(23,28,38,.04);
  --sh-2: 0 4px 12px rgba(23,28,38,.07), 0 2px 4px rgba(23,28,38,.04);
  --sh-3: 0 12px 32px rgba(23,28,38,.10);

  --header-h: 68px;
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--c-body);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  /* Lưới an toàn: nếu một phần tử nào đó vẫn tràn, trang không cuộn ngang
     được — lỗi hiện ra ngay chỗ tràn thay vì làm lệch toàn bộ bố cục.
     KHÔNG dùng overflow-x: hidden vì nó vô hiệu hoá position: sticky. */
  max-width: 100vw;
}

h1, h2, h3, h4, h5 {
  margin: 0 0 .5em;
  color: var(--c-ink);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.011em;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }

p { margin: 0 0 1em; }

a { color: var(--c-brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

hr { border: 0; border-top: 1px solid var(--c-line); margin: 2.5rem 0; }

button, input, select, textarea { font: inherit; color: inherit; }

table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--c-brand-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden,
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--c-brand-600); color: #fff; padding: 10px 16px;
  border-radius: var(--r-sm); transition: top .15s;
}
.skip-link:focus { top: 8px; }

/* ---------- 3. Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--w-max);
  margin-inline: auto;
  padding-inline: 20px;
}
.container--narrow { max-width: 860px; }

.section { padding-block: clamp(40px, 6vw, 72px); }
.section--soft { background: var(--c-bg-soft); }
.section--tight { padding-block: clamp(28px, 4vw, 44px); }

.stack > * + * { margin-top: 1rem; }

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.section-head { max-width: 680px; margin-bottom: 28px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--c-muted); margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--c-brand-600);
  margin-bottom: 8px;
}

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  background: none;
  transition: background-color .15s, border-color .15s, color .15s, transform .05s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn--primary { background: var(--c-brand-600); color: #fff; }
.btn--primary:hover { background: var(--c-brand-700); color: #fff; }

.btn--ghost { border-color: var(--c-line); color: var(--c-ink); background: #fff; }
.btn--ghost:hover { border-color: var(--c-brand-300); background: var(--c-brand-50); }

.btn--quiet { color: var(--c-brand-600); padding-inline: 4px; }
.btn--quiet:hover { text-decoration: underline; }

.btn--danger { border-color: #f0c9c9; color: var(--c-danger); background: #fff; }
.btn--danger:hover { background: var(--c-danger-bg); }

.btn--lg { padding: 14px 26px; font-size: var(--fs-base); }
.btn--sm { padding: 7px 12px; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

/* ---------- 5. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: 28px;
}

/* ---------- Logo ---------- */
.logo {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none;
  /* Cho phép co lại khi khung hẹp. Để flex-shrink: 0 thì logo giữ nguyên bề
     rộng và đẩy nút mở menu ra khỏi màn hình — người dùng mất lối vào menu. */
  min-width: 0;
}
.logo:hover { text-decoration: none; }

.logo__mark {
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(145deg, var(--c-brand-500), var(--c-brand-700));
  color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: var(--sh-1);
}
.logo__mark svg { width: 21px; height: 21px; }

.logo__text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.logo__name {
  font-weight: 700; font-size: 1.0625rem; color: var(--c-ink);
  letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.logo__name em { font-style: normal; color: var(--c-brand-600); }
.logo__tld {
  font-size: .6875rem; color: var(--c-muted); letter-spacing: .04em;
  font-family: var(--f-mono);
}

/* ---------- Menu chính ---------- */
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }

.nav-link {
  display: inline-flex; align-items: center;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--c-body);
  white-space: nowrap;
}
.nav-link:hover { background: var(--c-brand-50); color: var(--c-brand-700); text-decoration: none; }
.nav-link[aria-current="page"] { color: var(--c-brand-700); font-weight: 600; }

.nav-item { position: relative; display: flex; align-items: center; }

.nav-caret {
  display: inline-grid; place-items: center;
  width: 22px; height: 28px;
  border: 0; background: none; cursor: pointer;
  color: var(--c-muted); border-radius: 6px;
  margin-left: -6px;
}
.nav-caret svg { width: 14px; height: 14px; transition: transform .18s; }
.nav-caret:hover { color: var(--c-brand-600); background: var(--c-brand-50); }
.nav-item[data-open="true"] .nav-caret svg { transform: rotate(180deg); }

.nav-sub {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 232px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  padding: 7px;
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  transition: opacity .15s, transform .15s, visibility .15s;
  z-index: 110;
}
.nav-item:hover .nav-sub,
.nav-item[data-open="true"] .nav-sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-sub__inner { display: flex; flex-direction: column; }
.nav-sub a {
  padding: 8px 12px; border-radius: 6px;
  font-size: var(--fs-sm); color: var(--c-body);
}
.nav-sub a:hover { background: var(--c-brand-50); color: var(--c-brand-700); text-decoration: none; }

.header-actions { display: flex; align-items: center; gap: 10px; }

.search-toggle {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
  background: #fff; cursor: pointer; color: var(--c-body);
}
.search-toggle svg { width: 18px; height: 18px; }
.search-toggle:hover { border-color: var(--c-brand-300); color: var(--c-brand-600); }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
  background: #fff; cursor: pointer;
  position: relative;
  margin-left: auto;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 18px; height: 2px; border-radius: 2px;
  background: var(--c-ink);
  content: ''; transition: transform .2s, opacity .2s;
}
.nav-toggle span { top: 50%; margin-top: -1px; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateX(-50%) translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

@media (max-width: 1040px) {
  .nav-toggle { display: block; }
  .header-inner { gap: 14px; }
  .header-actions .btn { display: none; }

  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--c-line);
    box-shadow: var(--sh-2);
    padding: 10px 20px 18px;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    margin-left: 0;
    display: none;
  }
  .nav[data-open="true"] { display: flex; }

  .nav-item { flex-direction: column; align-items: stretch; }
  .nav-item > .nav-link { flex: 1; }
  .nav-item--has-sub {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .nav-caret { width: 40px; height: 40px; margin: 0; }

  .nav-link { padding: 12px 10px; font-size: var(--fs-base); }

  /* Menu con trên mobile nằm trong dòng chảy, không nổi lên trên: menu nổi
     trên màn hình hẹp sẽ tràn khỏi viewport và không cuộn tới được. */
  .nav-sub {
    position: static; grid-column: 1 / -1;
    opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding: 0 0 6px 12px;
    min-width: 0;
    display: none;
  }
  .nav-item[data-open="true"] .nav-sub { display: block; }
  .nav-item:hover .nav-sub { display: none; }
  .nav-item[data-open="true"]:hover .nav-sub { display: block; }
  .nav-sub a { padding: 9px 10px; }
}

/* ---------- 5b. Tìm kiếm trên header ---------- */
.search-panel {
  position: fixed; top: var(--header-h); left: 0; right: 0;
  z-index: 120;
  background: #fff;
  border-bottom: 1px solid var(--c-line);
  box-shadow: var(--sh-3);
  padding: 20px 0 16px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.search-panel[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }

.search-backdrop {
  position: fixed; inset: 0; z-index: 115;
  background: rgba(23,28,38,.34);
  opacity: 0; visibility: hidden;
  transition: opacity .16s, visibility .16s;
}
.search-backdrop[data-open="true"] { opacity: 1; visibility: visible; }

.search-field {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 0 12px;
  background: var(--c-bg-soft);
}
.search-field:focus-within { border-color: var(--c-brand-300); background: #fff; }
.search-field__icon { width: 19px; height: 19px; color: var(--c-muted); flex-shrink: 0; }
.search-field input {
  flex: 1; min-width: 0;
  border: 0; background: none; outline: none;
  padding: 13px 0; font-size: var(--fs-md);
}
.search-field__clear {
  border: 0; background: none; cursor: pointer; padding: 4px;
  color: var(--c-muted); border-radius: 6px;
  display: none;
}
.search-field__clear[data-visible="true"] { display: grid; place-items: center; }
.search-field__clear svg { width: 17px; height: 17px; }
.search-field__clear:hover { color: var(--c-ink); background: var(--c-line-2); }

.search-hints { margin-top: 14px; }
.search-hints__label {
  font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px;
}
.search-hints__list { display: flex; flex-wrap: wrap; gap: 8px; }
.search-hints__list a {
  display: inline-flex; align-items: center;
  padding: 6px 13px;
  border: 1px solid var(--c-line); border-radius: var(--r-full);
  font-size: var(--fs-sm); color: var(--c-body); background: #fff;
}
.search-hints__list a:hover {
  border-color: var(--c-brand-300); background: var(--c-brand-50);
  color: var(--c-brand-700); text-decoration: none;
}

.search-results { margin-top: 14px; max-height: 50vh; overflow-y: auto; }
.search-results__count {
  font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: 8px;
}

.search-result {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-sm);
  color: var(--c-body);
}
.search-result:hover,
.search-result.is-active { background: var(--c-brand-50); text-decoration: none; }

.search-result__icon {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--c-brand-50); color: var(--c-brand-600);
  display: grid; place-items: center; flex-shrink: 0;
}
.search-result__icon svg { width: 17px; height: 17px; }
.search-result__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.search-result__title {
  font-weight: 600; color: var(--c-ink); font-size: var(--fs-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result__title mark {
  background: var(--c-accent-bg); color: var(--c-accent);
  padding: 0 1px; border-radius: 3px;
}
.search-result__desc {
  font-size: var(--fs-xs); color: var(--c-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result__tag {
  font-size: .6875rem; font-weight: 600; color: var(--c-muted);
  border: 1px solid var(--c-line); border-radius: var(--r-full);
  padding: 2px 9px; flex-shrink: 0;
}

.search-empty { text-align: center; padding: 26px 16px; color: var(--c-muted); }
.search-empty svg { width: 30px; height: 30px; margin: 0 auto 10px; opacity: .5; }
.search-empty p { margin: 0; }
.search-empty__hint { font-size: var(--fs-sm); margin-top: 5px; }

.search-foot {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--c-line-2);
  font-size: var(--fs-xs); color: var(--c-muted);
}
kbd {
  font-family: var(--f-mono); font-size: .6875rem;
  border: 1px solid var(--c-line); border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 5px; background: #fff;
  color: var(--c-body);
}
@media (max-width: 640px) {
  .search-foot { display: none; }
}

/* ---------- 6. Hero ---------- */
.hero {
  padding-block: clamp(36px, 6vw, 68px);
  background:
    radial-gradient(900px 400px at 88% -10%, var(--c-brand-50), transparent 70%),
    linear-gradient(180deg, #fff, var(--c-bg-soft));
  border-bottom: 1px solid var(--c-line);
}
.hero__grid {
  display: grid; grid-template-columns: 1.08fr .92fr; gap: 44px; align-items: center;
}
.hero h1 {
  font-size: clamp(1.875rem, 4vw, var(--fs-4xl));
  letter-spacing: -.025em;
  margin-bottom: .45em;
}
.hero__lead { font-size: var(--fs-md); color: var(--c-body); max-width: 56ch; }

.hero__search {
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 0 14px;
  box-shadow: var(--sh-1);
  margin: 22px 0 16px;
  max-width: 520px;
}
.hero__search:focus-within { border-color: var(--c-brand-300); box-shadow: var(--sh-2); }
.hero__search svg { width: 19px; height: 19px; color: var(--c-muted); flex-shrink: 0; }
.hero__search input {
  flex: 1; min-width: 0; border: 0; outline: none; background: none;
  padding: 14px 0; font-size: var(--fs-base);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 11px; }

.hero__note {
  display: flex; align-items: center; gap: 7px;
  margin: 18px 0 0;
  font-size: var(--fs-sm); color: var(--c-muted);
}
.hero__note svg { width: 17px; height: 17px; color: var(--c-ok); flex-shrink: 0; }

/* Mockup minh hoạ bảng thông số — cho người dùng thấy ngay "trang chi tiết
   trông thế nào" trước khi bấm vào. */
.hero__preview {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: 20px;
}
.preview__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--c-line-2);
}
.preview__title { font-weight: 700; color: var(--c-ink); font-size: var(--fs-md); }
.preview__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--c-line-2);
  font-size: var(--fs-sm);
}
.preview__row:last-child { border-bottom: 0; }
.preview__row dt { color: var(--c-muted); flex-shrink: 0; }
.preview__row dd {
  margin: 0; text-align: right; font-weight: 600; color: var(--c-ink);
  font-family: var(--f-mono); font-size: var(--fs-xs);
}

@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; gap: 30px; }
  .hero__preview { order: -1; }
}

/* ---------- 7. Cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 22px;
  display: flex; flex-direction: column;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.card--link:hover {
  border-color: var(--c-brand-200);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}
.card h3 { margin-bottom: .4em; }
.card p { color: var(--c-muted); font-size: var(--fs-sm); margin-bottom: 0; }
.card__icon {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--c-brand-50); color: var(--c-brand-600);
  display: grid; place-items: center;
  margin-bottom: 14px;
}
.card__icon svg { width: 21px; height: 21px; }
.card__foot { margin-top: auto; padding-top: 16px; }

.mini-card {
  display: flex; align-items: center; gap: 13px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 15px 17px;
  color: var(--c-body);
  transition: border-color .15s, box-shadow .15s;
}
.mini-card:hover {
  border-color: var(--c-brand-200); box-shadow: var(--sh-1); text-decoration: none;
}
.mini-card__icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--c-brand-50); color: var(--c-brand-600);
  display: grid; place-items: center; flex-shrink: 0;
}
.mini-card__icon svg { width: 19px; height: 19px; }
.mini-card h3 { font-size: var(--fs-base); margin: 0 0 1px; }
.mini-card p { margin: 0; font-size: var(--fs-xs); color: var(--c-muted); }

/* ---------- 8. Badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600;
  white-space: nowrap;
}
.badge--ok     { background: var(--c-ok-bg);     color: var(--c-ok); }
.badge--low    { background: var(--c-low-bg);    color: var(--c-low); }
.badge--warn   { background: var(--c-warn-bg);   color: var(--c-warn); }
.badge--high   { background: var(--c-high-bg);   color: var(--c-high); }
.badge--danger { background: var(--c-danger-bg); color: var(--c-danger); }
.badge--accent { background: var(--c-accent-bg); color: var(--c-accent); }
.badge--plain  { background: var(--c-line-2);    color: var(--c-body); }
.badge--brand  { background: var(--c-brand-50);  color: var(--c-brand-700); }

/* ---------- 9. Trust bar / minh bạch ---------- */
.trust-bar {
  background: var(--c-brand-900);
  color: #dbe4f2;
  padding: 11px 0;
  font-size: var(--fs-sm);
}
.trust-bar__inner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: center; text-align: center;
}
.trust-bar svg { width: 17px; height: 17px; color: #9fd3b4; flex-shrink: 0; }
.trust-bar a { color: #fff; font-weight: 600; text-decoration: underline; }

/* ---------- 10. Callout ---------- */
.callout {
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-brand-500);
  border-radius: var(--r-sm);
  background: var(--c-bg-soft);
  padding: 16px 18px;
  margin-block: 1.5rem;
}
.callout__title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--c-ink);
  margin-bottom: 6px;
}
.callout__title svg { width: 18px; height: 18px; flex-shrink: 0; }
.callout p:last-child { margin-bottom: 0; }
.callout p { font-size: var(--fs-sm); }

.callout--info   { border-left-color: var(--c-low);    background: var(--c-low-bg); }
.callout--info .callout__title { color: var(--c-low); }
.callout--warn   { border-left-color: var(--c-warn);   background: var(--c-warn-bg); }
.callout--warn .callout__title { color: var(--c-warn); }
.callout--danger { border-left-color: var(--c-danger); background: var(--c-danger-bg); }
.callout--danger .callout__title { color: var(--c-danger); }
.callout--ok     { border-left-color: var(--c-ok);     background: var(--c-ok-bg); }
.callout--ok .callout__title { color: var(--c-ok); }

/* ---------- 11. Footer ---------- */
.site-footer {
  background: var(--c-brand-900);
  color: #b9c6db;
  padding-block: 48px 28px;
  margin-top: 0;
  font-size: var(--fs-sm);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .footer-grid { grid-template-columns: 1fr; gap: 24px; } }

.footer-brand p { margin: 12px 0 0; max-width: 34ch; color: #96a6c0; }
.footer-brand .logo__name { color: #fff; }
.footer-brand .logo__name em { color: var(--c-brand-200); }
.footer-brand .logo__tld { color: #8294b0; }

.footer-col h3 {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em;
  color: #fff; margin-bottom: 12px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 7px; }
.footer-col a { color: #b9c6db; }
.footer-col a:hover { color: #fff; }

.footer-legal { padding-top: 22px; color: #8294b0; font-size: var(--fs-xs); }
.footer-legal p { margin-bottom: 9px; }
.footer-legal strong { color: #b9c6db; }
.footer-legal a { color: var(--c-brand-200); }

/* ---------- 12. Breadcrumb ---------- */
.breadcrumb { padding-block: 14px; font-size: var(--fs-xs); color: var(--c-muted); }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.breadcrumb li + li::before { content: '/'; margin-right: 7px; color: var(--c-line); }
.breadcrumb a { color: var(--c-muted); }
.breadcrumb a:hover { color: var(--c-brand-600); }
.breadcrumb [aria-current="page"] { color: var(--c-body); font-weight: 500; }

/* ---------- 13. Page header ---------- */
.page-head { padding-block: 10px 26px; max-width: 760px; }
.page-head__lead { font-size: var(--fs-md); color: var(--c-muted); margin-bottom: 0; }

/* ---------- 14. Forms ---------- */
.field { margin-bottom: 18px; }
.field__label {
  display: block; font-size: var(--fs-sm); font-weight: 600;
  color: var(--c-ink); margin-bottom: 6px;
}
.field__hint { font-size: var(--fs-xs); color: var(--c-muted); margin: 6px 0 0; }

.input, .select, textarea.input {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: #fff;
  font-size: var(--fs-sm);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, textarea.input:focus {
  border-color: var(--c-brand-300);
  box-shadow: 0 0 0 3px var(--c-brand-50);
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d7684' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px;
  padding-right: 34px;
}
input[type="range"] { padding: 0; accent-color: var(--c-brand-600); }

.field-row { display: grid; gap: 14px; }
.field-row--2 { grid-template-columns: 1fr 1fr; }
.field-row--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) {
  .field-row--2, .field-row--3 { grid-template-columns: 1fr; }
}

.check-list { display: flex; flex-direction: column; gap: 2px; }
.check {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; border-radius: 6px;
  font-size: var(--fs-sm); cursor: pointer;
}
.check:hover { background: var(--c-brand-50); }
.check input { accent-color: var(--c-brand-600); width: 16px; height: 16px; flex-shrink: 0; }
.check span:nth-of-type(1) { flex: 1; min-width: 0; }
.check__count {
  font-size: var(--fs-xs); color: var(--c-muted);
  font-family: var(--f-mono); flex-shrink: 0;
}

.segmented {
  display: inline-flex;
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
  background: var(--c-bg-soft); padding: 2px;
}
.segmented button {
  border: 0; background: none; cursor: pointer;
  padding: 6px 13px; border-radius: 6px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted);
  white-space: nowrap;
}
.segmented button[aria-pressed="true"] {
  background: #fff; color: var(--c-brand-700); box-shadow: var(--sh-1);
}

/* ---------- 15. Panel & bố cục có sidebar ---------- */
.panel {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 18px;
}
.panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--c-line-2);
}
.panel__head h2 { font-size: var(--fs-md); margin: 0; }
.panel__meta { font-size: var(--fs-xs); color: var(--c-muted); }
.panel--sticky { position: sticky; top: calc(var(--header-h) + 16px); }

.browse-layout {
  display: grid;
  grid-template-columns: 278px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding-bottom: 56px;
}
/* Xem ghi chú ở .article-layout — cùng lý do. */
.browse-layout > * { min-width: 0; }
@media (max-width: 1000px) {
  .browse-layout { grid-template-columns: 1fr; }
  .browse-filters {
    display: none;
    order: -1;
  }
  .browse-filters[data-open="true"] { display: block; }
  .panel--sticky { position: static; }
}

.browse-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.browse-bar__count { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }
.browse-bar__count strong { color: var(--c-ink); }
.filter-toggle { display: none; }
@media (max-width: 1000px) { .filter-toggle { display: inline-flex; } }

/* ---------- 16. Table ---------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: #fff;
}
.table-wrap table { margin: 0; }

th, td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--c-line-2);
  font-size: var(--fs-sm);
  vertical-align: top;
}
thead th {
  background: var(--c-bg-soft);
  font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-muted); font-weight: 700;
  white-space: nowrap;
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody th { font-weight: 600; color: var(--c-ink); }

.empty-state {
  text-align: center; padding: 40px 20px; color: var(--c-muted);
  border: 1px dashed var(--c-line); border-radius: var(--r-md);
  background: var(--c-bg-soft);
}
.empty-state svg { width: 32px; height: 32px; margin: 0 auto 10px; opacity: .45; }
.empty-state p { margin: 0; }

/* ==========================================================================
   17. COMPONENT RIÊNG CỦA SITE NÀY
   ========================================================================== */

/* ---------- 17a. Thẻ máy (laptop) ---------- */
.laptop-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.laptop-card:hover {
  border-color: var(--c-brand-200); box-shadow: var(--sh-2); transform: translateY(-2px);
}
.laptop-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--c-bg-soft);
  border-bottom: 1px solid var(--c-line-2);
}
.laptop-card__flag {
  position: absolute; top: 9px; left: 9px;
  background: rgba(255,255,255,.95);
  color: var(--c-accent);
  font-size: .6875rem; font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-full);
  box-shadow: var(--sh-1);
}
.laptop-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.laptop-card__brand {
  font-size: var(--fs-xs); color: var(--c-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  margin: 0 0 3px;
}
.laptop-card__name { font-size: var(--fs-base); margin: 0 0 4px; line-height: 1.35; }
.laptop-card__name a { color: var(--c-ink); }
.laptop-card__name a:hover { color: var(--c-brand-600); text-decoration: none; }

/* Dòng thông số gọn — ba thứ người mua laptop luôn hỏi đầu tiên:
   CPU, RAM, màn hình. Dùng font mono để các thẻ trong lưới thẳng cột. */
.laptop-card__specs {
  list-style: none; padding: 0;
  margin: 8px 0 0;
  font-size: var(--fs-xs); color: var(--c-body);
  display: flex; flex-direction: column; gap: 3px;
}
.laptop-card__specs li { display: flex; gap: 7px; align-items: baseline; }
.laptop-card__specs svg { width: 13px; height: 13px; color: var(--c-muted); flex-shrink: 0; margin-top: 3px; }
.laptop-card__specs span { font-family: var(--f-mono); font-size: .75rem; }

.laptop-card__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }

.laptop-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  margin-top: auto; padding-top: 13px;
}
.laptop-card__price { font-weight: 700; color: var(--c-ink); font-size: var(--fs-sm); }
.laptop-card__price span { font-weight: 400; color: var(--c-muted); font-size: var(--fs-xs); }

/* Nút thêm vào khay so sánh — nằm trên thẻ để thêm được mà không cần mở trang */
.laptop-card__cmp {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--c-line); background: #fff;
  border-radius: var(--r-sm); cursor: pointer;
  padding: 5px 10px;
  font-size: .6875rem; font-weight: 600; color: var(--c-body);
}
.laptop-card__cmp svg { width: 13px; height: 13px; }
.laptop-card__cmp:hover { border-color: var(--c-brand-300); color: var(--c-brand-700); background: var(--c-brand-50); }
.laptop-card__cmp[aria-pressed="true"] {
  background: var(--c-brand-600); border-color: var(--c-brand-600); color: #fff;
}

/* ---------- 17b. Nhãn phân khúc / nhu cầu sử dụng ---------- */
.use-tag {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: var(--r-full);
  font-size: .6875rem; font-weight: 600;
  background: var(--c-line-2); color: var(--c-body);
  white-space: nowrap;
}
.use-tag--gaming  { background: #f3e8ff; color: #6b21a8; }
.use-tag--office  { background: var(--c-low-bg);  color: var(--c-low); }
.use-tag--do-hoa  { background: var(--c-accent-bg); color: var(--c-accent); }
.use-tag--mong    { background: var(--c-ok-bg);   color: var(--c-ok); }
.use-tag--sinhvien{ background: #e8f3f1; color: #0f766e; }

/* ---------- 17c. Hộp thông số (cột phải trang chi tiết) ---------- */
.spec-box {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.spec-box h2 {
  font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-muted);
  margin: 0;
  padding: 13px 16px 10px;
  border-bottom: 1px solid var(--c-line-2);
}
.spec-box h2 + .spec-list { padding-top: 4px; }

.spec-list { margin: 0; padding: 0 16px; }
.spec-list > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--c-line-2);
  font-size: var(--fs-sm);
}
.spec-list > div:last-child { border-bottom: 0; padding-bottom: 14px; }
.spec-list dt { color: var(--c-muted); flex-shrink: 0; }
.spec-list dd {
  margin: 0; text-align: right; font-weight: 600; color: var(--c-ink);
  font-family: var(--f-mono); font-size: var(--fs-xs); line-height: 1.5;
}

/* ---------- 17d. Bảng thông số đầy đủ (thân trang chi tiết) ----------
   Đây là component trung tâm của site: thay cho .inci-list của lamdep.
   Nhóm theo cụm (Vi xử lý / Màn hình / Cổng kết nối…) vì bảng thông số
   laptop dài 40+ dòng — không nhóm thì không ai đọc hết. */
.spec-table { margin-block: 1.25rem; }
.spec-table__group {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 12px;
  background: #fff;
}
.spec-table__head {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 12px 16px;
  background: var(--c-bg-soft);
  border: 0; border-bottom: 1px solid var(--c-line-2);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 700;
  color: var(--c-ink); text-align: left; cursor: pointer;
}
.spec-table__head svg.ico { width: 17px; height: 17px; color: var(--c-brand-600); flex-shrink: 0; }
.spec-table__head .caret {
  width: 15px; height: 15px; margin-left: auto; color: var(--c-muted);
  transition: transform .18s; flex-shrink: 0;
}
.spec-table__group[data-open="false"] .caret { transform: rotate(-90deg); }
.spec-table__group[data-open="false"] .spec-table__body { display: none; }

.spec-table__body { margin: 0; padding: 4px 16px 10px; }
.spec-table__body > div {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-line-2);
  font-size: var(--fs-sm);
}
.spec-table__body > div:last-child { border-bottom: 0; }
.spec-table__body dt { color: var(--c-muted); }
.spec-table__body dd { margin: 0; color: var(--c-ink); }
/* Giá trị dạng số/mã máy dùng mono; văn bản giải thích vẫn dùng sans */
.spec-table__body dd .v { font-family: var(--f-mono); font-weight: 600; }

/* Ô có nhiều ý (người nhập dán cả đoạn từ trang hãng) hiện thành danh sách.
   Trả về phông chữ thường: mono đậm hợp với giá trị ngắn như "32 GB", nhưng cả
   câu tiếng Việt viết bằng mono thì rất mỏi mắt. */
.spec-table__body dd .v--list {
  margin: 0;
  padding-left: 1.05em;
  font-family: inherit;
  font-weight: 400;
  display: grid;
  gap: 3px;
}
.spec-table__body dd .v--list li { list-style: disc; }
.spec-table__body dd .note {
  display: block; font-size: var(--fs-xs); color: var(--c-muted); margin-top: 2px;
}
@media (max-width: 640px) {
  .spec-table__body > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- 17e. Thanh đo hiệu năng ----------
   Thay cho .rating sao của lamdep. Sao là cảm nhận; thanh này là số đo có
   nguồn (Cinebench, 3DMark, giờ pin thực đo) — đúng tinh thần site tra cứu. */
.bar-meter { margin-bottom: 13px; }
.bar-meter:last-child { margin-bottom: 0; }
.bar-meter__top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: var(--fs-xs); margin-bottom: 5px;
}
.bar-meter__label { color: var(--c-body); font-weight: 500; }
.bar-meter__value { font-family: var(--f-mono); font-weight: 700; color: var(--c-ink); }
.bar-meter__track {
  height: 7px; border-radius: var(--r-full);
  background: var(--c-line-2); overflow: hidden;
}
.bar-meter__fill {
  height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--c-brand-500), var(--c-brand-600));
}
.bar-meter--ok   .bar-meter__fill { background: linear-gradient(90deg, #46a16f, var(--c-ok)); }
.bar-meter--warn .bar-meter__fill { background: linear-gradient(90deg, #d79a2b, var(--c-warn)); }
.bar-meter__scale { font-size: .6875rem; color: var(--c-muted); margin-top: 3px; }

/* ---------- 17f. Danh sách cổng kết nối ----------
   Người dùng laptop hỏi "có cổng HDMI không, có USB-A không" rất nhiều —
   tách thành component riêng để liệt kê trực quan thay vì nhồi vào một dòng. */
.port-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.port-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-sm);
  padding: 7px 0;
  border-bottom: 1px solid var(--c-line-2);
}
.port-list li:last-child { border-bottom: 0; }
.port-list__qty {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--c-brand-50); color: var(--c-brand-700);
  font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 700;
  flex-shrink: 0;
}
.port-list__name { color: var(--c-ink); font-weight: 500; }
.port-list__note { color: var(--c-muted); font-size: var(--fs-xs); margin-left: auto; text-align: right; }

/* ---------- 17g. Hộp kết luận (ưu / nhược) ----------
   Hai cột cạnh nhau. Trình bày cân đối cố ý: site không bán hàng nên phần
   nhược điểm phải có cùng độ nổi bật với ưu điểm. */
.verdict-box {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-block: 1.5rem;
  background: #fff;
}
.verdict-box__col { padding: 16px 18px; }
.verdict-box__col + .verdict-box__col { border-left: 1px solid var(--c-line); }
.verdict-box__title {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-sm); font-weight: 700;
  margin-bottom: 9px;
}
.verdict-box__title svg { width: 17px; height: 17px; }
.verdict-box--pro .verdict-box__title { color: var(--c-ok); }
.verdict-box--con .verdict-box__title { color: var(--c-high); }
.verdict-box ul { list-style: none; padding: 0; margin: 0; }
.verdict-box li {
  position: relative; padding-left: 16px; margin-bottom: 7px;
  font-size: var(--fs-sm);
}
.verdict-box li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-line);
}
.verdict-box--pro li::before { background: var(--c-ok); }
.verdict-box--con li::before { background: var(--c-high); }
@media (max-width: 640px) {
  .verdict-box { grid-template-columns: 1fr; }
  .verdict-box__col + .verdict-box__col { border-left: 0; border-top: 1px solid var(--c-line); }
}

/* ---------- 17h. Bảng so sánh ----------
   Khác lamdep ở chỗ có tô sáng ô "tốt nhất hàng" (.is-best): với thông số
   kỹ thuật thì "hơn/kém" đo được bằng số, nên chỉ ra được. Với tiêu chí không
   so được bằng số (ví dụ xuất xứ) thì KHÔNG tô — xem js/compare. */
.compare-table { background: #fff; font-size: var(--fs-sm); }
.compare-table th, .compare-table td { border-bottom: 1px solid var(--c-line-2); }
.compare-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--c-bg-soft);
  vertical-align: bottom;
}
/* Cột tiêu chí dính bên trái khi cuộn ngang — bảng 4 cột trên mobile không
   dính cột này thì người dùng cuộn sang là mất ngữ cảnh dòng đang đọc. */
.compare-table tbody th {
  position: sticky; left: 0; z-index: 1;
  background: #fff;
  min-width: 148px;
  box-shadow: 1px 0 0 var(--c-line-2);
  font-size: var(--fs-xs); color: var(--c-muted); font-weight: 600;
}
.compare-table td { min-width: 190px; }
.compare-table__product { display: flex; flex-direction: column; gap: 2px; padding-block: 4px; }
.compare-table__product a { font-weight: 700; color: var(--c-ink); font-size: var(--fs-sm); }
.compare-table__product a:hover { color: var(--c-brand-600); }
.compare-table__thumb {
  width: 100%; max-width: 128px; aspect-ratio: 4/3;
  background: var(--c-bg-soft); border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm); margin-bottom: 7px;
}
.compare-table .v { font-family: var(--f-mono); font-weight: 600; color: var(--c-ink); }
.compare-table td.is-best { background: var(--c-ok-bg); }
.compare-table td.is-best .v { color: var(--c-ok); }
.compare-table td.is-best::after {
  content: 'Tốt nhất';
  display: block;
  font-size: .625rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--c-ok);
  margin-top: 3px;
}
.compare-table__remove {
  border: 0; background: none; cursor: pointer; padding: 2px;
  color: var(--c-muted); border-radius: 5px;
  align-self: flex-start;
}
.compare-table__remove svg { width: 14px; height: 14px; }
.compare-table__remove:hover { color: var(--c-danger); background: var(--c-danger-bg); }

/* ---------- 17i. Khay so sánh nổi dưới màn hình ----------
   Người dùng duyệt danh sách và bấm "so sánh" ở nhiều thẻ khác nhau; khay này
   cho họ thấy đang chọn mấy máy mà không phải rời trang. */
.cmp-tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: #fff;
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -6px 24px rgba(23,28,38,.12);
  transform: translateY(100%);
  transition: transform .2s;
}
.cmp-tray[data-open="true"] { transform: translateY(0); }

/* Khi khay mở, chừa chỗ ở cuối trang để nó không che mất nội dung cuối —
   trên mobile khay cao gần 140px và che hẳn đoạn văn cuối bài. */
body:has(.cmp-tray[data-open="true"]) { padding-bottom: 96px; }
@media (max-width: 640px) {
  body:has(.cmp-tray[data-open="true"]) { padding-bottom: 164px; }
}
.cmp-tray__inner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-block: 12px;
}
.cmp-tray__label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); margin: 0; }
.cmp-tray__items { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.cmp-tray__chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--c-line); border-radius: var(--r-full);
  padding: 5px 7px 5px 12px;
  font-size: var(--fs-xs); background: var(--c-bg-soft);
  max-width: 260px;
}
.cmp-tray__chip span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmp-tray__chip button {
  border: 0; background: none; cursor: pointer; color: var(--c-muted);
  display: grid; place-items: center; padding: 2px; border-radius: 50%;
  flex-shrink: 0;
}
.cmp-tray__chip button svg { width: 13px; height: 13px; }
.cmp-tray__chip button:hover { color: var(--c-danger); background: var(--c-danger-bg); }
.cmp-tray__actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
@media (max-width: 640px) {
  .cmp-tray__actions { margin-left: 0; width: 100%; }
  .cmp-tray__actions .btn { flex: 1; }
}

/* ---------- 17j. Dòng thời gian các đời máy ----------
   Đặc thù của site: cùng một dòng máy (ThinkPad X1 Carbon) có nhiều Gen.
   Component này cho người dùng thấy máy mình đang xem thuộc đời nào và
   đời sau khác gì — thứ không trang bán hàng nào trình bày. */
.gen-timeline { list-style: none; padding: 0; margin: 0; }
.gen-timeline li {
  position: relative;
  padding: 0 0 18px 26px;
  border-left: 2px solid var(--c-line);
  margin-left: 5px;
}
.gen-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.gen-timeline li::before {
  content: ''; position: absolute; left: -7px; top: 5px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid var(--c-line);
}
.gen-timeline li[aria-current="true"]::before {
  border-color: var(--c-brand-600); background: var(--c-brand-600);
  box-shadow: 0 0 0 4px var(--c-brand-50);
}
.gen-timeline__year {
  font-family: var(--f-mono); font-size: var(--fs-xs);
  color: var(--c-muted); font-weight: 600;
}
.gen-timeline__name { font-weight: 600; color: var(--c-ink); font-size: var(--fs-sm); }
.gen-timeline__name a { color: var(--c-ink); }
.gen-timeline__name a:hover { color: var(--c-brand-600); }
.gen-timeline li[aria-current="true"] .gen-timeline__name { color: var(--c-brand-700); }
.gen-timeline__delta { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 1px; }

/* ---------- 17k. Thẻ linh kiện (CPU / GPU) ----------
   Tương đương .ingredient-card của lamdep: "từ điển" của site này là
   từ điển chip, không phải từ điển hoạt chất. */
.part-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 17px 18px;
  display: flex; flex-direction: column;
  transition: border-color .15s, box-shadow .15s;
}
.part-card:hover { border-color: var(--c-brand-200); box-shadow: var(--sh-1); }
.part-card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 2px;
}
.part-card__head h3 { font-size: var(--fs-base); margin: 0; }
.part-card__head h3 a { color: var(--c-ink); }
.part-card__head h3 a:hover { color: var(--c-brand-600); text-decoration: none; }
.part-code {
  display: block;
  font-family: var(--f-mono); font-size: var(--fs-xs);
  color: var(--c-muted); margin-bottom: 8px;
}
.part-card p { font-size: var(--fs-sm); color: var(--c-body); margin-bottom: 12px; }
.part-card__foot {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: auto; padding-top: 0;
}

/* ---------- 17l. Bảng xếp hạng chip (mini) ---------- */
.rank-list { list-style: none; padding: 0; margin: 0; }
.rank-list li {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0;
  border-bottom: 1px solid var(--c-line-2);
  font-size: var(--fs-sm);
}
.rank-list li:last-child { border-bottom: 0; }
.rank-list__pos {
  width: 22px; flex-shrink: 0;
  font-family: var(--f-mono); font-size: var(--fs-xs);
  font-weight: 700; color: var(--c-muted); text-align: right;
}
.rank-list__name { flex: 1; min-width: 0; }
.rank-list__name a { color: var(--c-ink); font-weight: 500; }
.rank-list__bar {
  width: 86px; height: 6px; flex-shrink: 0;
  border-radius: var(--r-full); background: var(--c-line-2); overflow: hidden;
}
.rank-list__bar i {
  display: block; height: 100%;
  background: var(--c-brand-500); border-radius: var(--r-full);
}
.rank-list__score {
  width: 52px; flex-shrink: 0; text-align: right;
  font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 700;
  color: var(--c-ink);
}
@media (max-width: 480px) {
  .rank-list__bar { display: none; }
}

/* ---------- 17m. Nhãn nguồn số liệu ----------
   Mọi con số hiệu năng phải nói rõ đo bằng gì. Không có nhãn này thì bảng
   số chỉ là con số trên mạng. */
.src-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .6875rem; font-weight: 600;
  padding: 2px 8px; border-radius: var(--r-full);
  background: var(--c-line-2); color: var(--c-body);
  white-space: nowrap;
}
.src-badge svg { width: 12px; height: 12px; }
.src-badge--measured { background: var(--c-ok-bg); color: var(--c-ok); }
.src-badge--maker    { background: var(--c-low-bg); color: var(--c-low); }
.src-badge--est      { background: var(--c-warn-bg); color: var(--c-warn); }

/* ---------- 18. Bài viết ---------- */
.article-layout {
  display: grid;
  /* Cột trái bám đúng bề rộng đọc tối ưu (--w-prose 720px) thay vì chiếm hết
     phần còn lại.
     Trước đây cột trái là `1fr` = 808px trong khi .prose giới hạn 720px, nên
     dư ra 88px trống ở giữa hai cột — nhìn như lỗi bố cục. Ghim cột trái bằng
     đúng --w-prose thì khoảng trống đó biến mất, và phần dư được chuyển sang
     cột phải để mục lục đỡ chật.
     minmax(0, …) để ô vẫn co được khi màn hình hẹp — xem ghi chú min-width
     bên dưới. */
  grid-template-columns: minmax(0, var(--w-prose)) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
  padding-bottom: 56px;
}

/* Khoảng 1100–1240px: cột phải bị bóp quá hẹp nếu giữ nguyên tỉ lệ, tiêu đề
   bài trong "Bài mới nhất" xuống 4–5 dòng. Thu cột trái lại một chút để cột
   phải giữ được bề rộng đọc được. */
@media (max-width: 1240px) {
  .article-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; }
}
/* Ô lưới mặc định có min-width: auto, nghĩa là nó KHÔNG co nhỏ hơn nội dung
   rộng nhất bên trong. Một bảng rộng (dù đã bọc .table-wrap có overflow-x)
   vẫn kéo cả cột giãn ra và làm cả trang cuộn ngang trên mobile.
   min-width: 0 cho phép ô co lại, khi đó .table-wrap mới thực sự cuộn.
   Đây là lỗi rất khó tìm vì phần tử gây tràn nằm ở cột KHÁC với cột bị giãn. */
.article-layout > * { min-width: 0; }

@media (max-width: 1040px) {
  .article-layout { grid-template-columns: 1fr; gap: 28px; }
}

.article-sticky { position: sticky; top: calc(var(--header-h) + 16px); }
@media (max-width: 1040px) { .article-sticky { position: static; } }

.article-header { padding-block: 8px 20px; }
.article-header h1 {
  font-size: clamp(1.75rem, 3.4vw, var(--fs-3xl));
  letter-spacing: -.022em;
}
.article-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--c-muted);
  margin-top: 10px;
}
.dot { color: var(--c-line); }

.prose { max-width: var(--w-prose); font-size: var(--fs-md); }
.prose > :first-child { margin-top: 0; }
.prose h2 {
  font-size: var(--fs-xl);
  margin-top: 2em; margin-bottom: .5em;
  padding-top: .6em;
  border-top: 1px solid var(--c-line-2);
}
.prose h3 { font-size: var(--fs-lg); margin-top: 1.6em; }
.prose p, .prose li { line-height: 1.75; }
.prose ul, .prose ol { padding-left: 1.4em; margin-bottom: 1.2em; }
.prose li { margin-bottom: .45em; }
.prose strong { color: var(--c-ink); }
.prose table { margin-block: 1.4rem; }
.prose blockquote {
  margin: 1.5rem 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--c-brand-200);
  color: var(--c-body);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code {
  font-family: var(--f-mono); font-size: .9em;
  background: var(--c-line-2); padding: 1px 5px; border-radius: 4px;
  color: var(--c-brand-700);
}
.prose figure { margin: 1.6rem 0; }
.prose figcaption {
  font-size: var(--fs-xs); color: var(--c-muted);
  margin-top: 7px; text-align: center;
}

/* Chú thích nguồn dạng số mũ */
.fn {
  font-size: .7em; font-weight: 700; vertical-align: super;
  padding: 0 1px; margin-left: 1px;
  color: var(--c-brand-600);
}
.fn:hover { text-decoration: none; background: var(--c-brand-50); border-radius: 3px; }

.sources {
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
}
.sources h2 { font-size: var(--fs-md); }
.sources ol { padding-left: 1.3em; color: var(--c-muted); }
.sources li { margin-bottom: .6em; }
.src-org { color: var(--c-body); font-weight: 500; }

.review-box {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 1.75rem; padding: 14px 16px;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.review-box svg { width: 19px; height: 19px; color: var(--c-brand-600); flex-shrink: 0; margin-top: 2px; }
.review-box p { margin: 0; color: var(--c-muted); }
.review-box strong { color: var(--c-ink); }

/* ---------- Mục lục ---------- */
.toc {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 15px 17px;
}
.toc h2 {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-muted); margin-bottom: 10px;
}
.toc ul, .toc ol { list-style: none; padding: 0; margin: 0; }
.toc li { margin-bottom: 1px; }
.toc a {
  display: block; padding: 5px 9px; border-radius: 6px;
  font-size: var(--fs-sm); color: var(--c-body);
  border-left: 2px solid transparent;
}
.toc a:hover { background: var(--c-brand-50); text-decoration: none; }
.toc a.is-active {
  color: var(--c-brand-700); font-weight: 600;
  background: var(--c-brand-50);
  border-left-color: var(--c-brand-600);
}

/* ---------- Mục lục dạng cây ----------
   Dùng khi bài có nhiều heading hai cấp (h2 + h3). Mục đích là để người đọc
   phân biệt được NGAY đâu là chương chính và đâu là ý phụ — mục lục phẳng với
   20+ mục thì không ai đọc.

   Ba tín hiệu phân cấp, cố ý dùng cùng lúc vì mỗi tín hiệu bắt một kiểu đọc:
     1. Số thứ tự — chỉ h2 có. Cho biết bài gồm mấy phần và đang ở phần mấy
     2. Cỡ chữ + độ đậm — h2 to và đậm hơn
     3. Đường nối dọc — gom các mục con vào đúng mục cha bằng thị giác
   ========================================================================== */
.toc--tree { padding: 15px 15px 13px; }

/* Mục lục dài thì tự cuộn trong khung thay vì đẩy khối "Bài viết khác" xuống
   dưới màn hình. Chiều cao tính theo viewport nên luôn còn chỗ cho khối dưới. */
.toc--tree .toc__list {
  max-height: min(56vh, 520px);
  overflow-y: auto;
  padding-right: 4px;
}
/* Thanh cuộn mảnh, chỉ hiện khi cần — thanh cuộn mặc định của Windows chiếm
   17px, quá dày cho một cột 312px. */
.toc--tree .toc__list::-webkit-scrollbar { width: 5px; }
.toc--tree .toc__list::-webkit-scrollbar-thumb {
  background: var(--c-line); border-radius: 3px;
}
.toc--tree .toc__list::-webkit-scrollbar-thumb:hover { background: var(--c-brand-200); }

.toc__item { margin-bottom: 2px; }
.toc__item + .toc__item { margin-top: 4px; }

/* ── Mục cha (h2) ── */
.toc__link--h2 {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 6px 8px;
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.4;
}
.toc__num {
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 700;
  color: var(--c-brand-500);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.toc__link--h2:hover { background: var(--c-brand-50); }
.toc__link--h2.is-active {
  background: var(--c-brand-50);
  color: var(--c-brand-700);
  border-left-color: var(--c-brand-600);
}
.toc__link--h2.is-active .toc__num { color: var(--c-brand-700); }

/* ── Mục con (h3, h4) ──
   Đường nối dọc đặt ở <ul> chứ không ở từng <li>: nếu đặt ở <li> thì đường bị
   đứt quãng giữa các mục. Thụt lề khớp với cột số của mục cha để hai cấp thẳng
   hàng với nhau. */
.toc__sub {
  margin: 2px 0 4px;
  padding-left: 12px;
  border-left: 1.5px solid var(--c-line-2);
  margin-left: 13px;
}
.toc__link--sub {
  padding: 4px 8px;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  line-height: 1.45;
}
.toc__link--sub:hover { background: var(--c-brand-50); color: var(--c-body); }
.toc__link--sub.is-active {
  background: var(--c-brand-50);
  color: var(--c-brand-700);
  font-weight: 600;
}
/* Cấp 4 thụt thêm một bậc — hiếm gặp nhưng phải xử lý, nếu không h4 trông
   ngang hàng h3 và cây mất nghĩa. */
.toc__sub li[data-level="4"] .toc__link--sub { padding-left: 20px; }

/* ---------- Khối "Bài mới nhất" ở cột phải ----------
   Lý do tồn tại: trước đây cột phải kết thúc bằng các thẻ kêu gọi hành động,
   nên cả người đọc lẫn bot thu thập đều hết đường đi sau khi đọc xong bài.
   Khối này neo các bài lại với nhau để bot bò tiếp sang bài khác.

   Ba quyết định thiết kế:

   1. BỎ NGÀY THÁNG. Trong danh sách sáu bài, ngày lặp lại sáu lần tạo thành
      một cột nhiễu bên dưới mỗi tiêu đề mà không giúp chọn bài nào. Ngày chỉ
      có ích khi người đọc cần biết nội dung còn mới không — đó là việc của
      trang bài viết, không phải của danh sách điều hướng.

   2. ĐÁNH SỐ THỨ TỰ thay cho dấu chấm đầu dòng. Số vừa cho biết đây là danh
      sách có trật tự, vừa cho mắt một điểm neo để bám dòng khi tiêu đề dài
      hai ba dòng.

   3. KHÔNG KẺ NGANG GIỮA CÁC MỤC. Với tiêu đề nhiều dòng, đường kẻ làm khối
      trông như bảng dữ liệu. Dùng khoảng trắng và nền khi rê chuột để phân
      tách — nhẹ mắt hơn và hiện đại hơn.
   ========================================================================== */
.side-posts {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 16px 16px 14px;
  margin-top: 16px;
}

.side-posts__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 11px;
}
.side-posts h2 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--c-muted);
  margin: 0;
  white-space: nowrap;
}
/* Đường kẻ chạy hết phần còn lại của dòng tiêu đề — chi tiết nhỏ nhưng làm
   khối trông có chủ đích thay vì như chữ thả nổi. */
.side-posts__head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-line-2);
}

.side-posts__list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: sp;
}
.side-posts__list li { margin: 0; }

.side-posts__list a {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  padding: 9px 8px;
  margin-inline: -8px;        /* nền khi rê chuột tràn ra sát mép khối */
  border-radius: var(--r-sm);
  color: var(--c-body);
  transition: background-color .14s;
}
.side-posts__list a:hover {
  background: var(--c-brand-50);
  text-decoration: none;
}

.side-posts__num {
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 700;
  color: var(--c-brand-300);
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* Căn theo dòng chữ đầu tiên của tiêu đề, không theo đỉnh hộp — lệch một
     hai pixel ở đây nhìn rất rõ vì số nằm cạnh chữ đậm. */
  line-height: 1.5;
  padding-top: 1px;
}
.side-posts__list a:hover .side-posts__num { color: var(--c-brand-600); }

.side-posts__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.45;
  /* Giới hạn 3 dòng: tiêu đề bài SEO tiếng Việt thường dài 60–90 ký tự, để
     tràn tự do thì một mục chiếm hết cột. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.side-posts__list a:hover .side-posts__title { color: var(--c-brand-700); }

.side-posts__all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--c-line-2);
  width: 100%;
  font-size: var(--fs-xs);
  font-weight: 600;
}
.side-posts__all svg {
  width: 13px; height: 13px;
  transition: transform .15s;
}
.side-posts__all:hover svg { transform: translateX(2px); }

/* ---------- 18b. Thẻ bài viết ---------- */
.post-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.post-card:hover { border-color: var(--c-brand-200); box-shadow: var(--sh-2); transform: translateY(-2px); }
.post-card__thumb {
  position: relative; display: block;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--c-brand-100), var(--c-bg-soft));
}
.post-card__cat {
  position: absolute; left: 11px; bottom: 11px;
  background: rgba(255,255,255,.95);
  font-size: .6875rem; font-weight: 700; color: var(--c-brand-700);
  padding: 3px 10px; border-radius: var(--r-full);
}
.post-card h3 { font-size: var(--fs-base); margin: 14px 16px 6px; line-height: 1.4; }
.post-card h3 a { color: var(--c-ink); }
.post-card h3 a:hover { color: var(--c-brand-600); text-decoration: none; }
.post-card__excerpt {
  margin: 0 16px 12px; font-size: var(--fs-sm); color: var(--c-muted);
}
.post-card__meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin: auto 16px 15px; font-size: var(--fs-xs); color: var(--c-muted);
}

.post-row {
  display: grid; grid-template-columns: 184px 1fr; gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-line-2);
}
.post-row:first-child { padding-top: 0; }
.post-row__thumb {
  display: block; aspect-ratio: 16/10; border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--c-brand-100), var(--c-bg-soft));
}
.post-row h3 { font-size: var(--fs-lg); margin-bottom: 5px; }
.post-row h3 a { color: var(--c-ink); }
.post-row h3 a:hover { color: var(--c-brand-600); text-decoration: none; }
.post-row p { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: 9px; }
.post-row__meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--c-muted);
}
@media (max-width: 640px) {
  .post-row { grid-template-columns: 1fr; gap: 11px; }
  .post-row__thumb { max-width: 220px; }
}

/* ---------- 18c. Bố cục trang chữ (giới thiệu, minh bạch, pháp lý) ---------- */
.doc-layout {
  display: grid; grid-template-columns: minmax(0,1fr) 260px;
  gap: 40px; align-items: start; padding-bottom: 56px;
}
.doc-layout > * { min-width: 0; }
@media (max-width: 940px) { .doc-layout { grid-template-columns: 1fr; } }

/* ---------- 19. Filter chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--c-line); border-radius: var(--r-full);
  background: #fff; cursor: pointer;
  font-size: var(--fs-sm); font-weight: 500; color: var(--c-body);
  white-space: nowrap;
}
.chip:hover {
  border-color: var(--c-brand-300); background: var(--c-brand-50);
  color: var(--c-brand-700); text-decoration: none;
}
.chip[aria-pressed="true"] {
  background: var(--c-brand-600); border-color: var(--c-brand-600); color: #fff;
}
.chip__count { font-size: var(--fs-xs); opacity: .7; font-family: var(--f-mono); }

/* Chip chữ cái / hãng cho trang từ điển */
.alpha-nav { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 22px; }
.alpha-nav a, .alpha-nav button {
  display: grid; place-items: center;
  min-width: 34px; height: 34px; padding: 0 7px;
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
  background: #fff; cursor: pointer;
  font-family: var(--f-mono); font-size: var(--fs-sm); font-weight: 600;
  color: var(--c-body);
}
.alpha-nav a:hover, .alpha-nav button:hover {
  border-color: var(--c-brand-300); background: var(--c-brand-50);
  color: var(--c-brand-700); text-decoration: none;
}
.alpha-nav [aria-pressed="true"] {
  background: var(--c-brand-600); border-color: var(--c-brand-600); color: #fff;
}
.alpha-nav .is-disabled { opacity: .35; pointer-events: none; }

/* ---------- 20. Pagination ---------- */
.pagination {
  display: flex; justify-content: center; align-items: center; gap: 5px;
  margin-top: 34px; font-size: var(--fs-sm);
}
.pagination a, .pagination span {
  display: grid; place-items: center;
  min-width: 36px; height: 36px; padding: 0 10px;
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
  color: var(--c-body); background: #fff;
}
.pagination a:hover { border-color: var(--c-brand-300); background: var(--c-brand-50); text-decoration: none; }
.pagination [aria-current="page"] {
  background: var(--c-brand-600); border-color: var(--c-brand-600); color: #fff; font-weight: 600;
}
.pagination .is-disabled { opacity: .4; }

/* ---------- 21. Toast ---------- */
.toast-host {
  position: fixed; z-index: 300;
  left: 50%; transform: translateX(-50%);
  bottom: 24px;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--c-ink); color: #fff;
  padding: 10px 18px; border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 500;
  box-shadow: var(--sh-3);
}
.toast--ok  { background: var(--c-ok); }
.toast--err { background: var(--c-danger); }

/* ---------- 22. Newsletter ---------- */
.subscribe {
  background: linear-gradient(135deg, var(--c-brand-700), var(--c-brand-900));
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 42px);
  text-align: center;
}
.subscribe h2 { color: #fff; }
.subscribe p { color: #c2d3ec; max-width: 56ch; margin-inline: auto; }
.subscribe__form {
  display: flex; gap: 9px; max-width: 440px; margin: 20px auto 0;
}
.subscribe__form .input { border-color: transparent; }
.subscribe__form .btn--primary { background: #fff; color: var(--c-brand-700); }
.subscribe__form .btn--primary:hover { background: var(--c-brand-50); color: var(--c-brand-900); }
.subscribe__note { font-size: var(--fs-xs); color: #93aeda; margin: 13px 0 0; }
@media (max-width: 520px) {
  .subscribe__form { flex-direction: column; }
}

/* ---------- 23. Trust points ---------- */
.trust-points {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
@media (max-width: 860px) { .trust-points { grid-template-columns: 1fr; gap: 22px; } }
.trust-point { text-align: center; }
.trust-point__icon {
  width: 46px; height: 46px; border-radius: 13px;
  background: #fff; border: 1px solid var(--c-line);
  color: var(--c-brand-600);
  display: grid; place-items: center;
  margin: 0 auto 13px;
  box-shadow: var(--sh-1);
}
.trust-point__icon svg { width: 22px; height: 22px; }
.trust-point h3 { font-size: var(--fs-base); }
.trust-point p { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: 0; }

/* ==========================================================================
   23b. KHỐI PHỤC VỤ TRÍCH DẪN (AI Overview · AI search)
   ==========================================================================
   Ba khối dưới đây tồn tại vì một lý do cụ thể: công cụ tìm kiếm có AI trích
   một ĐOẠN TỰ ĐỦ NGHĨA rồi dẫn nguồn, chứ không đọc cả trang. Trang chỉ có
   bảng số mà không có câu văn tóm tắt gần như không bao giờ được trích.

   Thiết kế cố ý GIỮ MARKUP SẠCH: đoạn văn nằm trong <p> thường, câu hỏi là
   <h3> thật, không nhồi <span> trang trí vào giữa câu — càng sạch càng dễ
   trích nguyên vẹn.
   ========================================================================== */

/* ---------- Đoạn trả lời ngắn, đặt ngay sau H1 ---------- */
.answer-box {
  border-left: 3px solid var(--c-brand-500);
  background: var(--c-brand-50);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 16px 20px;
  margin-block: 1.25rem 1.75rem;
}
.answer-box__text {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--c-ink);
}
.answer-box__meta {
  margin: 10px 0 0;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* ---------- Bảng thông tin nhanh ---------- */
.fact-table { margin-block: 1.5rem; }
.fact-table__caption {
  font-size: var(--fs-md);
  margin-bottom: 10px;
}
.fact-table dl {
  margin: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fff;
}
.fact-table dl > div {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 16px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--c-line-2);
  font-size: var(--fs-sm);
}
.fact-table dl > div:last-child { border-bottom: 0; }
.fact-table dl > div:nth-child(odd) { background: var(--c-bg-soft); }
.fact-table dt { color: var(--c-muted); }
.fact-table dd { margin: 0; color: var(--c-ink); }
.fact-table dd .v { font-family: var(--f-mono); font-weight: 600; }
/* Ghi chú nêu MỐC SO SÁNH ("đủ dùng cạnh cửa sổ") chứ không chỉ con số trần —
   AI cần mệnh đề so sánh để tóm tắt được, không chỉ cần số. */
.fact-table dd .note {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  margin-top: 2px;
}
@media (max-width: 640px) {
  .fact-table dl > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Câu hỏi thường gặp ----------
   KHÔNG dùng <details> gập lại: nội dung ẩn sau tương tác bị đánh giá thấp
   hơn, và khai FAQ schema cho nội dung ẩn là vi phạm. */
.faq-block { margin-block: 2rem; }
.faq-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--c-line-2);
}
.faq-item:last-child { border-bottom: 0; }
.faq-item h3 {
  font-size: var(--fs-base);
  margin-bottom: .4em;
  color: var(--c-ink);
}
.faq-item p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-body);
}

/* ---------- Nhãn liên kết tiếp thị ---------- */
.aff-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 15px;
  margin-block: 1.25rem;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
}
.aff-notice svg {
  width: 17px; height: 17px;
  color: var(--c-muted);
  flex-shrink: 0;
  margin-top: 2px;
}
.aff-notice p {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* ---------- Ảnh trong thẻ ---------- */
.laptop-card__thumb img,
.post-card__thumb img,
.post-row__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   23c. THƯ VIỆN ẢNH & VIDEO SẢN PHẨM
   ==========================================================================
   Thư viện ảnh chạy HOÀN TOÀN BẰNG CSS — input radio ẩn + bộ chọn :checked.

   Vì sao không dùng JS: mọi ảnh nằm sẵn trong HTML ngay từ lần tải đầu, nên
   công cụ tìm kiếm đọc được toàn bộ thay vì chỉ thấy một ảnh rồi phần còn lại
   do JS chèn vào sau. Người tắt JS cũng xem đủ ảnh.
   ========================================================================== */

.gallery { position: relative; }

/* Radio điều khiển — ẩn khỏi mắt nhưng GIỮ trong luồng tiêu điểm để điều
   hướng bằng bàn phím vẫn chạy. Dùng clip thay vì display:none vì
   display:none làm phần tử mất hẳn khả năng nhận tiêu điểm. */
.gallery__radio {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.gallery__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--c-bg-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.gallery__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .18s;
  /* Ảnh đang ẩn không được chắn chuột lên ảnh đang hiện. */
  pointer-events: none;
}
.gallery__slide img {
  width: 100%; height: 100%;
  object-fit: contain;
}

/* Ghép radio thứ N với slide thứ N.
   CSS không có vòng lặp nên phải liệt kê — giới hạn 10 ảnh khớp với mức
   gallery_box() cắt trong PHP. */
.gallery__radio:nth-of-type(1):checked  ~ .gallery__stage .gallery__slide[data-i="0"],
.gallery__radio:nth-of-type(2):checked  ~ .gallery__stage .gallery__slide[data-i="1"],
.gallery__radio:nth-of-type(3):checked  ~ .gallery__stage .gallery__slide[data-i="2"],
.gallery__radio:nth-of-type(4):checked  ~ .gallery__stage .gallery__slide[data-i="3"],
.gallery__radio:nth-of-type(5):checked  ~ .gallery__stage .gallery__slide[data-i="4"],
.gallery__radio:nth-of-type(6):checked  ~ .gallery__stage .gallery__slide[data-i="5"],
.gallery__radio:nth-of-type(7):checked  ~ .gallery__stage .gallery__slide[data-i="6"],
.gallery__radio:nth-of-type(8):checked  ~ .gallery__stage .gallery__slide[data-i="7"],
.gallery__radio:nth-of-type(9):checked  ~ .gallery__stage .gallery__slide[data-i="8"],
.gallery__radio:nth-of-type(10):checked ~ .gallery__stage .gallery__slide[data-i="9"] {
  opacity: 1;
  pointer-events: auto;
}

/* Ảnh nhỏ tương ứng được đánh dấu đang chọn */
.gallery__radio:nth-of-type(1):checked  ~ .gallery__thumbs .gallery__thumb:nth-child(1),
.gallery__radio:nth-of-type(2):checked  ~ .gallery__thumbs .gallery__thumb:nth-child(2),
.gallery__radio:nth-of-type(3):checked  ~ .gallery__thumbs .gallery__thumb:nth-child(3),
.gallery__radio:nth-of-type(4):checked  ~ .gallery__thumbs .gallery__thumb:nth-child(4),
.gallery__radio:nth-of-type(5):checked  ~ .gallery__thumbs .gallery__thumb:nth-child(5),
.gallery__radio:nth-of-type(6):checked  ~ .gallery__thumbs .gallery__thumb:nth-child(6),
.gallery__radio:nth-of-type(7):checked  ~ .gallery__thumbs .gallery__thumb:nth-child(7),
.gallery__radio:nth-of-type(8):checked  ~ .gallery__thumbs .gallery__thumb:nth-child(8),
.gallery__radio:nth-of-type(9):checked  ~ .gallery__thumbs .gallery__thumb:nth-child(9),
.gallery__radio:nth-of-type(10):checked ~ .gallery__thumbs .gallery__thumb:nth-child(10) {
  border-color: var(--c-brand-500);
  opacity: 1;
}

/* Viền tiêu điểm khi điều hướng bằng bàn phím — radio ẩn nên phải vẽ ở nhãn */
.gallery__radio:focus-visible ~ .gallery__thumbs .gallery__thumb:nth-child(1) { outline: 2px solid var(--c-brand-500); outline-offset: 2px; }

.gallery__thumbs {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.gallery__thumbs::-webkit-scrollbar { height: 4px; }
.gallery__thumbs::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 2px; }

.gallery__thumb {
  flex: 0 0 52px;
  aspect-ratio: 1;
  border: 1.5px solid var(--c-line);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  opacity: .65;
  background: var(--c-bg-soft);
  transition: opacity .15s, border-color .15s;
}
.gallery__thumb:hover { opacity: 1; border-color: var(--c-brand-300); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.gallery__count {
  margin: 6px 0 0;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  text-align: center;
}

.gallery--single img {
  width: 100%;
  border-radius: var(--r-sm);
}

/* ---------- Nút phóng to trên ảnh lớn ----------
   Ảnh lớn bọc trong <button> để bấm/tab được. Nút phải trong suốt hoàn toàn:
   mọi style mặc định của trình duyệt (nền xám, viền, padding) sẽ lộ ra quanh
   ảnh nếu không gỡ. */
.gallery__zoom {
  display: block;
  width: 100%; height: 100%;
  padding: 0; border: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
}
.gallery__zoom img { width: 100%; height: 100%; object-fit: contain; }
.gallery__zoom:focus-visible { outline: 2px solid var(--c-brand-500); outline-offset: 2px; }

/* Biểu tượng kính lúp: gợi ý ảnh bấm được. Luôn hiện mờ trên cảm ứng (không có
   hover) và rõ lên khi rê chuột. */
.gallery__zoom-hint {
  position: absolute;
  right: 10px; bottom: 10px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(17, 17, 17, .55);
  color: #fff;
  opacity: .75;
  transition: opacity .15s, background-color .15s;
}
.gallery__zoom-hint svg { width: 17px; height: 17px; }
.gallery__zoom:hover .gallery__zoom-hint,
.gallery__zoom:focus-visible .gallery__zoom-hint {
  opacity: 1;
  background: rgba(17, 17, 17, .8);
}

/* ---------- Lớp phủ xem ảnh lớn ----------
   Dựng bằng JS, nên không có phương án dự phòng khi JS hỏng — và không cần:
   dải ảnh nhỏ vẫn chuyển ảnh bằng CSS thuần, lightbox chỉ là tiện ích thêm. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: clamp(12px, 4vw, 40px);
  background: rgba(10, 12, 16, .92);
}
/* hidden mặc định bị display:flex ghi đè — phải nói rõ. */
.lightbox[hidden] { display: none; }

.lightbox__fig {
  margin: 0;
  max-width: min(1200px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.lightbox__fig img {
  /* Trừ hao chỗ cho dòng đếm ảnh bên dưới, nếu không ảnh cao sẽ đẩy nó
     ra ngoài màn hình. */
  max-width: 100%;
  max-height: calc(100vh - 110px);
  object-fit: contain;
  border-radius: var(--r-sm);
  background: #fff;
}
.lightbox__fig figcaption {
  color: rgba(255, 255, 255, .8);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.lightbox__close,
.lightbox__nav {
  flex: 0 0 auto;
  border: 0;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  display: grid; place-items: center;
  transition: background-color .15s;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, .26); }
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.lightbox__nav { width: 46px; height: 46px; font-size: 30px; line-height: 1; }
.lightbox__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 40px; height: 40px;
  font-size: 26px; line-height: 1;
}

/* Khoá cuộn nền khi lớp phủ đang mở, nếu không cuộn trong ảnh sẽ kéo trang
   phía sau và lúc đóng người dùng thấy mình ở một chỗ khác hẳn. */
html.is-lightbox, html.is-lightbox body { overflow: hidden; }

@media (max-width: 640px) {
  /* Màn hẹp: nút qua/lại chiếm mất bề ngang của ảnh. Đưa xuống hai bên dưới
     dạng nổi, nhường toàn bộ chiều ngang cho ảnh. */
  .lightbox__nav {
    position: absolute;
    bottom: 18px;
    width: 42px; height: 42px;
  }
  .lightbox__nav--prev { left: 16px; }
  .lightbox__nav--next { right: 16px; }
  .lightbox__fig img { max-height: calc(100vh - 150px); }
}

/* ---------- Khung video ----------
   Hiện ảnh đại diện trước, chỉ nạp iframe khi người dùng bấm phát.
   Một iframe YouTube kéo theo vài trăm KB JavaScript và cookie theo dõi trên
   MỌI lượt xem trang — trong khi phần lớn người đọc không bấm phát. */
.video-box { margin-block: 1.25rem; }

.video-box__cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  background: #000;
}
.video-box__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Ảnh hqdefault của YouTube là 4:3 có viền đen trên dưới; phóng nhẹ để lấp
     đầy khung 16:9 mà không thấy viền. */
  transform: scale(1.35);
  transition: transform .25s, filter .25s;
}
.video-box__cover:hover img { transform: scale(1.4); filter: brightness(.85); }

.video-box__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.video-box__play svg { width: 68px; height: 48px; }
.video-box__bg { fill: #212121; fill-opacity: .8; transition: fill-opacity .2s, fill .2s; }
.video-box__cover:hover .video-box__bg { fill: #f00; fill-opacity: 1; }

.video-box iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--r-md);
  display: block;
}

.video-box__fallback {
  margin: 8px 0 0;
  font-size: var(--fs-sm);
}

/* ---------- 24. Utilities ---------- */
.flex { display: flex; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.gap-3 { gap: 24px; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }

.text-center { text-align: center; }
.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-muted { color: var(--c-muted); }
.font-semibold { font-weight: 600; }
.font-mono { font-family: var(--f-mono); }
.num { font-family: var(--f-mono); font-weight: 600; }

@media print {
  .site-header, .site-footer, .search-panel, .search-backdrop,
  .cmp-tray, .nav-toggle, .pagination { display: none !important; }
  .article-layout, .browse-layout { grid-template-columns: 1fr; }
}