/*
 * One Dark / One Light — trang bio công khai. html.od = One Light (sáng), html.od.dark = One Dark (tối)
 * Tài liệu: docs/21-design-system-one-dark.md · docs/23-one-dark-migration.md (23.4)
 *
 * frontend/static/css/tailwind.css là bản build sẵn, nên file này:
 *   1. ghi đè các class dark:* có trong bản build bằng giá trị One Dark (phần TỰ SINH),
 *   2. định nghĩa component One Dark cho link card, nút, trang page/detail, lỗi, skeleton,
 *   3. thêm thanh đường dẫn, status bar (.od-only) và bố cục desktop (≥ 1024px),
 *   4. ghi đè các class màu sáng của bản build sang One Light (phần TỰ SINH 2).
 */

/* ---------- Font (OFL, tự host) ---------- */
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/BeVietnamPro-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/BeVietnamPro-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/BeVietnamPro-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/BeVietnamPro-Bold.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/JetBrainsMono-Medium.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/JetBrainsMono-Bold.woff2') format('woff2'); }

/* ---------- Token ---------- */
/* One Light — mặc định (chế độ sáng). Màu cú pháp đậm hơn bản gốc Atom để chữ đạt ≥ 4.5:1. */
html.od {
  color-scheme: light;
  --od-deep: #dcdcdd;
  --od-inset: #ffffff;
  --od-panel: #f0f0f1;
  --od-base: #fafafa;
  --od-raised: #ffffff;
  --od-selected: #e5e5e6;
  --od-border: #dbdbdc;
  --od-border-strong: #c8c8ca;
  --od-hover: #f5f5f6;
  --od-strong: #232324;
  --od-text: #383a42;
  --od-soft: #383a42;
  --od-muted: #696c77;
  --od-comment: #7f8189;
  --od-faint: #a0a1a7;
  --od-on-accent: #ffffff;
  --od-blue: #2f6ae0;
  --od-blue-hover: #2558c4;
  --od-green: #367a35;
  --od-yellow: #946500;
  --od-red: #d13d30;
  --od-purple: #a626a4;
  --od-cyan: #0076a8;
  --od-orange: #986801;
  --od-blue-rgb: 47 106 224;
  --od-green-rgb: 54 122 53;
  --od-yellow-rgb: 148 101 0;
  --od-red-rgb: 209 61 48;
  --od-purple-rgb: 166 38 164;
  --od-cyan-rgb: 0 118 168;
  --od-orange-rgb: 152 104 1;
  --od-shimmer: rgba(255, 255, 255, 0.7);
  --od-shadow-pop: 0 12px 32px rgba(17, 24, 39, 0.12);
  --od-accent: var(--od-blue);
  --od-sans: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --od-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* One Dark — chế độ tối */
html.od.dark {
  color-scheme: dark;
  --od-deep: #181a1f;
  --od-inset: #1b1f23;
  --od-panel: #21252b;
  --od-base: #282c34;
  --od-raised: #2c313a;
  --od-selected: #3e4451;
  --od-border: #3a3f4b;
  --od-border-strong: #4b5263;
  --od-strong: #e6e8ec;
  --od-text: #abb2bf;
  --od-soft: #d7dae0;
  --od-muted: #9198a3;
  --od-comment: #7f848e;
  --od-faint: #5c6370;
  --od-on-accent: #1b1f23;
  --od-blue: #61afef;
  --od-green: #98c379;
  --od-yellow: #e5c07b;
  --od-red: #e06c75;
  --od-purple: #c678dd;
  --od-cyan: #56b6c2;
  --od-orange: #d19a66;
  --od-hover: var(--od-hover);
  --od-blue-hover: var(--od-blue-hover);
  --od-blue-rgb: 97 175 239;
  --od-green-rgb: 152 195 121;
  --od-yellow-rgb: 229 192 123;
  --od-red-rgb: 224 108 117;
  --od-purple-rgb: 198 120 221;
  --od-cyan-rgb: 86 182 194;
  --od-orange-rgb: 209 154 102;
  --od-shimmer: rgba(255, 255, 255, 0.05);
  --od-shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.5);
  --od-accent: var(--od-blue);
  --od-sans: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --od-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Nền & chữ ---------- */
html.od body {
  background-image: none;
  background-color: var(--od-base);
  color: var(--od-text);
  font-family: var(--od-sans);
  letter-spacing: 0;
}
html.od ::selection { background: var(--od-selected); }
html.od :where(a, button, [role='button']):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--od-blue-rgb) / 0.4);
}

