/* =========================================================
   WhiteScreen — category + detail page styles
   (layer on top of Bootstrap 5, matches styles.css tokens)
   ========================================================= */

/* ===== Breadcrumb (Bootstrap component, themed) ===== */
.breadcrumb { --bs-breadcrumb-divider: '›'; font-size: 14px; margin-bottom: 0; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--ws-muted-2); }
.breadcrumb-item a { color: var(--ws-muted); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--ws-fg); }
.breadcrumb-item.active { color: var(--ws-fg); font-weight: 500; }

/* ===== Category page head ===== */
.page-head-text h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 800; margin: 0 0 10px; color: var(--ws-fg); }
.page-head-text p { font-size: 16px; color: var(--ws-muted); margin: 0; max-width: 460px; line-height: 1.5; }

.search { position: relative; width: 300px; max-width: 100%; }
.search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--ws-muted-2); }
.search input {
  width: 100%; border: 1px solid var(--ws-line); background: var(--ws-card);
  border-radius: 11px; padding: 13px 16px 13px 44px;
  font-size: 15px; color: var(--ws-fg); outline: none;
}
.search input:focus { border-color: var(--ws-blue); }
.search input::placeholder { color: var(--ws-muted-2); }

.sort-btn {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--ws-line); background: var(--ws-card);
  border-radius: 11px; padding: 13px 16px; font-size: 15px; color: var(--ws-fg);
  white-space: nowrap;
}
.sort-btn svg { width: 16px; height: 16px; stroke: var(--ws-muted); }
.sort-btn .dropdown-item.active { background: var(--ws-blue-soft); color: var(--ws-blue); }

.view-toggle { display: flex; border: 1px solid var(--ws-line); border-radius: 11px; overflow: hidden; background: var(--ws-card); }
.view-toggle button { border: none; background: var(--ws-card); cursor: pointer; padding: 11px 13px; color: var(--ws-muted-2); display: flex; }
.view-toggle button.active { background: var(--ws-blue-soft); color: var(--ws-blue); }
.view-toggle svg { width: 18px; height: 18px; }
/* Cảm ứng: nút lưới/danh sách của template chỉ cao 40px — dưới mức tối thiểu 44px nên hay bấm trượt
   trên iPad/điện thoại (visual-verify #2 D3 "nút chưa hoạt động"). */
@media (hover: none) {
  .view-toggle button { padding: 13px; }
}

/* ===== Category sections ===== */
.cat-section {
  border: 1px solid var(--ws-line); border-radius: 18px; padding: 26px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03); background: var(--ws-card);
}
.cat-section h2 { font-size: 20px; font-weight: 700; margin: 0; color: var(--ws-fg); }
.view-all-link {
  font-size: 14px; color: var(--ws-blue); text-decoration: none; font-weight: 600;
  border: 1px solid var(--ws-line); border-radius: 9px; padding: 8px 14px;
}
.view-all-link:hover { background: var(--ws-blue-soft); }

.solid-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 16px; }
.theme-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }

.bg-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; }
.bg-card .swatch {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: transform .15s ease, box-shadow .15s ease;
  height:auto !important;
}
.bg-card.theme .swatch { aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
.bg-card:hover .swatch { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.bg-card .name { font-size: 14px; font-weight: 600; margin: 12px 0 4px; color: var(--ws-fg); }
/* margin-top: auto — tên hub dài xuống 2 dòng làm cả hàng lưới cao thêm; không đẩy phần meta xuống đáy thì
   các thẻ tên 1 dòng để lại khoảng trắng lệch nhau giữa lưới (visual-verify #2 A2/D2). */
.bg-card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.bg-card .formats { font-size: 12px; color: var(--ws-muted-2); letter-spacing: 0.02em; }
.bg-card .foot svg { width: 15px; height: 15px; stroke: var(--ws-muted-2); }

/* ===== Detail page ===== */
.detail-head h1 { font-size: clamp(24px, 3.5vw, 32px); font-weight: 800; margin: 0; color: var(--ws-fg); }
.detail-head .heart { background: none; border: none; cursor: pointer; color: var(--ws-muted-2); display: flex; padding: 4px; }
.detail-head .heart svg { width: 22px; height: 22px; }
.detail-head .heart.on { color: #ef4444; }
.detail-head .heart.on svg { fill: #ef4444; }

.detail-preview {
  width: 100%; aspect-ratio: 16 / 9; border-radius: 16px;
  border: 1px solid var(--ws-line); box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  position: relative; background: #000;
}
.preview-tools { position: absolute; top: 16px; right: 16px; display: flex; gap: 10px; }
.preview-tools button {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.92); border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: #334155;
}
.preview-tools svg { width: 18px; height: 18px; }
.copy-toast {
  position: absolute; top: 66px; right: 16px;
  background: #0f172a; color: #fff; font-size: 13px; padding: 7px 12px; border-radius: 8px;
  opacity: 0; transform: translateY(-4px); transition: all .2s ease; pointer-events: none;
}
.copy-toast.show { opacity: 1; transform: translateY(0); }

/* ===== Prev/Next điều hướng hub detail: nút tròn trên preview + counter + nút Prev/Next dưới ===== */
.nav-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,0.92); border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: #334155;
  transition: transform .15s ease, box-shadow .15s ease;
}
.nav-arrow:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 4px 14px rgba(0,0,0,0.22); }
.nav-arrow svg { width: 22px; height: 22px; }
.nav-prev { left: 14px; }
.nav-next { right: 14px; }
.preview-counter {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2;
  background: rgba(15,23,42,0.85); color: #fff; font-size: 14px; font-weight: 600;
  padding: 5px 14px; border-radius: 999px; letter-spacing: .02em; pointer-events: none;
}
.detail-nav { display: flex; justify-content: center; gap: 14px; margin-top: 16px; }
.detail-nav-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: 12px;
  border: 1px solid var(--ws-line, #e2e8f0); background: var(--ws-card, #fff); color: var(--ws-fg, #0f172a);
  font-size: 17px; font-weight: 700; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.detail-nav-btn:hover { border-color: var(--ws-blue, #2563eb); box-shadow: 0 3px 10px rgba(0,0,0,0.08); }
.detail-nav-btn svg { width: 18px; height: 18px; }
.nav-arrow[hidden], .preview-counter[hidden], #detail-nav[hidden] { display: none; }
@media (max-width: 575.98px) {
  .nav-arrow { width: 38px; height: 38px; }
  .nav-arrow svg { width: 18px; height: 18px; }
  .nav-prev { left: 6px; }
  .nav-next { right: 6px; }
  .detail-nav-btn { padding: 9px 16px; font-size: 15px; }
}

.action-card {
  border: 1px solid var(--ws-line); border-radius: 16px; padding: 24px;
  background: var(--ws-card); box-shadow: 0 1px 2px rgba(0,0,0,0.03); height: 100%;
}
.action-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; }
.step-num {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.step-num.blue { background: var(--ws-blue-soft); color: var(--ws-blue); }
/* .green: đặt tên "green" nhưng render XANH DƯƠNG cho khớp panel Download trang Screen (PO 2026-07-27) */
.step-num.green { background: var(--ws-blue-soft); color: var(--ws-blue); }
.action-card-head .label { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; }
.action-card-head .label.blue { color: var(--ws-blue); }
.action-card-head .label.green { color: var(--ws-blue); }
.action-desc { font-size: 14px; color: var(--ws-muted); margin: 0 0 18px; line-height: 1.5; max-width: 280px; }

.fs-big-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ws-blue); color: #fff; border: none; border-radius: 11px; padding: 16px;
  font-size: 15px; font-weight: 700; letter-spacing: 0.04em;
}
.fs-big-btn:hover { background: #1d4ed8; color: #fff; }
.fs-big-btn svg { width: 18px; height: 18px; }
.kbd { background: rgba(255,255,255,0.2); border-radius: 5px; padding: 2px 7px; font-size: 12px; font-weight: 600; }
.fs-tip { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--ws-muted); display: flex; align-items: center; justify-content: center; gap: 6px; }
.fs-tip .kbd { background: var(--ws-line); color: var(--ws-fg); }

.field-label { font-size: 12px; font-weight: 600; color: var(--ws-muted); margin: 0 0 8px; }
.opt-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.opt {
  flex: 1; min-width: 64px;
  display: flex; flex-direction: column; gap: 1px; align-items: center;
  border: 1px solid var(--ws-line); background: var(--ws-card); border-radius: 9px;
  padding: 9px 8px; cursor: pointer; color: var(--ws-fg); transition: all .12s ease;
}
.opt strong { font-size: 13px; font-weight: 600; }
.opt small { font-size: 10px; color: var(--ws-muted-2); }
/* opt chọn: XANH DƯƠNG khớp .seg-item.active/.size-item.active trang Screen (PO 2026-07-27) */
.opt.active { border-color: var(--ws-blue); background: var(--ws-blue-soft); color: var(--ws-blue); }
.opt.active small { color: var(--ws-blue); }
[data-bs-theme="dark"] .opt.active { background: #15233f; color: #60a5fa; }

/* .dl-green-btn: đặt tên "green" nhưng render XANH DƯƠNG cho khớp .dl-btn trang Screen (PO 2026-07-27) */
.dl-green-btn {
  margin-top: 6px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ws-blue); color: #fff; border: none; border-radius: 11px; padding: 15px;
  font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
}
.dl-green-btn:hover { background: #1d4ed8; color: #fff; }
.dl-green-btn svg { width: 18px; height: 18px; }

/* Right sidebar shades */
.shade-card {
  border: 1px solid var(--ws-line); border-radius: 16px; padding: 22px;
  background: var(--ws-card); box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.shade-card h2 { font-size: 18px; font-weight: 700; margin: 0 0 16px; color: var(--ws-fg); }
.shade-list { display: flex; flex-direction: column; gap: 8px; }
.shade-row {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--ws-line); border-radius: 12px; padding: 12px 14px;
  cursor: pointer; transition: all .12s ease;
}
.shade-row:hover { border-color: #cbd5e1; }
.shade-row.active { background: var(--ws-blue-soft); }
.shade-swatch {
  width: 44px; height: 44px; border-radius: 9px; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.1); position: relative;
  display: flex; align-items: center; justify-content: center;
}
.shade-thumb {
  width: 60px; height: 42px; border-radius: 8px; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.1); position: relative;
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
.shade-info .stag { font-size: 13px; color: var(--ws-muted); }
.shade-check { display: none; color: #fff; }
.shade-row.active .shade-check {
  display: flex; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ws-blue); align-items: center; justify-content: center;
}
.shade-check svg { width: 14px; height: 14px; }
.shade-info { flex: 1; }
.shade-info .sname { font-size: 15px; font-weight: 500; color: var(--ws-fg); display: block; }
.shade-info .shex { font-size: 13px; color: var(--ws-muted); font-variant-numeric: tabular-nums; }
.shade-fav { background: none; border: none; cursor: pointer; color: var(--ws-muted-2); display: flex; padding: 4px; }
.shade-fav svg { width: 19px; height: 19px; }
.shade-fav.on { color: var(--ws-blue); }
.shade-fav.on svg { fill: var(--ws-blue); }

/* Bottom quick rows */
.quick-block h3 { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--ws-muted); margin: 0 0 16px; }
.swatch-circles, .thumb-circles { display: flex; flex-wrap: wrap; gap: 16px; }
.circle-item, .thumb-item {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  cursor: pointer; text-decoration: none;
}
.circle-item { width: 78px; }
.thumb-item { width: 56px; }
.circle {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
  display: flex; align-items: center; justify-content: center; transition: transform .12s ease;
}
.circle-item:hover .circle { transform: scale(1.08); }
.circle-item.active .circle { box-shadow: 0 0 0 2px var(--ws-blue); border-color: var(--ws-blue); }
.circle.more, .thumb.more { background: var(--ws-hover); color: var(--ws-muted); font-size: 16px; letter-spacing: 1px; }
.thumb {
  width: 52px; height: 52px; border-radius: 50%;
  background-size: cover; background-position: center;
  border: 1px solid rgba(0,0,0,0.1); transition: transform .12s ease;
  display: flex; align-items: center; justify-content: center;
}
.thumb-item:hover .thumb { transform: scale(1.08); }
.circle-item .clabel, .thumb-item .clabel { font-size: 12px; color: var(--ws-muted);text-align:center; }

/* Avatar in header */
.avatar-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--ws-line); background: var(--ws-card);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ws-muted);
}
.avatar-btn svg { width: 18px; height: 18px; }

