/* ==========================================================================
   FixBox – giao diện mới (bản 28/10/2026), nạp sau fixbox.css khi bật công tắc layout_v2 (inc/v2.php).
   Dùng lại token màu / font của fixbox.css (--c-*, --f-*, --fx-sec-*). Mọi class mới bắt đầu bằng fx2-.
   Mốc màn hình: < 480 điện thoại nhỏ · < 768 điện thoại · 768–1023 máy tính bảng dọc · 1024–1199 máy tính bảng ngang /
   laptop nhỏ · ≥ 1200 menu đầy đủ (JS đo lại, thiếu chỗ thì về menu ba gạch) · ≥ 1280 cột quảng cáo phải.
   Nguyên tắc chống vỡ khung: phần tử con của grid / flex có min-width: 0, tiêu đề được ngắt dòng ở bất kỳ đâu khi cần,
   ảnh nằm trong khung tỉ lệ cố định, không có chiều rộng cứng nào lớn hơn 300px ngoài cột quảng cáo (chỉ hiện từ 1280px).
   ========================================================================== */

.fx2 {
	--fx2-radius: 14px;
	--fx2-shadow: 0 14px 36px -18px rgba(38, 34, 30, .38);
	--fx2-wide: max(var(--fx-gutter, 16px), calc((100% - 1320px) / 2));
	--fx2-search-line: var(--c-ink);
	--fx2-lead: var(--c-ink-2);
}
/* Nền tối (người dùng 29/10: đầu trang chủ nhìn rối, nền sáng thì đẹp). Nền sáng gọn vì thẻ FixBox Tools là khối ĐẢO MÀU duy nhất (tối trên
   nền sáng) và chữ mô tả dịu; nền tối cũ: thẻ Tools cùng tông với nền + viền, chữ mô tả sáng gần bằng tiêu đề → mọi thứ cùng độ sáng.
   Soi gương nền sáng: thẻ Tools thành khối kem chữ tối (nút tối), chữ mô tả + từ khoá dịu xuống, ô tìm viền dịu. */
:root[data-theme="dark"] .fx2 {
	--fx2-search-line: var(--c-line-strong);
	--fx2-lead: var(--c-muted);
}
:root[data-theme="dark"] .fx2-tools { --fx-band: #EDE5D4; --fx-band-text: #1E1A16; --fx-band-muted: #4A4239; --fx-band-border: transparent; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .fx2 {
		--fx2-search-line: var(--c-line-strong);
		--fx2-lead: var(--c-muted);
	}
	:root:not([data-theme="light"]) .fx2-tools { --fx-band: #EDE5D4; --fx-band-text: #1E1A16; --fx-band-muted: #4A4239; --fx-band-border: transparent; }
}
.fx2-wrap { padding-inline: var(--fx-pad, 16px); box-sizing: border-box; } /* Dự phòng 16px: lề vẫn còn nếu fixbox.css nạp chậm. */
.fx2-lib .fx2-wrap { --fx-pad: var(--fx2-wide); }
.fx2 h1, .fx2 h2, .fx2 h3, .fx2-card__title, .fx2-item__title, .fx2-start__text b, .fx2-topic__name, .fx2-tools__title { overflow-wrap: anywhere; }
.fx2 .fx-prefix { overflow-wrap: normal; }

/* ---------- Dải nhắc bản xem trước (chỉ máy thử) ---------- */
.fx2-preview { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 16px; padding: 8px var(--fx-pad); background: var(--c-ink); color: var(--c-paper); font: 400 13px/1.45 var(--f-sans); text-align: center; }
.fx2-preview b { font-weight: 600; }
.fx2-preview a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.fx2-preview a:hover { color: inherit; opacity: .8; }
@media (max-width: 767px) { .fx2-preview__more { display: none; } }

/* ==========================================================================
   Header
   ========================================================================== */
.fx2-header { position: relative; z-index: 30; background: var(--c-paper); border-bottom: 1px solid var(--c-line); }
.fx2-bar { display: flex; align-items: center; gap: 12px; min-height: 60px; padding-inline: var(--fx-pad); box-sizing: border-box; }
.fx2-bar .fx-brand { flex: none; }
.fx2-nav { display: none; flex: 1 1 auto; min-width: 0; }
.fx2-nav > ul { display: flex; align-items: center; justify-content: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.fx2-nav li { flex: none; }
.fx2-nav a, .fx2-more summary { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 9px; border-radius: 8px; font: 500 14.5px/1 var(--f-sans); color: var(--c-ink); white-space: nowrap; }
.fx2-nav a:hover, .fx2-more summary:hover { background: var(--c-paper-alt); color: var(--c-ink); }
.fx2-nav a.is-current, .fx2-more summary.is-current { color: var(--c-accent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--c-accent); border-radius: 8px 8px 0 0; }
.fx2-more { position: relative; }
.fx2-more summary { cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; }
.fx2-more summary::-webkit-details-marker { display: none; }
.fx2-more summary .fx-icon { transition: transform .15s; }
.fx2-more[open] summary { background: var(--c-paper-alt); }
.fx2-more[open] summary .fx-icon { transform: rotate(180deg); }
.fx2-more__list { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 200px; margin: 0; padding: 6px; list-style: none; background: var(--c-card); border: 1px solid var(--c-line); border-radius: 12px; box-shadow: var(--fx2-shadow); }
.fx2-more__list a { display: flex; width: 100%; box-sizing: border-box; }
.fx2-more__list a[aria-current] { color: var(--c-accent); font-weight: 600; }

.fx2-actions { display: flex; flex: none; align-items: center; gap: 2px; margin-left: auto; }
.fx2-searchbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 40px; height: 40px; padding: 0 11px; box-sizing: border-box; border: 1px solid var(--c-line-strong); border-radius: 999px; background: var(--c-card); color: var(--c-ink); font: 500 14px/1 var(--f-sans); cursor: pointer; }
.fx2-searchbtn span { display: none; }
.fx2-searchbtn:hover, .fx2-searchbtn[aria-expanded="true"] { border-color: var(--c-ink); }
.fx2-header .fx-lang { margin-left: 2px; }
.fx2-lang-top, .fx2-theme-top, .fx2-yt { display: none !important; }
.fx2-yt { color: var(--c-ink); }
.fx2-yt:hover { color: var(--c-accent); }
.fx2-header .fx-header__signin { display: none; margin-left: 2px; padding: 12px 6px; }
.fx2-burger .fx-icon--close { display: none; }
.fx2-burger[aria-expanded="true"] .fx-icon--menu { display: none; }
.fx2-burger[aria-expanded="true"] .fx-icon--close { display: block; }