/* ========== 1. Ghi đè class dark:* của tailwind.css (TỰ SINH — scripts: xem docs/23) ========== */
.dark\:border-gray-500\/50:is(.dark *){border-color:rgb(75 82 99 / 0.5)}
.dark\:border-gray-600:is(.dark *){border-color:rgb(58 63 75)}
.dark\:border-gray-600\/60:is(.dark *){border-color:rgb(58 63 75 / 0.6)}
.dark\:border-gray-600\/80:is(.dark *){border-color:rgb(58 63 75 / 0.8)}
.dark\:border-gray-700\/80:is(.dark *){border-color:rgb(58 63 75 / 0.8)}
.dark\:bg-gray-100:is(.dark *){background-color:rgb(230 232 236)}
.dark\:bg-gray-600:is(.dark *){background-color:rgb(62 68 81)}
.dark\:bg-gray-600\/80:is(.dark *){background-color:rgb(62 68 81 / 0.8)}
.dark\:bg-gray-700:is(.dark *){background-color:rgb(44 49 58)}
.dark\:bg-gray-700\/40:is(.dark *){background-color:rgb(44 49 58 / 0.4)}
.dark\:bg-gray-700\/50:is(.dark *){background-color:rgb(44 49 58 / 0.5)}
.dark\:bg-gray-800:is(.dark *){background-color:rgb(44 49 58)}
.dark\:bg-gray-800\/40:is(.dark *){background-color:rgb(44 49 58 / 0.4)}
.dark\:bg-gray-800\/80:is(.dark *){background-color:rgb(44 49 58 / 0.8)}
.dark\:bg-gray-800\/90:is(.dark *){background-color:rgb(44 49 58 / 0.9)}
.dark\:bg-gray-900:is(.dark *){background-color:rgb(40 44 52)}
.dark\:bg-gray-950\/95:is(.dark *){background-color:rgb(27 31 35 / 0.95)}
.dark\:bg-red-900\/30:is(.dark *){background-color:rgb(224 108 117 / 0.135)}
.dark\:text-gray-100:is(.dark *){color:rgb(230 232 236)}
.dark\:text-gray-200:is(.dark *){color:rgb(215 218 224)}
.dark\:text-gray-300:is(.dark *){color:rgb(171 178 191)}
.dark\:text-gray-400:is(.dark *){color:rgb(145 152 163)}
.dark\:text-gray-500:is(.dark *){color:rgb(145 152 163)}
.dark\:text-gray-600:is(.dark *){color:rgb(92 99 112)}
.dark\:text-gray-900:is(.dark *){color:rgb(27 31 35)}
.dark\:text-red-400:is(.dark *){color:rgb(224 108 117)}
.dark\:text-sky-400:is(.dark *){color:rgb(97 175 239)}
.dark\:hover\:border-blue-700\/40:hover:is(.dark *){border-color:rgb(97 175 239 / 0.4)}
.dark\:hover\:border-gray-500\/50:hover:is(.dark *){border-color:rgb(75 82 99 / 0.5)}
.dark\:hover\:bg-blue-900\/30:hover:is(.dark *){background-color:rgb(97 175 239 / 0.135)}
.dark\:hover\:bg-gray-200:hover:is(.dark *){background-color:rgb(215 218 224)}
.dark\:hover\:bg-gray-500:hover:is(.dark *){background-color:rgb(75 82 99)}
.dark\:hover\:bg-gray-600\/80:hover:is(.dark *){background-color:rgb(62 68 81 / 0.8)}
.dark\:hover\:bg-gray-700:hover:is(.dark *){background-color:rgb(44 49 58)}
.dark\:hover\:bg-gray-700\/90:hover:is(.dark *){background-color:rgb(44 49 58 / 0.9)}
.dark\:hover\:text-gray-100:hover:is(.dark *){color:rgb(230 232 236)}
.dark\:hover\:text-gray-200:hover:is(.dark *){color:rgb(215 218 224)}
.dark\:hover\:text-gray-400:hover:is(.dark *){color:rgb(145 152 163)}
.dark\:hover\:text-sky-300:hover:is(.dark *){color:rgb(140 196 245)}
.dark\:active\:bg-gray-600\/20:active:is(.dark *){background-color:rgb(62 68 81 / 0.2)}
.group:hover .dark\:group-hover\:border-blue-700\/40:is(.dark *){border-color:rgb(97 175 239 / 0.4)}
.group:hover .dark\:group-hover\:bg-blue-900\/20:is(.dark *){background-color:rgb(97 175 239 / 0.09)}
.group:hover .dark\:group-hover\:bg-gray-500\/80:is(.dark *){background-color:rgb(75 82 99 / 0.8)}
.group:hover .dark\:group-hover\:text-gray-100:is(.dark *){color:rgb(230 232 236)}
.group:hover .dark\:group-hover\:text-gray-200:is(.dark *){color:rgb(215 218 224)}
.group:hover .dark\:group-hover\:text-gray-400:is(.dark *){color:rgb(145 152 163)}
.group:hover .dark\:group-hover\:text-sky-400:is(.dark *){color:rgb(97 175 239)}