/* Responsive */
@media (max-width: 1199.98px) {
  .solid-grid { grid-template-columns: repeat(5, 1fr); }
  .theme-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767.98px) {
  .solid-grid { grid-template-columns: repeat(3, 1fr); }
  .theme-grid { grid-template-columns: repeat(2, 1fr); }
  .search { width: 100%; }
}

/* ===== Colour-temperature panel (Zoom Lighting screen) ===== */
.temp-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; background: transparent; cursor: pointer;
}
.temp-range::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, #ff3800, #ff8a1e 18%, #ffd7a8 38%, #fff5e8 52%, #ffffff 60%, #dceaff 78%, #a8c8ff 100%);
}
.temp-range::-moz-range-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, #ff3800, #ff8a1e 18%, #ffd7a8 38%, #fff5e8 52%, #ffffff 60%, #dceaff 78%, #a8c8ff 100%);
}
.temp-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 10px; height: 26px; margin-top: -9px;
  border-radius: 3px; background: var(--ws-fg);
  border: 2px solid var(--ws-card); box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.temp-range::-moz-range-thumb {
  width: 10px; height: 26px; border-radius: 3px;
  background: var(--ws-fg); border: 2px solid var(--ws-card);
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.temp-range:focus-visible { outline: 2px solid var(--ws-blue); outline-offset: 4px; }

.temp-readout { font-size: 15px; color: var(--ws-fg); }
.temp-field { display: inline-flex; align-items: baseline; gap: 6px; }
.temp-field .tlabel, .temp-field .tunit { font-size: 13px; color: var(--ws-muted); }
.temp-field output {
  font-variant-numeric: tabular-nums; font-weight: 600;
  border-bottom: 1px solid var(--ws-line); min-width: 44px; text-align: center;
}
.temp-rgb { display: inline-flex; gap: 16px; }
.temp-hex {
  border: 1px solid var(--ws-line); border-radius: 9px; padding: 6px 12px;
  font-size: 14px; font-weight: 600; color: var(--ws-fg);
  font-variant-numeric: tabular-nums;
}
.temp-hex:hover { border-color: var(--ws-blue); color: var(--ws-blue); }

.temp-preset {
  border: 1px solid var(--ws-line); background: var(--ws-card);
  border-radius: 999px; padding: 7px 14px;
  font-size: 13px; color: var(--ws-muted); cursor: pointer;
}
.temp-preset:hover { border-color: #cbd5e1; color: var(--ws-fg); }
.temp-preset.active { border-color: var(--ws-blue); background: var(--ws-blue-soft); color: var(--ws-blue); font-weight: 600; }

/* =========================================================
   Blog list
   ========================================================= */
.section-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ws-muted); margin: 0 0 18px;
}