@media (max-width: 399px) {
	.fx2-bar { gap: 6px; }
	.fx2-bar .fx-brand { gap: 8px; }
	.fx2-bar .fx-brand__logo { width: 34px; height: 34px; }
	.fx2-bar .fx-brand__text { font-size: 14px; }
}
@media (min-width: 480px) {
	.fx2-header .fx-header__signin { display: inline-block; }
}
@media (min-width: 768px) {
	.fx2-bar { min-height: 68px; gap: 16px; }
	.fx2-lang-top { display: inline-block !important; }
	.fx2-theme-top, .fx2-yt { display: inline-flex !important; }
}
/* Menu đầy đủ khi đủ rộng (≥ 1280px: đo 28/10 — chữ tiếng Việt cần ~560px, tiếng Anh ~620px). assets/js/v2.js đo lại thật:
   tràn thì bỏ chữ "Tìm kiếm" (.fx2-header--nolabel), vẫn tràn thì dùng menu ba gạch (.fx2-header--compact). */
@media (min-width: 1280px) {
	.fx2-header:not(.fx2-header--compact) .fx2-nav { display: block; }
	.fx2-header:not(.fx2-header--compact) .fx2-burger,
	.fx2-header:not(.fx2-header--compact) .fx2-menu { display: none !important; }
}
@media (min-width: 1440px) {
	.fx2-header:not(.fx2-header--nolabel) .fx2-searchbtn { padding: 0 16px 0 13px; }
	.fx2-header:not(.fx2-header--nolabel) .fx2-searchbtn span { display: inline; }
}

/* Ô tìm kiếm thả xuống */
.fx2-search { padding: 18px var(--fx-pad); background: var(--c-card); border-top: 1px solid var(--c-line); }
.fx2-search__in { display: grid; gap: 12px; max-width: 760px; margin: 0 auto; }

/* Menu ba gạch */
.fx2-menu { padding: 4px var(--fx-pad) 24px; background: var(--c-card); border-top: 1px solid var(--c-line); box-shadow: var(--fx2-shadow); }
.fx2-menu ul { margin: 0; padding: 0; list-style: none; }
.fx2-menu__main { display: grid; }
.fx2-menu__main a { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--c-line); color: var(--c-ink); }
.fx2-menu__main a[aria-current] b { color: var(--c-accent); }
.fx2-menu__icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--c-paper-alt); color: var(--c-ink); }
.fx2-menu__text { min-width: 0; }
.fx2-menu__text b { display: block; font: 600 16px/1.3 var(--f-sans); }
.fx2-menu__text small { display: block; margin-top: 2px; font: 400 13px/1.4 var(--f-sans); color: var(--c-muted); }
.fx2-menu__more { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0 !important; }
.fx2-menu__more a { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border: 1px solid var(--c-line-strong); border-radius: 999px; font: 600 14px var(--f-sans); color: var(--c-ink); }
.fx2-menu__more a[aria-current] { border-color: var(--c-accent); color: var(--c-accent); }
.fx2-menu__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fx2-menu__foot .fx-pill, .fx2-menu__foot .fx-btn { height: 42px; }
.fx2-menu__theme { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border: 1px solid var(--c-line-strong); border-radius: 999px; background: transparent; color: var(--c-ink); font: 600 14px var(--f-sans); cursor: pointer; }
.fx2-menu .fx-lang--menu { margin: 0; }
@media (min-width: 640px) {
	.fx2-menu__main { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
}

/* ==========================================================================
   Ô tìm kiếm (header, trang chủ, thư viện) + từ khoá gợi ý
   ========================================================================== */
.fx2-searchform { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 5px 0 14px; box-sizing: border-box; background: var(--c-field); border: 1.5px solid var(--fx2-search-line, var(--c-ink)); border-radius: var(--fx2-radius); transition: border-color .15s, box-shadow .15s; }
.fx2-searchform:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 16%, transparent); }
.fx2-searchform__icon { display: flex; flex: none; color: var(--c-muted); }
.fx2-searchform input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--c-ink); font: 400 16px var(--f-sans); outline: none; text-overflow: ellipsis; }
.fx2-searchform input::placeholder { color: var(--c-muted); opacity: 1; }
.fx2-searchform input::-webkit-search-cancel-button { cursor: pointer; }
.fx2-searchform__go { flex: none; height: 40px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--c-accent); color: var(--c-on-accent); font: 600 15px var(--f-sans); cursor: pointer; }
.fx2-searchform__go:hover { background: color-mix(in srgb, var(--c-accent) 85%, var(--c-ink)); }
.fx2-searchform--hero { height: 56px; }
.fx2-searchform--hero .fx2-searchform__go { height: 44px; }
.fx2-searchform--lib { height: 46px; border-width: 1px; border-color: var(--c-line-strong); }
.fx2-searchform--lib .fx2-searchform__go { height: 36px; padding: 0 14px; font-size: 14px; }