/* Ring/focus (biến --tw-ring-color) */
.dark\:ring-gray-600\/50:is(.dark *) { --tw-ring-color: rgb(58 63 75 / 0.5); }
.dark\:hover\:ring-gray-500:hover:is(.dark *) { --tw-ring-color: rgb(75 82 99); }
.dark\:focus\:ring-gray-500:focus:is(.dark *) { --tw-ring-color: rgb(var(--od-blue-rgb) / 0.6); }

/* ========== 1b. Ghi đè class màu sáng của tailwind.css → One Light (TỰ SINH, chỉ khi không ở chế độ tối) ========== */
html.od:not(.dark) .border-gray-100{border-color:rgb(240 240 241)}
html.od:not(.dark) .border-gray-100\/80{border-color:rgb(240 240 241 / 0.8)}
html.od:not(.dark) .border-gray-200{border-color:rgb(229 229 230)}
html.od:not(.dark) .border-gray-200\/80{border-color:rgb(229 229 230 / 0.8)}
html.od:not(.dark) .bg-gray-100{background-color:rgb(240 240 241)}
html.od:not(.dark) .bg-gray-100\/80{background-color:rgb(240 240 241 / 0.8)}
html.od:not(.dark) .bg-gray-200{background-color:rgb(229 229 230)}
html.od:not(.dark) .bg-gray-200\/50{background-color:rgb(229 229 230 / 0.5)}
html.od:not(.dark) .bg-gray-200\/90{background-color:rgb(229 229 230 / 0.9)}
html.od:not(.dark) .bg-gray-50{background-color:rgb(250 250 250)}
html.od:not(.dark) .bg-gray-50\/80{background-color:rgb(250 250 250 / 0.8)}
html.od:not(.dark) .bg-gray-900{background-color:rgb(35 35 36)}
html.od:not(.dark) .bg-gray-900\/95{background-color:rgb(35 35 36 / 0.95)}
html.od:not(.dark) .from-gray-50{--tw-gradient-from:rgb(250 250 250) var(--tw-gradient-from-position);--tw-gradient-to:rgb(250 250 250 / 0.0) var(--tw-gradient-to-position)}
html.od:not(.dark) .via-gray-100\/95{--tw-gradient-to:rgb(240 240 241 / 0.0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgb(240 240 241 / 0.95) var(--tw-gradient-via-position),var(--tw-gradient-to)}
html.od:not(.dark) .to-gray-200\/90{--tw-gradient-to:rgb(229 229 230 / 0.9) var(--tw-gradient-to-position)}
html.od:not(.dark) .text-blue-600{color:rgb(47 106 224)}
html.od:not(.dark) .text-gray-200{color:rgb(229 229 230)}
html.od:not(.dark) .text-gray-400{color:rgb(142 143 150)}
html.od:not(.dark) .text-gray-500{color:rgb(105 108 119)}
html.od:not(.dark) .text-gray-600{color:rgb(95 98 108)}
html.od:not(.dark) .text-gray-700{color:rgb(56 58 66)}
html.od:not(.dark) .text-gray-800{color:rgb(44 46 52)}
html.od:not(.dark) .text-gray-900{color:rgb(35 35 36)}
html.od:not(.dark) .text-red-600{color:rgb(209 61 48)}
html.od:not(.dark) .hover\:border-gray-200\/80:hover{border-color:rgb(229 229 230 / 0.8)}
html.od:not(.dark) .hover\:bg-blue-100:hover{background-color:rgb(221 231 251)}
html.od:not(.dark) .hover\:bg-gray-100:hover{background-color:rgb(240 240 241)}
html.od:not(.dark) .hover\:bg-gray-200\/80:hover{background-color:rgb(229 229 230 / 0.8)}
html.od:not(.dark) .hover\:bg-gray-300:hover{background-color:rgb(219 219 220)}
html.od:not(.dark) .hover\:bg-gray-50:hover{background-color:rgb(250 250 250)}
html.od:not(.dark) .hover\:bg-gray-800:hover{background-color:rgb(44 46 52)}
html.od:not(.dark) .hover\:text-blue-700:hover{color:rgb(37 88 196)}
html.od:not(.dark) .hover\:text-gray-800:hover{color:rgb(44 46 52)}
html.od:not(.dark) .hover\:text-gray-900:hover{color:rgb(35 35 36)}
html.od:not(.dark) .hover\:ring-gray-400:hover{--tw-ring-color:rgb(142 143 150)}
html.od:not(.dark) .focus\:ring-gray-400:focus{--tw-ring-color:rgb(142 143 150)}
html.od:not(.dark) .active\:bg-gray-100\/60:active{background-color:rgb(240 240 241 / 0.6)}
html.od:not(.dark) .group:hover .group-hover\:bg-blue-50{background-color:rgb(238 243 253)}
html.od:not(.dark) .group:hover .group-hover\:bg-gray-200\/80{background-color:rgb(229 229 230 / 0.8)}
html.od:not(.dark) .group:hover .group-hover\:text-blue-600{color:rgb(47 106 224)}
html.od:not(.dark) .group:hover .group-hover\:text-gray-600{color:rgb(95 98 108)}
html.od:not(.dark) .group:hover .group-hover\:text-gray-700{color:rgb(56 58 66)}
html.od:not(.dark) .group:hover .group-hover\:text-gray-900{color:rgb(35 35 36)}

/* ========== 2. Component ========== */

/* Phần tử của giao diện One (hiện ở cả hai chế độ) / phần tử cũ của giao diện Cupertino (ẩn) */
.od-only { display: none !important; }
html.od .od-only { display: flex !important; }
html.od .od-light-only { display: none !important; }

/* Thanh tiêu đề ~/… đã bỏ (docs/23.10): không còn khung cố định trên cùng */

/* Status bar dưới cùng đã bỏ (docs/23.12) */

/* Nút đổi giao diện nổi ở góc trên phải (không còn thanh tiêu đề để tựa vào) */
html.od .od-theme-toggle { top: 12px; right: 12px; }
html.od .od-theme-toggle > .btn-cupertino-icon {
  background: var(--od-raised); border-color: var(--od-border);
  box-shadow: var(--od-shadow-pop);
}

/* Nút icon tròn (back, theme) */
html.od .btn-cupertino-icon {
  background: transparent; color: var(--od-text);
  border-color: transparent; box-shadow: none; border-radius: 6px;
}
html.od .btn-cupertino-icon:hover { background: var(--od-raised); color: var(--od-strong); border-color: var(--od-border); box-shadow: none; }
html.od .btn-cupertino-chip { color: var(--od-soft); background: var(--od-raised); border-color: var(--od-border); box-shadow: none; border-radius: 6px; }
html.od .btn-cupertino-chip:hover { color: var(--od-strong); background: var(--od-selected); border-color: var(--od-border-strong); box-shadow: none; }
html.od .btn-cupertino-text { color: var(--od-muted); }
html.od .btn-cupertino-text:hover { color: var(--od-soft); }
html.od .btn-cupertino-icon-inverse { background: rgb(24 26 31 / 0.8); border-color: var(--od-border); color: var(--od-strong); }
html.od .btn-cupertino-icon-inverse:hover { background: var(--od-selected); }
html.od .surface-cupertino { background: var(--od-raised); border-color: var(--od-border); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.od .surface-cupertino-hover:hover { border-color: var(--od-border-strong); }
html.od .surface-cupertino-divider { border-top-color: var(--od-border); }

/* Avatar — viền màu nhấn */
html.od .od-avatar { border: 2px solid var(--od-accent) !important; box-shadow: 0 0 0 3px var(--od-panel) !important; background: var(--od-selected) !important; }

/* Mạng xã hội — ô vuông bo 10px */
html.od .od-social { border-radius: 10px !important; background: var(--od-raised) !important; border-color: var(--od-border) !important; }
html.od .od-social:hover { background: var(--od-selected) !important; transform: none !important; }
html.od .od-social { color: var(--od-text); }
html.od .od-social:hover { color: var(--od-strong); }
html.od .od-social .od-icon-img { display: none; }

/* Segmented Profile / Gallery */
html.od .od-seg { background: var(--od-inset) !important; border: 1px solid var(--od-border); border-radius: 8px; padding: 4px; }
html.od .od-seg .od-seg-btn { border-radius: 5px; color: var(--od-muted); box-shadow: none; }
html.od .od-seg .od-seg-btn.shadow-sm { background: var(--od-selected); color: var(--od-strong); font-weight: 600; }

/* Link card */
html.od .link-card {
  background: var(--od-raised); border: 1px solid var(--od-border);
  border-radius: 10px; padding: 12px 14px; gap: 14px;
  color: var(--od-strong); box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html.od .link-card:hover { background: var(--od-hover); border-color: var(--od-border-strong); box-shadow: none; transform: none; }
html.od .link-card:active { transform: scale(0.995); }
html.od .link-card .font-medium { font-weight: 600; color: var(--od-strong); }

/* Ô icon của link card: tô màu cú pháp bằng mask (thay cho invert) */
html.od .od-link-icon { border-radius: 8px !important; background: rgb(var(--od-tone) / 0.14) !important; color: rgb(var(--od-tone)) !important; }
html.od .group:hover .od-link-icon { background: rgb(var(--od-tone) / 0.2) !important; }
html.od .od-link-icon .od-icon-img { display: none; }
.od-icon-mask { display: none; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--od-icon) center / contain no-repeat; mask: var(--od-icon) center / contain no-repeat; }
html.od .od-icon-mask { display: block; }
.od-tone-0 { --od-tone: var(--od-blue-rgb); }   /* blue */
.od-tone-1 { --od-tone: var(--od-red-rgb); }  /* red */
.od-tone-2 { --od-tone: var(--od-yellow-rgb); }  /* yellow */
.od-tone-3 { --od-tone: var(--od-green-rgb); }  /* green */
.od-tone-4 { --od-tone: var(--od-purple-rgb); }  /* purple */
.od-tone-5 { --od-tone: var(--od-orange-rgb); }  /* orange */
.od-tone-page { --od-tone: var(--od-cyan-rgb); } /* cyan — link nội bộ */

/* Badge "page" */
.od-badge {
  align-items: center; flex-shrink: 0;
  font: 500 10px/1 var(--od-mono); padding: 3px 6px; border-radius: 4px;
  color: var(--od-cyan); background: rgb(var(--od-cyan-rgb) / 0.12);
}

/* Mũi tên ↗ cho link ngoài (docs/21.7) — link page chỉ có badge */
.od-ext-arrow { flex-shrink: 0; color: var(--od-muted); transition: color .15s ease; }
html.od .link-card:hover .od-ext-arrow { color: var(--od-accent); }

/* Menu giao diện */
html.od .od-theme-menu { background: var(--od-raised) !important; border-color: var(--od-border) !important; border-radius: 10px !important; box-shadow: var(--od-shadow-pop) !important; padding: 6px !important; }
html.od .od-theme-menu button { border-radius: 6px; color: var(--od-text); }
html.od .od-theme-menu button:hover { background: var(--od-hover); }
html.od .od-theme-menu button.font-medium { background: var(--od-selected) !important; color: var(--od-strong); font-weight: 600; }

/* Gallery */
html.od .od-gallery-tile { border-color: var(--od-base) !important; }
html.od .od-gallery-tile:hover { --tw-ring-color: var(--od-accent); }

/* Footer trang chủ */
html.od .od-footer { color: var(--od-muted); }

/* ---------- Skeleton (màn tải) ---------- */
@keyframes od-shimmer { 0% { background-position: -240px 0; } 100% { background-position: 240px 0; } }
@keyframes od-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@keyframes od-blink { 50% { opacity: 0; } }
.od-sk {
  background-color: var(--od-raised);
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, var(--od-shimmer) 50%, rgba(255,255,255,0) 100%);
  background-size: 240px 100%; background-repeat: no-repeat;
  border-radius: 4px; animation: od-shimmer 1.3s linear infinite;
}
html.od .od-loading { background: var(--od-base) !important; }
.od-loading-inner { flex-direction: column; width: 100%; max-width: 28rem; padding: 76px 16px 0; gap: 20px; box-sizing: border-box; align-self: flex-start; }
.od-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; overflow: hidden; }
.od-progress::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; background: var(--od-accent); animation: od-indeterminate 1.1s ease-in-out infinite; }
.od-cursor { color: var(--od-accent); animation: od-blink 1s steps(1) infinite; }