.cat-pill {
  border: 1px solid var(--ws-line); background: var(--ws-card);
  border-radius: 999px; padding: 8px 16px;
  font-size: 14px; color: var(--ws-muted); cursor: pointer;
}
.cat-pill:hover { border-color: #cbd5e1; color: var(--ws-fg); }
.cat-pill.active { border-color: var(--ws-blue); background: var(--ws-blue-soft); color: var(--ws-blue); font-weight: 600; }

.post-chip {
  display: inline-block;
  background: var(--ws-blue-soft); color: var(--ws-blue);
  border-radius: 999px; padding: 4px 11px;
  font-size: 12px; font-weight: 600;
}
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ws-muted);
}
.post-meta .dot { color: var(--ws-muted-2); }

/* Featured */
.feature-card {
  display: grid; grid-template-columns: 1.1fr 1fr;
  border: 1px solid var(--ws-line); border-radius: 18px; overflow: hidden;
  background: var(--ws-card); text-decoration: none; color: inherit;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  transition: box-shadow .18s ease, transform .18s ease;
}
.feature-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.09); }
.feature-media { min-height: 300px; }
.feature-body { display: flex; flex-direction: column; gap: 14px; padding: 34px; }
.feature-title { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; color: var(--ws-fg); margin: 0; line-height: 1.25; }
.feature-excerpt { font-size: 16px; color: var(--ws-muted); line-height: 1.6; }
.post-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto;
  font-size: 15px; font-weight: 600; color: var(--ws-blue);
}
.post-more svg { width: 17px; height: 17px; }