.fx2-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font: 400 13px/1.4 var(--f-sans); color: var(--c-muted); }
/* Từ khoá + dòng số bài dưới ô tìm: thông tin phụ → dịu hơn chữ chính (người dùng 29/10, "để thoáng mắt"): chữ xám phụ (--c-muted, tương phản
   5,8:1 nền sáng / 6,5:1 nền tối — vẫn trên mức đọc tốt 4,5:1), nền trong suốt, viền nhạt; rê chuột / chạm thì đậm lại để biết bấm được. */
.fx2-popular a { padding: 4px 12px; border: 1px solid var(--c-line); border-radius: 999px; background: transparent; color: var(--c-muted); transition: border-color .15s, color .15s; }
.fx2-popular a:hover, .fx2-popular a:focus-visible { border-color: var(--c-ink); color: var(--c-ink); }

/* Ô màu lĩnh vực (dùng --p của .fx-prefix--<lĩnh vực>, fixbox.css) */
.fx2-tile { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--p, var(--c-ink)); background: color-mix(in srgb, var(--p, var(--c-ink)) 13%, transparent); }

/* ==========================================================================
   Trang chủ
   ========================================================================== */
.fx2-hero { display: grid; gap: 18px; padding-block: 24px 6px; }
.fx2-hero__copy { min-width: 0; }
.fx2-eyebrow { margin: 0 0 8px; font: 600 12px/1.3 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); }
.fx2-hero__title { margin: 0 0 10px; font: 700 clamp(27px, 3.4vw, 40px)/1.15 var(--f-serif); letter-spacing: -.01em; text-wrap: balance; }
.fx2-hero__lead { max-width: 64ch; margin: 0 0 18px; font: 400 15.5px/1.6 var(--f-sans); color: var(--fx2-lead, var(--c-ink-2)); }
.fx2-hero .fx2-popular { margin-top: 10px; }
.fx2-hero__facts { margin: 12px 0 0; font: 400 12.5px/1.5 var(--f-sans); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.fx2-hero__facts b { font-weight: 500; color: inherit; }
@media (max-width: 639px) { .fx2-hero__facts { display: none; } } /* Điện thoại: số bài đã có ở thẻ lĩnh vực ngay dưới → bớt một dòng. */

/* Thẻ FixBox Tools: máy tính = thẻ đầy đủ bên phải; điện thoại / máy tính bảng = dải gọn một hàng. */
.fx2-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; padding: 14px 16px; border: 1px solid var(--fx-band-border); border-radius: var(--fx2-radius); background: var(--fx-band); color: var(--fx-band-text); }
.fx2-tools:hover { color: var(--fx-band-text); }
.fx2-tools__kicker { display: inline-flex; flex-basis: 100%; align-items: center; gap: 8px; font: 600 12px/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; opacity: .78; }
/* text-wrap: pretty (không dùng balance): balance chia đôi câu → điện thoại xuống dòng sau "ESP32", thừa nửa khung (người dùng 29/10).
   pretty lấp đầy dòng, chỉ tránh để một chữ lẻ ở dòng cuối. */
.fx2-tools__title { flex: 1 1 200px; min-width: 0; font: 700 17px/1.3 var(--f-serif); text-wrap: pretty; }
.fx2-tools__steps { display: none; margin: 0; padding-left: 20px; font: 400 14px/1.5 var(--f-sans); color: var(--fx-band-muted); }
.fx2-tools__go { flex: none; display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--fx-band-text); color: var(--fx-band); font: 600 13.5px var(--f-sans); white-space: nowrap; transition: background-color .15s, color .15s; }
.fx2-tools:hover .fx2-tools__go, .fx2-tools:focus-visible .fx2-tools__go { background: var(--c-accent); color: var(--c-on-accent); }
@media (min-width: 1024px) {
	.fx2-hero { grid-template-columns: minmax(0, 1fr) 330px; gap: 48px; align-items: center; padding-block: 40px 14px; }
	.fx2-tools { display: grid; gap: 12px; align-content: start; padding: 22px; border-radius: 18px; }
	.fx2-tools__title { font-size: 21px; line-height: 1.25; }
	.fx2-tools__steps { display: grid; gap: 3px; }
	.fx2-tools__go { justify-self: start; height: 40px; padding: 0 18px; }
}