/* ---------- Trang danh sách (page.html) ---------- */
html.od .page-card { background: var(--od-raised); border: 1px solid var(--od-border); border-radius: 10px; color: var(--od-text); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.od .page-card--link:hover { background: var(--od-hover); border-color: var(--od-border-strong); box-shadow: none; }
html.od .page-card--link:active { background: var(--od-raised); }
html.od .page-card__img { background: var(--od-selected); border-radius: 8px; }
html.od .page-card__title { color: var(--od-strong); }
html.od .page-card__chevron { color: var(--od-muted); }
html.od .page-card__desc { color: var(--od-muted); }
html.od .page-card__btn { background: var(--od-accent); color: var(--od-on-accent); border-radius: 6px; font-family: var(--od-sans); }
html.od .page-card__btn:hover { filter: brightness(1.08); }
html.od .page-card__btn--ext { background: var(--od-selected); color: var(--od-soft); }
html.od .page-card__btn--ext:hover { background: var(--od-border-strong); filter: none; }
html.od .od-page-title { font-size: 1.75rem; line-height: 1.25; font-weight: 700; color: var(--od-strong); }
/* Danh sách đánh số mono + đường dẫn file (artboard Bio-Page) */
.od-page-num { font: 500 13px/1.5 var(--od-mono); color: var(--od-orange); flex-shrink: 0; min-width: 1.5rem; padding-top: 1px; }
.od-page-meta { font: 11px/1.4 var(--od-mono); margin-top: 4px; color: var(--od-green); }
.od-page-meta--ext { color: var(--od-blue); }
html.od .page-card { align-items: flex-start; }
.page-card[hidden] { display: none !important; }
.od-page-search {
  align-items: center; gap: 8px; height: 44px; padding: 0 12px; margin-bottom: 1rem;
  border-radius: 10px; background: var(--od-inset); border: 1px solid var(--od-border); color: var(--od-muted);
}
.od-page-search:focus-within { border-color: var(--od-accent); box-shadow: 0 0 0 3px rgb(var(--od-blue-rgb) / 0.18); }
.od-page-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--od-strong); font: 14px/1 var(--od-sans); }
.od-page-search input::placeholder { color: var(--od-comment); }
.od-page-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.od-page-empty { font: italic 12px/1.6 var(--od-mono); color: var(--od-comment); padding: 1.5rem 0; text-align: center; }
.od-page-count { font: italic 12px/1.4 var(--od-mono); color: var(--od-comment); }