/* Grid */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card {
  border: 1px solid var(--ws-line); border-radius: 16px; overflow: hidden;
  background: var(--ws-card); box-shadow: 0 1px 2px rgba(0,0,0,.03);
  transition: box-shadow .18s ease, transform .18s ease;
}
.post-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.08); }
.post-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.post-media { display: block; aspect-ratio: 16 / 9; }
.post-body { display: flex; flex-direction: column; gap: 10px; padding: 20px; flex: 1; }
.post-title { font-size: 17px; font-weight: 700; color: var(--ws-fg); margin: 0; line-height: 1.35; }
.post-excerpt { font-size: 14px; color: var(--ws-muted); line-height: 1.6; }
.post-foot { margin-top: auto; font-size: 13px; color: var(--ws-muted-2); }

.empty-note { color: var(--ws-muted); font-size: 15px; padding: 28px 0; text-align: center; }

/* =========================================================
   Article (post detail)
   ========================================================= */
.article-head { margin-bottom: 26px; }
.article-title {
  font-size: clamp(28px, 4vw, 42px); font-weight: 800; color: var(--ws-fg);
  line-height: 1.18; margin: 14px 0 12px; text-wrap: pretty;
}
.article-lead { font-size: 18px; color: var(--ws-muted); line-height: 1.6; margin: 0 0 20px; }
.article-byline { font-size: 14px; color: var(--ws-muted); }
.article-byline .dot { color: var(--ws-muted-2); }
.byline-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.1); display: inline-block;
}
.share-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--ws-line); background: var(--ws-card);
  border-radius: 9px; padding: 7px 13px;
  font-size: 13px; color: var(--ws-muted); cursor: pointer;
}
.share-btn:hover { border-color: var(--ws-blue); color: var(--ws-blue); }
.share-btn svg { width: 15px; height: 15px; }

.article-cover {
  width: 100%; aspect-ratio: 16 / 8; border-radius: 16px;
  border: 1px solid var(--ws-line); margin-bottom: 32px;
}

.article-body { font-size: 17px; line-height: 1.75; color: var(--ws-fg); }
.article-body p { margin: 0 0 20px; color: var(--ws-muted); text-wrap: pretty; }
.article-body h2 {
  font-size: 22px; font-weight: 700; color: var(--ws-fg);
  margin: 36px 0 14px; scroll-margin-top: 90px;
}
.article-body ul, .article-body ol { margin: 0 0 22px; padding-left: 22px; color: var(--ws-muted); }
.article-body li { margin-bottom: 10px; }
.article-body a { color: var(--ws-blue); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: #1d4ed8; }
.article-body strong { color: var(--ws-fg); }

.article-foot { border-top: 1px solid var(--ws-line); margin-top: 38px; padding-top: 22px; }
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--ws-blue); text-decoration: none;
}
.back-link svg { width: 17px; height: 17px; }

/* Sidebar */
.side-sticky { position: sticky; top: 24px; }
.toc-card, .side-card {
  border: 1px solid var(--ws-line); border-radius: 16px;
  padding: 20px; background: var(--ws-card);
}
.side-title {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ws-muted); margin: 0 0 14px;
}
.toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.toc-list a {
  display: block; padding: 7px 10px; border-radius: 8px;
  font-size: 14px; color: var(--ws-muted); text-decoration: none;
  border-left: 2px solid transparent;
}
.toc-list a:hover { background: var(--ws-hover); color: var(--ws-fg); }
.toc-list a.active { color: var(--ws-blue); border-left-color: var(--ws-blue); background: var(--ws-blue-soft); font-weight: 600; }

.side-swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.side-swatch {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--ws-line); border-radius: 10px; padding: 9px 11px;
  font-size: 14px; color: var(--ws-fg); text-decoration: none;
}
.side-swatch:hover { border-color: var(--ws-blue); color: var(--ws-blue); }
.ss-chip { width: 20px; height: 20px; border-radius: 5px; border: 1px solid rgba(0,0,0,.12); flex-shrink: 0; }