.fx2-sec { padding-block: 24px; }
.fx2-sec__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 16px; }
.fx2-sec__head h2, .fx2-start__head h2 { margin: 0; font: 700 clamp(21px, 2.3vw, 27px)/1.25 var(--f-serif); text-wrap: balance; }

/* 5 lĩnh vực. Icon bên PHẢI (người dùng 29/10: icon chiếm một hàng riêng phía trên-trái → thẻ cao, thừa khoảng trống bên phải).
   Điện thoại giữ lưới 2 cột như cũ (thẻ cuối trải 2 cột) — thẻ chỉ còn ~129px chữ, "Nhà thông minh" cần 123px → không đặt icon cạnh tên
   được mà không gãy chữ: hàng trên "số bài · icon", dưới là tên (một dòng) + chủ đề. Máy tính bảng / máy tính: "tên · icon" một hàng,
   số bài dưới tên. Máy tính bảng 3 + 2; 5 cột từ 1280px (1100–1279px thẻ hẹp, tên dài lại gãy dòng). */
.fx2-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fx2-topic { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "count icon" "name name" "subs subs"; align-items: center; align-content: start; gap: 4px 10px; min-width: 0; padding: 14px 12px 14px 14px; border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-card); color: var(--c-ink); transition: border-color .15s, transform .15s; }
.fx2-topic:hover, .fx2-topic:focus-visible { border-color: var(--p); color: var(--c-ink); transform: translateY(-2px); }
.fx2-topic .fx2-tile { grid-area: icon; width: 38px; height: 38px; border-radius: 11px; }
.fx2-topic__name { grid-area: name; min-width: 0; margin-top: 6px; font: 700 16px/1.3 var(--f-sans); }
.fx2-topic__count { grid-area: count; min-width: 0; font: 600 13px/1.3 var(--f-sans); color: var(--p); font-variant-numeric: tabular-nums; }
.fx2-topic__subs { grid-area: subs; min-width: 0; font: 400 13px/1.5 var(--f-sans); color: var(--c-muted); }
.fx2-topic:nth-child(5):last-child { grid-column: 1 / -1; }
@media (min-width: 640px) {
	.fx2-topic { grid-template-areas: "name icon" "count icon" "subs subs"; align-items: start; gap: 2px 12px; padding: 16px; }
	.fx2-topic .fx2-tile { width: 42px; height: 42px; border-radius: 12px; }
	.fx2-topic__name { align-self: end; margin-top: 0; font-size: 16.5px; }
	.fx2-topic__subs { margin-top: 8px; }
}
@media (min-width: 768px) and (max-width: 1279px) {
	.fx2-topics { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
	.fx2-topic { grid-column: span 2; }
	.fx2-topic:nth-child(4), .fx2-topic:nth-child(5):last-child { grid-column: span 3; }
}
@media (min-width: 1280px) {
	.fx2-topics { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
	.fx2-topic { padding: 18px; }
	.fx2-topic:nth-child(5):last-child { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.fx2-topic { transition: none; }
	.fx2-topic:hover, .fx2-topic:focus-visible { transform: none; }
}

/* Bắt đầu từ đây (số thứ tự = thứ tự nên đọc) */
.fx2-start { padding-block: 4px 24px; }
.fx2-start__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.fx2-start__head p { margin: 4px 0 0; font: 400 14px/1.5 var(--f-sans); color: var(--c-muted); }
.fx2-start__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fx2-start__list li { min-width: 0; }
.fx2-start__list a { display: flex; align-items: flex-start; gap: 14px; height: 100%; box-sizing: border-box; padding: 16px; border-radius: var(--fx2-radius); background: var(--c-paper-alt); color: var(--c-ink); }
.fx2-start__list a:hover { background: color-mix(in srgb, var(--c-paper-alt) 70%, var(--c-line)); color: var(--c-ink); }
.fx2-start__n { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--c-ink); color: var(--c-paper); font: 700 14px/1 var(--f-sans); }
.fx2-start__text { min-width: 0; }
.fx2-start__text b { display: block; font: 600 15px/1.4 var(--f-sans); }
.fx2-start__text small { display: block; margin-top: 4px; font: 400 12.5px/1.4 var(--f-sans); color: var(--c-muted); }
@media (min-width: 900px) { .fx2-start__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Thẻ bài */
/* Mỗi bài một khung nhạt (nền thẻ + viền mảnh) — người dùng 29/10: 2 hàng thẻ không khung nhìn dính / rối, tách xa vẫn rối.
   Khung tách bạch từng bài nên khoảng cách giữa thẻ trở lại vừa phải; rê chuột: viền đậm + bóng nhẹ. */
.fx2-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 640px) { .fx2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1000px) { .fx2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.fx2-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 10px 10px 14px; box-sizing: border-box; border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-card); transition: border-color .15s, box-shadow .15s; }
.fx2-card:hover, .fx2-card:focus-within { border-color: var(--c-line-strong); box-shadow: var(--fx2-shadow); }
.fx2-card__body { min-width: 0; padding: 0 4px; }
.fx2-card__media { position: relative; flex: none; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .fx2-card { transition: none; } }
.fx2-card__media .fx-ph, .fx2-item__media .fx-ph { border: 0; }
.fx2-card__kind { margin: 0 0 4px; font: 600 11.5px/1.3 var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.fx2-card__title { margin: 0; font: 700 18px/1.35 var(--f-serif); text-wrap: pretty; }
.fx2-card__title a { color: var(--c-ink); }
.fx2-card__title a:hover { color: var(--c-accent); }
.fx2-card__meta, .fx2-item__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; font: 400 13px/1.4 var(--f-sans); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.fx2-play { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; background: rgba(20, 17, 14, .74); color: #fff; font: 600 11px/1.3 var(--f-sans); }
/* Điện thoại: thẻ dạng hàng (ảnh nhỏ bên trái) cho Bài mới + 2 dự án nổi bật sau, dự án đầu giữ ảnh lớn. */
@media (max-width: 639px) {
	/* align-items: flex-start — mặc định stretch kéo khung ảnh cao bằng phần chữ (ảnh bị cắt thành khung đứng, thấy 29/10). */
	.fx2-panel .fx2-card, .fx2-feat .fx2-card:not(:first-child) { flex-direction: row; align-items: flex-start; gap: 12px; padding: 10px; }
	.fx2-panel .fx2-card__body, .fx2-feat .fx2-card:not(:first-child) .fx2-card__body { padding: 2px 2px 0 0; }
	.fx2-panel .fx2-card__media, .fx2-feat .fx2-card:not(:first-child) .fx2-card__media { width: 112px; aspect-ratio: 4 / 3; border-radius: 10px; }
	.fx2-panel .fx2-card__title, .fx2-feat .fx2-card:not(:first-child) .fx2-card__title { font-size: 16px; }
	.fx2-panel .fx2-play span, .fx2-feat .fx2-card:not(:first-child) .fx2-play span { display: none; }
	.fx2-panel .fx2-play, .fx2-feat .fx2-card:not(:first-child) .fx2-play { right: 6px; bottom: 6px; padding: 3px 5px; }
	.fx2-panel .fx2-grid, .fx2-feat .fx2-grid { gap: 10px; }
}
/* Máy tính bảng (lưới 2 cột): 3 dự án nổi bật → thẻ đầu nằm ngang trải 2 cột, 2 thẻ sau một hàng (không còn thẻ lẻ một mình). */
@media (min-width: 640px) and (max-width: 999px) {
	.fx2-feat .fx2-card:first-child:not(:last-child) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: center; }
	.fx2-feat .fx2-card:first-child:not(:last-child) .fx2-card__title { font-size: 21px; }
}

/* Tab Bài mới */
.fx2-tabs { display: flex; gap: 2px; margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--c-line); }
.fx2-tabs::-webkit-scrollbar { display: none; }
.fx2-tab { flex: none; margin-bottom: -1px; padding: 10px 13px; border-bottom: 2px solid transparent; font: 500 15px/1.2 var(--f-sans); color: var(--c-muted); white-space: nowrap; }
.fx2-tab:hover { color: var(--c-ink); }
.fx2-tab[aria-selected="true"] { border-bottom-color: var(--c-accent); color: var(--c-ink); font-weight: 600; }
.fx2-panel__more { margin: 20px 0 0; }

/* Cộng đồng + email */
.fx2-band { margin-top: 24px; background: var(--c-paper-alt); border-top: 1px solid var(--c-line); }
.fx2-band__grid { display: grid; gap: 28px; padding-block: 36px; }
.fx2-band__col { min-width: 0; }
.fx2-band h2 { margin: 0 0 8px; font: 700 23px/1.25 var(--f-serif); }
.fx2-band__col > p { max-width: 56ch; margin: 0 0 10px; font: 400 15px/1.6 var(--f-sans); color: var(--c-ink-2); }
.fx2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fx2-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; box-sizing: border-box; border: 1px solid var(--c-line-strong); border-radius: 999px; background: var(--c-card); color: var(--c-ink); font: 600 14px var(--f-sans); }
.fx2-chip:hover { border-color: var(--c-ink); color: var(--c-ink); }
.fx2-chip .fx-icon { flex: none; color: var(--p, currentColor); }
.fx2-band .fx2-newsletter { padding: 22px; border-radius: 16px; }
.fx2-band .fx2-newsletter p { font-family: var(--f-sans); font-size: 15px; }
.fx2-band .fx2-newsletter input[type="email"], .fx2-band .fx2-newsletter .fx-btn { border-radius: 10px; }
@media (min-width: 900px) {
	.fx2-band__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; align-items: center; padding-block: 52px; }
}