/* ---------- Trang chi tiết (detail.html) ---------- */
html.od .detail-article { background: transparent; border: none; box-shadow: none; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.od .detail-article__inner { padding-left: 2px; padding-right: 2px; }
html.od .detail-header__title { color: var(--od-soft); font-weight: 500; }
html.od .dialog-content { color: var(--od-text); letter-spacing: 0; line-height: 1.7; }
html.od .dialog-content h1 { color: var(--od-strong); border-bottom-color: var(--od-border); }
/* Tiêu đề bài: detail.html đặt color: inherit (cùng độ ưu tiên) → chữ bị xám như thân bài */
html.od .detail-article__inner h1:first-child { color: var(--od-strong); font-size: 1.625rem; font-weight: 700; line-height: 1.3; border-bottom: none; padding-bottom: 0; }
html.od .dialog-content h2 { color: var(--od-strong); }
html.od .dialog-content h2::before { content: '## '; color: var(--od-red); font-family: var(--od-mono); font-weight: 500; }
html.od .dialog-content h3 { color: var(--od-soft); }
html.od .dialog-content li::marker { color: var(--od-muted); }
html.od .dialog-content ul { list-style: disc; }
html.od .dialog-content ol { list-style: decimal; }
html.od .dialog-content a { color: var(--od-blue); border-bottom-color: rgb(var(--od-blue-rgb) / 0.4); }
html.od .dialog-content a:hover { color: var(--od-blue-hover); border-bottom-color: currentColor; }
html.od .dialog-content blockquote { border: 1px solid rgb(var(--od-yellow-rgb) / 0.3); border-left: 3px solid var(--od-yellow); background: rgb(var(--od-yellow-rgb) / 0.08); color: var(--od-soft); border-radius: 6px; }
html.od .dialog-content code { font-family: var(--od-mono); background: var(--od-selected); color: var(--od-yellow); border: none; box-shadow: none; border-radius: 4px; padding: 0.1em 0.4em; }
html.od .dialog-content pre { background: var(--od-panel); border: 1px solid var(--od-deep); box-shadow: none; border-radius: 8px; }
html.od .dialog-content pre::before { background-color: var(--od-panel); border-bottom-color: var(--od-deep); }
html.od .dialog-content pre code { background: transparent; color: var(--od-text); padding: 12px 14px; }
/* Tô màu cú pháp tối giản (detail.html, chỉ One Dark) */
html.od .dialog-content pre .od-tk-c { color: var(--od-comment); font-style: italic; }
html.od .dialog-content pre .od-tk-s { color: var(--od-green); }
html.od .dialog-content pre .od-tk-k { color: var(--od-purple); }
html.od .dialog-content pre .od-tk-n { color: var(--od-orange); }
html.od .dialog-content pre .od-tk-f { color: var(--od-blue); }
html.od .dialog-content hr { border-top-color: var(--od-border); }

/* Thanh tiến độ đọc dưới thanh đường dẫn */
.od-read-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 30; background: var(--od-accent); transition: width .1s linear; }
html.od .dialog-content img { box-shadow: none; border-radius: 8px; }
html.od .dialog-content strong { color: var(--od-strong); }