@media (max-width: 991.98px) {
  .feature-card { grid-template-columns: 1fr; }
  .feature-media { min-height: 200px; aspect-ratio: 16 / 9; }
  .feature-body { padding: 26px; }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .side-sticky { position: static; }
}
@media (max-width: 575.98px) {
  .post-grid { grid-template-columns: 1fr; }
  .side-swatches { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   DefaultV2 P04-T01 — view toggle list mode (backgrounds page).
   Template gốc chỉ đổi active nút; V2 áp layout list thật trên
   grid đã server-render (hub.js). Chỉ dùng cấu trúc, không màu mới.
   ========================================================= */
/* Trang /background (mode category): mỗi chuyên mục chỉ 1 hàng, cuộn ngang — người xem thấy ngay trang
   có 2 chuyên mục, mà vẫn liên kết được tới đủ hub (36 solid / 46 theme). Trang chuyên mục riêng
   (/solid-color-background, /theme-background) KHÔNG có class này nên giữ lưới nhiều hàng.
   :not(.list-view) — hub.js bật list view thì lưới 1 cột thắng, không cuộn ngang nữa. */
.solid-grid.one-row:not(.list-view),
.theme-grid.one-row:not(.list-view) {
  grid-template-columns: none;
  grid-auto-flow: column;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 10px;              /* chừa chỗ thanh cuộn, không đè lên chân thẻ */
}
/* Bề rộng cố định mới cuộn được (1fr sẽ co vừa khung, không tràn). clamp: hẹp lại trên mobile để
   vẫn lộ một phần thẻ kế tiếp — tín hiệu còn nội dung bên phải. */
.solid-grid.one-row:not(.list-view) { grid-auto-columns: clamp(120px, 30vw, 150px); }
.theme-grid.one-row:not(.list-view) { grid-auto-columns: clamp(180px, 55vw, 230px); }
.one-row:not(.list-view) .bg-card { scroll-snap-align: start; }

.solid-grid.list-view, .theme-grid.list-view { grid-template-columns: 1fr; }
.list-view .bg-card { flex-direction: row; align-items: center; gap: 14px; }
.list-view .bg-card .swatch, .list-view .bg-card.theme .swatch { width: 76px; flex-shrink: 0; }
.list-view .bg-card .name { margin: 0; flex: 1; }

/* =========================================================
   DefaultV2 P04-T02 — trang hub: ảnh thật <img> thay span màu/
   gradient của template; nút copy per-shade; trạng thái .active
   của common.js ánh xạ sang màu .on có sẵn của template.
   ========================================================= */
.detail-preview > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.thumb > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
button.thumb-item { background: none; border: none; padding: 0; }
.thumb-item.active .thumb { box-shadow: 0 0 0 2px var(--ws-blue); border-color: var(--ws-blue); }
.shade-copy { background: none; border: none; cursor: pointer; color: var(--ws-muted-2); display: flex; padding: 4px; }
.shade-copy svg { width: 17px; height: 17px; }
.shade-copy:hover, .shade-copy.copied { color: var(--ws-blue); }
.shade-fav.active { color: var(--ws-blue); }
.shade-fav.active svg { fill: var(--ws-blue); }
.detail-head .heart.active { color: #ef4444; } /* cùng giá trị .heart.on của template (trên) */
.detail-head .heart.active svg { fill: #ef4444; }

/* Fix visual-verify #1 (P04-T02): sidebar hub detail theo black-background.html.
   - .shade-thumb giờ là <span> chứa <img> + icon check của template (img absolute phủ kín,
     check position:relative để nổi trên img — .shade-thumb đã relative + flex center);
   - .circle chứa <img> thumb hub thật (quick row SOLID COLORS — không có cột hex, ADR-008.4);
   - shade-list giới hạn chiều cao ≈ 8 row như sidebar template (hub 40+ ảnh không kéo dài trang). */
.shade-thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.shade-thumb .shade-check { position: relative; }
.circle > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
#hub-detail-root .shade-list { max-height: 600px; overflow-y: auto; }

/* =========================================================
   DefaultV2 P04-T03 — blog: <img> ảnh thật thay span background
   (ImgN — ADR-008.4, bỏ gradient cover của template).
   ========================================================= */
img.feature-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    height: auto !important
}
img.post-media { width: 100%; object-fit: cover;height:auto !important }

/* =========================================================
   DefaultV2 P04-T04 — post: ảnh bìa <img> + an toàn nội dung
   DescN từ CKEditor (Technical Note spec: img co giãn, bảng cuộn
   ngang trong khối — không tràn trang).
   ========================================================= */
img.article-cover { object-fit: cover; }
.post-content img { max-width: 100% !important; height: auto !important; }
.post-content table { display: block; overflow-x: auto; max-width: 100%; }

/* =========================================================
   DefaultV2 visual-verify #5 — blog list
   ========================================================= */

/* Khối SEO chuyên mục (DescM) chuyển xuống cuối trang: chiếm trọn container nhưng giới hạn
   bề rộng đọc và căn giữa. Ở vị trí cũ (cạnh ô Search) khối bị ép thành cột ~25% chiều rộng. */
.blog-seo { max-width: 800px; margin: 40px auto 0; }

/* Ảnh bài viết thiếu file trên môi trường đang chạy (repo chưa đồng bộ ảnh admin upload trên prod):
   giữ ô ảnh là nền placeholder thay vì khung trắng. Khung KHÔNG sập vì .post-media đã có
   aspect-ratio 16/9 và .feature-media có min-height ở trên. */
img.post-media, img.feature-media { background: var(--ws-line-soft); }

/* =========================================================
   DefaultV2 ADR-016 — trang tĩnh (StaticPage.ascx)
   ========================================================= */

/* Giới hạn bề rộng đọc + căn giữa trong container-xl: văn bản dài chạy hết 1116px sẽ vượt xa
   độ dài dòng dễ đọc. KHÔNG thêm rule typography — `.article-body` đã đạt đúng spec PO
   (17px / 1.75 / h2 margin-top 36px, dòng 381–391). */
.static-page { max-width: 800px; margin-inline: auto; }

/* =========================================================
   Quảng cáo (P06). Khối ads luôn là .box-media — hợp đồng với js/v2/ads.js (gỡ đúng khối này
   khi user đã dùng hết lượt click). Hai dạng do admin chọn trong CMS bằng 2 mã vị trí riêng:
   - mặc định: nằm trong luồng, đẩy nội dung dưới nó xuống ("hiển thị");
   - .box-media-overlay: đè lên phần nội dung phía sau, không chiếm chỗ ("ẩn" — giữ cách bố trí AS-IS).
   ========================================================= */
.box-media { width: 100%; margin: 12px 0; text-align: center; overflow: hidden; }
.box-media > * { max-width: 100%; }
.box-media img { height: auto; }

/* Mỗi vị trí ads có khung neo riêng, cao 0 khi ở dạng đè. Neo vào chính chỗ đặt ads thay vì vào
   phần tử cha: 2 placeholder sidebar nằm NGOÀI .panel (con trực tiếp của .col-*, là class Bootstrap
   dùng chung toàn site nên không đặt position lên đó được) — thiếu mốc thì absolute nhảy ra giữa
   màn hình theo viewport. */
/* width: khung giữa trang screen là flex align-items:center nên slot co theo nội dung; nội dung ở
   dạng đè lại là absolute (không tính kích thước) → slot rộng 0 và ads cũng rộng 0. */
.ads-slot { position: relative; width: 100%; }

/* Dạng đè: vẽ từ đúng chỗ đặt ads đổ xuống, không chiếm chỗ trong luồng. */
.box-media-overlay {
  position: absolute; left: 0; right: 0; top: 0;
  z-index: 99999999999; margin: 0;
  opacity:0;
  visibility:hidden;
  background: var(--ws-card);
}

/* Vị trí khung xem trước (PO): khung chứa là chính #preview — nó đã sẵn position: relative và KHÔNG
   overflow: hidden nên ads tràn ra ngoài được. Khối cao 60% ô và neo đáy, tức bắt đầu ở 40% chiều cao;
   iframe quảng cáo cao hơn 60% thì phần dư tràn xuống dưới ô, KHÔNG bị cắt.
   Ghi đè .box-media (overflow: hidden) và .box-media-overlay (top: 0) nhờ selector có #id. */
#preview > .box-media {
  position: absolute; left: 0; right: 0; bottom: 0; top: auto;
  height: 60%; margin: 0; z-index: 3;
  overflow: visible; background: transparent;
}