/* ==========================================================================
   Quảng cáo (khung giữ chỗ trên máy thử + ô AdSense thật)
   ========================================================================== */
.fx2 .fx-ad { margin: 0; }
.fx2 .fx-ad__demo { box-sizing: border-box; padding: 16px 20px; border-radius: 12px; line-height: 1.5; text-align: center; }
.fx2-adrow { padding-block: 10px; }
.fx2-adrow .fx-ad { max-width: 970px; margin: 0 auto; }
/* Ô ngang (trang chủ, đầu trang Tải về, dưới công cụ, đầu Cộng đồng): giữ chỗ thấp để không đẩy nội dung xuống. */
.fx2 :is(.fx-ad--home, .fx-ad--download-top, .fx-ad--download-end) :is(.fx-ad__demo, .adsbygoogle) { min-height: 100px; }
@media (min-width: 768px) { .fx2 :is(.fx-ad--home, .fx-ad--download-top, .fx-ad--download-end) :is(.fx-ad__demo, .adsbygoogle) { min-height: 110px; } }
.fx2-list .fx-ad--list { padding: 18px 0; border-bottom: 1px solid var(--c-line); }
.fx2-list .fx-ad--list .fx-ad__demo, .fx2-list .fx-ad--list .adsbygoogle { min-height: 140px; }
.fx2 .fx-ad--rail { width: 300px; max-width: 100%; }
.fx2 .fx-ad--rail .fx-ad__demo, .fx2 .fx-ad--rail .adsbygoogle { min-height: 600px; }