/* ---------- Trang lỗi (404/500) ---------- */
.od-error-code { font-family: var(--od-mono); }
html.od .od-error-code { color: var(--od-selected) !important; letter-spacing: -0.04em; }
html.od .od-error-code .od-hl-red { color: var(--od-red); }
html.od .od-error-code .od-hl-yellow { color: var(--od-yellow); }
html.od .od-error-snippet { display: block !important; }
.od-error-snippet {
  margin: 0; width: 100%; box-sizing: border-box; text-align: left; white-space: pre-wrap;
  padding: 12px 14px; border-radius: 8px; background: var(--od-panel); border: 1px solid var(--od-deep);
  font: 12px/1.7 var(--od-mono); color: var(--od-text);
}
html.od .od-error-btn { background: var(--od-accent) !important; color: var(--od-on-accent) !important; border-radius: 8px !important; font-weight: 600 !important; }
html.od .od-error-btn:hover { filter: brightness(1.08); }
html.od .od-btn-secondary-both { background: var(--od-raised); border-color: var(--od-border); color: var(--od-soft); border-radius: 8px; }
html.od .od-btn-secondary-both:hover { background: var(--od-selected); }
/* 500: hai nút cùng hàng, chia đều (artboard Bio-500) — không xuống dòng ở 390px */
html.od .od-error-actions { width: 100%; flex-wrap: nowrap; }
html.od .od-error-actions > * { flex: 1 1 0; min-width: 0; padding-left: 12px; padding-right: 12px; white-space: nowrap; }
.od-btn-secondary { display: none; }
html.od .od-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: 8px; font-size: 0.875rem; font-weight: 500;
  border: 1px solid var(--od-border); background: var(--od-raised); color: var(--od-soft); cursor: pointer;
}
html.od .od-btn-secondary:hover { background: var(--od-selected); }
.od-c-purple { color: var(--od-purple); } .od-c-green { color: var(--od-green); } .od-c-red { color: var(--od-red); } .od-c-comment { color: var(--od-comment); font-style: italic; }