/* ==========================================================================
   Chân trang
   ========================================================================== */
.fx2-footer { padding: 36px var(--fx-pad) 22px; border-top: 1px solid var(--c-line); background: var(--c-paper); font-family: var(--f-sans); }
.fx2-footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
.fx2-footer__grid > * { min-width: 0; }
.fx2-footer__about { grid-column: 1 / -1; }
.fx2-footer__about p { max-width: 44ch; margin: 14px 0 10px; font-size: 14px; line-height: 1.6; color: var(--c-ink-2); }
.fx2-footer__social { display: flex; gap: 2px; margin-left: -10px; }
.fx2-footer__social a { color: var(--c-ink-2); }
.fx2-footer__social a:hover { color: var(--c-accent); }
.fx2-footer__title { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.fx2-footer ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.fx2-footer__col a { display: inline-block; padding: 5px 0; font-size: 14.5px; color: var(--c-ink-2); }
.fx2-footer__col a:hover { color: var(--c-accent); }
.fx2-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--c-line); font-size: 13px; color: var(--c-muted); }
.fx2-footer__bottom p { margin: 0; }
.fx2-footer__safe { display: inline-flex; flex: 1 1 300px; align-items: flex-start; gap: 6px; }
.fx2-footer__safe .fx-icon { flex: none; margin-top: 1px; }
.fx2-footer__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; max-width: 100%; margin-left: auto; }
.fx2-footer__tools .fx-theme-toggle { display: inline-flex; }
.fx2-lang .fx-lang__list { top: auto; bottom: 100%; margin: 0 0 4px; }
@media (min-width: 900px) {
	.fx2-footer { padding-top: 52px; }
	.fx2-footer__grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
	.fx2-footer__about { grid-column: auto; }
}

/* ==========================================================================
   Thư viện: lĩnh vực, Dự án, thẻ, tìm kiếm
   ========================================================================== */
.fx2-lib__head { display: grid; gap: 14px; padding-block: 20px 18px; }
.fx2-lib__title { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.fx2-lib__title .fx2-tile { width: 50px; height: 50px; border-radius: 14px; }
.fx2-lib__titletext { min-width: 0; }
.fx2-lib__title h1 { margin: 0; font: 700 clamp(26px, 3.2vw, 38px)/1.15 var(--f-serif); letter-spacing: -.01em; }
.fx2-lib__title p { max-width: 72ch; margin: 6px 0 0; font: 400 15px/1.55 var(--f-sans); color: var(--c-ink-2); }
.fx2-lib__find { min-width: 0; max-width: 640px; }
@media (min-width: 1024px) {
	.fx2-lib__head { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); align-items: end; column-gap: 40px; padding-block: 26px 22px; }
	.fx2-lib__head .fx-crumbs { grid-column: 1 / -1; }
	.fx2-lib__find { max-width: none; }
}

.fx2-lib__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; padding-block: 4px 56px; }
.fx2-lib__main { min-width: 0; }
.fx2-rail { display: none; align-self: stretch; } /* cao bằng cả hàng để phần bên trong dính được khi cuộn */
.fx2-rail__sticky { position: sticky; top: 24px; display: grid; gap: 20px; }
@media (min-width: 1024px) {
	.fx2-lib__body { grid-template-columns: 220px minmax(0, 1fr); gap: 36px; }
}
@media (min-width: 1280px) {
	.fx2-lib__body--rail { grid-template-columns: 220px minmax(0, 1fr) 300px; }
	.fx2-lib__body--rail .fx2-rail { display: block; }
}

/* Trang Dự án: tab kiểu Chrome (fixbox.css) + khung tab chứa cột lọc và danh sách */
.fx2-projects { padding-bottom: 56px; }
.fx2-projects .fx-ctabs { margin-top: 0; }
.fx2-projects .fx2-lib__body { padding-block: 12px 8px; }
@media (min-width: 768px) {
	.fx2-projects .fx-ctabpanel { padding: 12px 24px 24px; }
}

/* Cột lọc */
.fx2-side { display: none; min-width: 0; }
.fx2-side.is-open { display: block; padding: 18px 16px 4px; border: 1px solid var(--c-line); border-radius: var(--fx2-radius); background: var(--c-card); }
.fx2-fgroup { min-width: 0; margin: 0 0 20px; padding: 0; border: 0; }
.fx2-fgroup legend, .fx2-fgroup__title { margin: 0 0 8px; padding: 0; font: 700 12px/1.3 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
label.fx2-fgroup__title { display: block; }
.fx2-opt { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 8px; border-radius: 8px; font: 400 14.5px/1.3 var(--f-sans); color: var(--c-ink); cursor: pointer; }
.fx2-opt:hover { background: var(--c-paper-alt); }
.fx2-opt input { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--c-accent); cursor: pointer; }
.fx2-opt:has(input:checked) { background: color-mix(in srgb, var(--c-accent) 10%, transparent); font-weight: 600; }
.fx2-opt:has(input:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.fx2-opt__label { flex: 1; min-width: 0; }
.fx2-opt__n { flex: none; margin-left: auto; font: 400 12.5px/1 var(--f-sans); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.fx2-moreopts summary { display: inline-flex; align-items: center; min-height: 36px; padding: 0 8px; border-radius: 8px; font: 600 13px var(--f-sans); color: var(--c-accent); cursor: pointer; list-style: none; }
.fx2-moreopts summary::-webkit-details-marker { display: none; }
.fx2-moreopts summary:hover { background: var(--c-paper-alt); }
.fx2-moreopts[open] summary { display: none; }
.fx2-select { width: 100%; height: 42px; padding: 0 36px 0 12px; box-sizing: border-box; border: 1px solid var(--c-line-strong); border-radius: 10px; background: var(--c-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A8072' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--c-ink); font: 400 14.5px var(--f-sans); -webkit-appearance: none; appearance: none; cursor: pointer; }
.fx2-select:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.fx2-fgroup--links ul { margin: 0; padding: 0; list-style: none; }
.fx2-fgroup--links a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px; border-radius: 8px; font: 400 14.5px/1.3 var(--f-sans); color: var(--c-ink); }
.fx2-fgroup--links a:hover { background: var(--c-paper-alt); color: var(--c-ink); }
.fx2-fgroup--links a[aria-current] { background: var(--c-paper-alt); font-weight: 600; }
.fx2-fgroup--links a > span:nth-child(2) { flex: 1; min-width: 0; }
.fx2-dot { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--p, var(--c-muted)); }
.fx2-filters .fx-btn { margin: 0 0 20px; }
.fx2-filters.is-loading { opacity: .55; pointer-events: none; }
@media (min-width: 1024px) {
	.fx2-side { display: block; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
	.fx2-side.is-open { padding: 0; border: 0; background: none; }
}

/* Thanh trên danh sách */
.fx2-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding-bottom: 14px; border-bottom: 1px solid var(--c-line); }
.fx2-toolbar__count { margin: 0 auto 0 0; font: 400 14.5px/1.4 var(--f-sans); color: var(--c-ink-2); }
.fx2-toolbar__count b { color: var(--c-ink); font-variant-numeric: tabular-nums; }
.fx2-toolbar__count q { font-weight: 600; color: var(--c-ink); }
.fx2-toolbar__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; order: 3; width: 100%; }
.fx2-active { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px 0 12px; box-sizing: border-box; border-radius: 999px; background: var(--c-ink); color: var(--c-paper); font: 600 13px/1.2 var(--f-sans); }
.fx2-active:hover { background: var(--c-accent); color: var(--c-on-accent); }
.fx2-clear { padding: 6px; font: 600 13px var(--f-sans); color: var(--c-accent); }
.fx2-filterbtn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--c-line-strong); border-radius: 999px; background: var(--c-card); color: var(--c-ink); font: 600 14px var(--f-sans); cursor: pointer; }
.fx2-filterbtn[aria-expanded="true"] { border-color: var(--c-ink); }
.fx2-filterbtn__n { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; display: grid; place-items: center; border-radius: 10px; background: var(--c-accent); color: var(--c-on-accent); font-size: 12px; }
@media (min-width: 1024px) {
	.fx2-filterbtn { display: none; }
	.fx2-toolbar__chips { order: 0; width: auto; }
}