/* ---------- Thanh cuộn ---------- */
html.od * { scrollbar-color: var(--od-border-strong) transparent; }
html.od *::-webkit-scrollbar-thumb { background: var(--od-selected); }
html.od *::-webkit-scrollbar-thumb:hover { background: var(--od-border-strong); }

/* Giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  .od-sk, .od-progress::after, .od-cursor, .animate-spin { animation: none !important; }
}

/* ========== 3. Bố cục desktop (≥ 1024px) — thích ứng từ bố cục điện thoại ========== */
/* Điện thoại: một cột như cũ. Desktop: hồ sơ thành thẻ cố định bên trái, liên kết/gallery bên phải. */
@media (min-width: 1024px) {
  html.od body > main { padding-top: 48px; padding-bottom: 32px; }
  /* min-height = 100vh trừ padding main (48 + 32) để trang vừa khít, không cuộn thừa */
  html.od .od-wrap, html.od .page-list, html.od .detail-page { min-height: calc(100vh - 80px) !important; }
  html.od .od-wrap { max-width: 1120px !important; padding: 0 16px; box-sizing: border-box; }
  html.od .od-main {
    display: grid; grid-template-columns: 340px minmax(0, 1fr);
    /* thẻ hồ sơ trải 8 hàng: 7 hàng ôm nội dung, phần cao dư dồn vào hàng cuối */
    grid-template-rows: repeat(7, min-content) 1fr;
    column-gap: 48px; row-gap: 20px; align-items: start;
  }
  html.od .od-main > * { grid-column: 2; min-width: 0; }
  html.od .od-main > .od-profile {
    grid-column: 1; grid-row: 1 / span 8;
    position: sticky; top: 48px; margin-bottom: 0 !important;
    padding: 32px 24px 28px; border-radius: 12px;
    background: var(--od-panel); border: 1px solid var(--od-border);
  }
  html.od .od-main > .od-tabs { max-width: 320px; margin-bottom: 0; }
  html.od .od-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  html.od .od-links > * { margin-top: 0 !important; }
  html.od .od-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  html.od .od-gallery .od-gallery-tile { border-radius: 8px; border-width: 0 !important; }
  /* footer căn giữa dưới cột phải (340px hồ sơ + 48px khoảng cách), không lệch giữa trang */
  html.od .od-footer { margin: 0 0 0 388px; max-width: none; }

  /* /page/<id>: danh sách 2 cột */
  html.od .page-list { max-width: 960px; }
  html.od .od-page-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
  html.od .od-page-grid > * { margin-top: 0 !important; }
  html.od .od-page-grid > .od-page-empty { grid-column: 1 / -1; }

  /* /d/<path>: cột đọc rộng hơn */
  html.od .detail-page { max-width: 760px; }
}