/* Dòng bài */
.fx2-list { display: grid; }
.fx2-item { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--c-line); }
.fx2-item__media { position: relative; aspect-ratio: 4 / 3; max-width: 100%; border-radius: 10px; }
.fx2-item__body { min-width: 0; }
.fx2-item__top { margin: 0 0 4px; font: 600 11.5px/1.35 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.fx2-item__title { margin: 0; font: 700 17px/1.35 var(--f-serif); text-wrap: pretty; }
.fx2-item__title a { color: var(--c-ink); }
.fx2-item__title a:hover { color: var(--c-accent); }
.fx2-item__excerpt { display: none; margin: 6px 0 0; font: 400 14.5px/1.55 var(--f-sans); color: var(--c-ink-2); }
.fx2-item__meta { font-size: 12.5px; }
.fx2-item__flag { display: inline-flex; align-items: center; gap: 4px; }
.fx2-item .fx-save { display: none; }
.fx2-item .fx2-play { right: 6px; bottom: 6px; padding: 3px 5px; }
.fx2-list .fx-empty { padding: 40px 0; }
.fx2-pagination { margin-top: 28px; }
.fx2 .fx-pagination .page-numbers { border-radius: 10px; }
.fx2-dl { padding-block: 0 56px; }
.fx2-lib__empty { padding-block: 8px 64px; }
.fx2-emptybox { max-width: 760px; padding: 26px; border: 1px dashed var(--c-line-strong); border-radius: var(--fx2-radius); background: var(--c-card); }
.fx2-emptybox p { margin: 0; font: 400 16px/1.6 var(--f-sans); color: var(--c-ink-2); }
.fx2-tabempty { padding-block: 20px 12px; }
.fx2-tabempty .fx2-emptybox { background: var(--c-paper); }
@media (min-width: 640px) {
	.fx2-item__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (min-width: 768px) {
	.fx2-item { grid-template-columns: 200px minmax(0, 1fr) auto; gap: 20px; }
	.fx2-item__media { aspect-ratio: 16 / 9; }
	.fx2-item__title { font-size: 19px; }
	.fx2-item .fx-save { display: inline-flex; margin: -8px -8px 0 0; }
}

/* ==========================================================================
   Bài viết
   ========================================================================== */
.fx2-single .fx-article-rail .fx2-rail__sticky { padding-top: 8px; }
@media (min-width: 1200px) and (max-width: 1439px) {
	/* Không đủ chỗ cho cột 300px: mục lục + bài, cột phải ẩn (quảng cáo trong bài vẫn còn). */
	.fx2-single .fx-article-grid { grid-template-columns: 200px 720px; gap: 64px; }
	.fx2-single .fx-article-rail { display: none; }
}
@media (min-width: 1440px) {
	.fx2-single .fx-article-grid { grid-template-columns: 200px 720px 300px; gap: 56px; }
}

/* ==========================================================================
   Trang Tải về (inc/blocks/v2-library.php → fixbox_v2_render_downloads): tab Chrome + số mục, thẻ tải về, quảng cáo
   ========================================================================== */
.fx2-dl__ad { padding-bottom: 16px; }
.fx2-dl__ad .fx-ad { max-width: 970px; margin: 0 auto; }
.fx2-dl__end { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--c-line); }
.fx2-dl__end .fx-ad { max-width: 970px; margin: 0 auto; }
.fx2-dltabs { margin-top: 0 !important; }
.fx2-ctab__n { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--p, var(--c-muted)) 14%, transparent); color: var(--c-ink-2); font: 600 11.5px/1.5 var(--f-sans); font-variant-numeric: tabular-nums; }
.fx2-lib__body--dl { grid-template-columns: minmax(0, 1fr); padding-block: 12px 8px; }
@media (min-width: 1280px) {
	.fx2-lib__body--dl.fx2-lib__body--rail { grid-template-columns: minmax(0, 1fr) 300px; }
}
.fx2-dlitem { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px 16px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--c-line); }
.fx2-dlitem__media { aspect-ratio: 4 / 3; max-width: 100%; border-radius: 10px; }
.fx2-dlitem__body { min-width: 0; }
.fx2-dlitem__file { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 6px; font: 600 12px/1.3 var(--f-sans); color: var(--c-muted); }
.fx2-ftype { padding: 2px 7px; border-radius: 5px; background: var(--c-ink); color: var(--c-paper); font: 700 11px/1.4 var(--f-mono); letter-spacing: .04em; }
.fx2-dlitem__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.fx2-dlitem__actions .fx-btn { height: 40px; }
@media (min-width: 768px) {
	.fx2-dlitem { grid-template-columns: 160px minmax(0, 1fr) auto; gap: 20px; }
	.fx2-dlitem__actions { grid-column: auto; flex-direction: column; align-items: stretch; min-width: 150px; }
}

/* Quảng cáo ở Cộng đồng (bbPress): khoảng cách + cỡ ô đặt trong assets/css/forum.css (dùng chung cho cả giao diện cũ). */

/* ==========================================================================
   Giao diện Sáng / Tối / Tự động (inc/blocks/v2-chrome.php → fixbox_v2_theme_control, assets/js/v2.js)
   ========================================================================== */
.fx2-theme--menu { position: relative; display: inline-block; }
.fx2-theme--menu > summary { list-style: none; cursor: pointer; }
.fx2-theme--menu > summary::-webkit-details-marker { display: none; }
.fx2-theme__now { display: none; }
:root[data-theme="light"] .fx2-theme__now--light,
:root[data-theme="dark"] .fx2-theme__now--dark,
:root:not([data-theme]) .fx2-theme__now--auto { display: inline-flex; }
.fx2-theme__list { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; display: grid; gap: 2px; min-width: 220px; padding: 6px; background: var(--c-card); border: 1px solid var(--c-line); border-radius: 12px; box-shadow: var(--fx2-shadow); }
.fx2-theme__opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--c-ink); font: 500 14.5px var(--f-sans); text-align: left; white-space: nowrap; cursor: pointer; }
.fx2-theme__opt:hover { background: var(--c-paper-alt); }
.fx2-theme__opt[aria-pressed="true"] { color: var(--c-accent); font-weight: 600; }
.fx2-theme__opt[aria-pressed="true"]::after { content: "✓"; margin-left: auto; padding-left: 8px; }
.fx2-theme__opt small { margin-left: auto; font: 400 12px var(--f-sans); color: var(--c-muted); }
.fx2-theme--row { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--c-line-strong); border-radius: 999px; background: var(--c-card); }
.fx2-theme--row .fx2-theme__opt { width: auto; min-height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13.5px; }
.fx2-theme--row .fx2-theme__opt[aria-pressed="true"] { background: var(--c-ink); color: var(--c-paper); }
.fx2-theme--row .fx2-theme__opt[aria-pressed="true"]::after { content: none; }
@media (max-width: 359px) { .fx2-theme--row .fx2-theme__opt span { display: none; } } /* Rất hẹp: chỉ còn icon. */