/* ==========================================================
Tiếng Nhật Đơn Giản — Design Tokens v3 (teal gradient + 2 tông cam)
2026-07-10 — khôi phục theo đúng ảnh tham chiếu người dùng cung cấp:
sidebar/banner dùng gradient teal (không phải navy đặc), "Đăng nhập"
nền teal đặc, "Đăng ký" nền teal nhạt, "Theo dõi Fanpage" cam vàng,
"Bắt đầu ngay" cam san hô — đúng cặp 2 tông cam đã dùng ở bản teal
đầu tiên (sampled thật từ tiengnhatdongian.com, #029fb2).
LOGO: giữ nguyên màu đỏ gốc (#dc3545 trong logo.png thật).
Lưu ý: chữ trắng trên --color-primary/--accent-amber/--accent-coral
chỉ đạt ~3.2:1 (dưới ngưỡng AA 4.5:1 cho text thường) — chấp nhận
đánh đổi này để khớp đúng hình ảnh tham chiếu; nói nếu muốn ưu tiên
lại WCAG AA nghiêm ngặt như bản trước.
========================================================== */
:root{
--menu-width: 68px;
--sidebar-w-collapsed: 68px;
--sidebar-w-expanded: 260px;
--sidebar-w: var(--sidebar-w-expanded); /* mặc định mở rộng (có nhãn chữ), giống ảnh tham chiếu */
--color-primary: #029fb2; /* teal thật, sampled từ tiengnhatdongian.com */
--color-primary-deep: #026e7a; /* teal đậm — text/link teal */
--color-primary-tint: #e1f5f7; /* teal rất nhạt — nền tag/pill, nút Đăng ký */
--color-primary-rgb: 2,159,178;
--sidebar-grad-a: var(--color-primary);
--sidebar-grad-b: #045062; /* teal-xanh đậm — điểm cuối gradient sidebar/banner */
--accent-amber: #ffb700; /* cam vàng — nút "Theo dõi Fanpage" */
--accent-amber-hover: #e6a500;
--accent-coral: #ff7a45; /* cam san hô — CTA banner "Bắt đầu ngay" */
--accent-coral-hover: #f2611f;
--color-logo-accent-rgb: 220,53,69; /* đỏ thật trong logo.png — chỉ dùng cho shadow dưới logo, không đổi màu logo */
--color-surface: #ffffff;
--color-surface-alt: #f2f4f7;
--color-text-primary:#1b1b1a; --color-text-secondary:#495057; --color-text-tertiary:#868e96;
/* border/bg/shadow phối theo tông teal của D:/tiengnhatdongian/new_UI/japanese-learning-ui
(--page-bg #f4fafb, --border #dfe9ec, shadow tint rgba(18,60,72,x)) thay vì xám trung tính cũ */
--color-border:#dfe9ec; --color-border-2:#d2e1e5;
--page-bg:#f4fafb;
--card-bg:#ffffff;
--card-radius:16px;
--card-shadow:0 4px 18px rgba(18,60,72,.05);
--card-shadow-hover:0 12px 34px rgba(17,62,74,.10);
--btn-radius:8px;
--font-ui: Inter, "Noto Sans JP", sans-serif;
--font-jp: "M PLUS Rounded 1c", "Noto Sans JP", Inter, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family:var(--font-ui);
color:var(--color-text-primary);
background:var(--page-bg);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
/* assets/css/custom.css đặt body{padding:0 10px 10px} cho layout cũ — ở layout mới,
.aside-menu là fixed (không bị ảnh hưởng bởi padding này) trong khi .main-wrap vẫn
nằm trong luồng nên bị đẩy lệch 10px so với sidebar/mép phải. Reset về 0 cho layout mới. */
body.new-home-ui{padding:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;transition:background .15s ease,color .15s ease,transform .1s ease,box-shadow .15s ease}
button:active{transform:scale(.96)}
button:focus-visible, a:focus-visible, input:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:4px}
svg{width:1em;height:1em;fill:currentColor;display:block}
/* Rule trên chỉ nhằm reset các icon SVG của giao diện mới (sidebar/header/nút...).
Trang chi tiết Kanji chèn SVG minh họa nét chữ thật (width/height 250px riêng, tự tô màu
từng nét) qua field ACF kanji_svg — nếu bị ép về 1em (~16px) thì gần như biến mất. */
.kanji-draw-container svg{width:auto;height:auto;fill:initial;display:inline-block}
ul{list-style:none;margin:0;padding:0}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:50rem}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.3)}
::-webkit-scrollbar-track{background:transparent}
.kanji-search-result-home:not(:empty){
margin-top:20px;background:#fff;border-radius:16px;padding:28px;
box-shadow:0 5px 10px rgba(0,0,0,.15);
/*overflow-x:hidden;*/ /* lưới an toàn: chặn mọi tràn ngang từ nội dung kanji dùng chung
(content-single_kanji.php) đè lên layout mobile của trang chủ — xem rule .tuong-tu-box
bên dưới để biết 1 nguyên nhân cụ thể đã tìm ra (còn nhiều khả năng khác chưa lộ ra
hết vì template gốc chỉ được thiết kế/test cho layout desktop cũ) */
}
/* Ẩn bảng Từ vựng khi đang ở tab KHÁC Từ vựng — xem đoạn "BẪY đã gặp" ở tabLink click handler
trong new-home.js: #tuvung_datatable_wrap KHÔNG được `.innerHTML = ''` như 5 khối kết quả AJAX
kia (DataTable chỉ khởi tạo 1 lần, xoá đi không tự dựng lại khi quay lại tab), chỉ ẩn/hiện bằng
class này — !important để thắng chắc chắn rule ":not(:empty)" ngay trên (nội dung vẫn còn,
không phải :empty, nhưng vẫn cần ẩn hẳn). */
.kanji-search-result-home.tv-tab-hidden{
display:none!important;
}
/* "KANJI TƯƠNG TỰ": .wrap-bo-cau-thanh .kanji-url (display:block) và .kanji-tuong-tu .kanji-url
(display:inline-block) cùng độ đặc hiệu, áp lên cùng 1 span — rule "block" thắng khiến 20+
kanji không tự xuống dòng trong cột hẹp ở mobile, tràn ngang cả trang. Ép về inline-block để
bọc dòng bình thường như chữ trong đoạn văn, không đụng tới file gốc (ảnh hưởng chung site). */
#kanji_search_result_home .kanji-tuong-tu.tuong-tu-box .kanji-url,
.tndg-kanji-info-panel-body .kanji-tuong-tu.tuong-tu-box .kanji-url,
#quickSearchPopupInternal .kanji-tuong-tu.tuong-tu-box .kanji-url{display:inline-block!important}
.kanji-search-loading{
display:flex;align-items:center;justify-content:center;gap:10px;
padding:48px 20px 8px;font-size:16px;font-weight:500;color:var(--color-text-secondary);
}
.kanji-search-loading .fa-spinner{font-size:20px;color:var(--color-primary)}
.kanji-search-loading.kanji-not-found{padding:48px 20px;color:#dc3545;font-weight:600}
/* To lên bằng đúng chiều cao khối chữ 2 dòng (16px * ~1.4 line-height * 2 dòng ≈ 45px) — trước
chỉ 20px, nhỏ hơn hẳn khối chữ 2 dòng (thêm câu gợi ý "Vui lòng nhập một chữ Kanji...") trông
lệch tỉ lệ. flex-shrink:0 để không bị bóp lại trong hàng flex .kanji-search-loading. */
.kanji-search-loading.kanji-not-found .fa-exclamation-circle{font-size:44px;line-height:1;flex-shrink:0}
/* Khối loading (tndgRenderKanjiLoading trong homeJs.js) giờ dựng lại ĐẦY ĐỦ bố cục overlay
chuyển trang toàn trang (.tndg-pt-inner trong assets/css/page-transition.css): logo → thẻ dấu
mộc → dòng "Đang tải..." → thanh tiến trình → 2 nút — copy lại nguyên kích thước/khoảng cách,
chỉ khác 1 điểm CỐ Ý: thanh tiến trình ở đây được lái bằng JS theo trạng thái tải Kanji thật
(tndgStartKanjiLoadingProgress) thay vì chạy hẹn giờ cố định như bản gốc (bản gốc chấp nhận
được vì đó là điều hướng trình duyệt thật, JS không đo được tiến trình; ở đây là AJAX nên đo
được, không có lý do gì phải giả lập hẹn giờ). */
.kanji-loading-panel{
display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px 16px 32px;text-align:center;
}
.kanji-loading-quote{display:flex;justify-content:center;width:100%}
/*
— cần tiền tố ID để thắng rule "font-size:revert" chặn rò rỉ (#kanji_search_result_home p
ở dưới file này), cùng lý do đã giải thích ở .kanji-loading-quote-jp/-vi. Liệt kê riêng từng
nơi khối loading này được dùng lại (không gộp về 1 class chung — hạ specificity xuống dưới
".content-wrap section p" của tabs.css, làm rò rỉ lại): tìm Kanji, tìm Giáo trình, và panel
"Cách nhớ và Giải nghĩa" (tndgOpenKanjiInfoPanel gọi tndgLoadKanjiDetail()/tndgLoadWithLoadingPanel
— xem homeJs.js) — thiếu nơi nào thì chữ ở đó sẽ về style
mặc định của trình duyệt, không
to/đậm như thiết kế (đúng lỗi khi mới thêm #giaotrinh_search_result_home mà quên thêm vào đây). */
#kanji_search_result_home .kanji-loading-caption,
#giaotrinh_search_result_home .kanji-loading-caption,
#flashcard_search_result_home .kanji-loading-caption,
#dethi_search_result_home .kanji-loading-caption,
#phim_search_result_home .kanji-loading-caption,
.tndg-kanji-info-panel-body .kanji-loading-caption,
#quickSearchPopupInternal .kanji-loading-caption{margin:0;font-size:14px;color:color-mix(in srgb,#1b1b1a 50%,transparent)}
.kanji-loading-bar{position:relative;width:280px;max-width:70vw;height:5px;background:#f3d9dc;border-radius:2.5px}
.kanji-loading-bar-fill{position:absolute;left:0;top:0;height:100%;width:0;border-radius:inherit;background:#c8232f}
.kanji-loading-bar-fill .kanji-loading-quote-flower--cursor{position:absolute;right:-7px;top:50%;transform:translate(50%,-50%)}
.kanji-loading-quote-flower--cursor{width:14px;height:14px}
.kanji-loading-quote-flower--cursor i{width:6px;height:6px;background:#c8232f}
.kanji-loading-quote-flower--cursor i:nth-child(1){top:4px;left:8px}
.kanji-loading-quote-flower--cursor i:nth-child(2){top:8px;left:5px}
.kanji-loading-quote-flower--cursor i:nth-child(3){top:6px;left:0}
.kanji-loading-quote-flower--cursor i:nth-child(4){top:1px;left:0}
.kanji-loading-quote-flower--cursor i:nth-child(5){top:0;left:5px}
.kanji-loading-quote-card{
position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;
width:100%;max-width:min(92vw,560px);padding:30px 26px;text-align:center;
background:#fbf7f1;
filter:drop-shadow(0 10px 26px rgba(0,0,0,.14));
-webkit-mask-image:
radial-gradient(circle 22px at 0 0, transparent 22px, black 22.5px),
radial-gradient(circle 22px at 100% 0, transparent 22px, black 22.5px),
radial-gradient(circle 22px at 0 100%, transparent 22px, black 22.5px),
radial-gradient(circle 22px at 100% 100%, transparent 22px, black 22.5px);
mask-image:
radial-gradient(circle 22px at 0 0, transparent 22px, black 22.5px),
radial-gradient(circle 22px at 100% 0, transparent 22px, black 22.5px),
radial-gradient(circle 22px at 0 100%, transparent 22px, black 22.5px),
radial-gradient(circle 22px at 100% 100%, transparent 22px, black 22.5px);
mask-composite:intersect,intersect,intersect;-webkit-mask-composite:source-in;
}
@media (min-width:420px){
.kanji-loading-quote-card{padding:36px 60px}
}
.kanji-loading-quote-corner{position:absolute;bottom:22px;width:16px;height:16px}
.kanji-loading-quote-corner--bl{left:22px;border-left:2px solid color-mix(in srgb,#c8232f 45%,transparent);border-bottom:2px solid color-mix(in srgb,#c8232f 45%,transparent)}
.kanji-loading-quote-corner--br{right:22px;border-right:2px solid color-mix(in srgb,#c8232f 45%,transparent);border-bottom:2px solid color-mix(in srgb,#c8232f 45%,transparent)}
.kanji-loading-quote-dot{position:absolute;top:22px;border-radius:50%;background:#f0b8c2}
.kanji-loading-quote-dot--tl{left:22px;width:8px;height:8px}
.kanji-loading-quote-dot--tr{right:22px;width:7px;height:7px}
.kanji-loading-quote-label{
display:inline-flex;align-items:center;margin-top:10px;margin-bottom:0;transform:rotate(-3deg);
font-size:13px;font-weight:700;letter-spacing:.04em;color:#a3453f;
background:rgba(163,32,31,.1);border:1px dashed rgba(163,32,31,.3);
border-radius:6px;padding:7px 18px;
}
.kanji-loading-quote-label:empty{display:none}
/* .kanji-loading-quote-jp/-vi là thẻ
— #kanji_search_result_home p (dưới cùng file này)
có rule "font-size:revert" để chặn rò rỉ font-size:4em từ tabs.css cho MỌI
chèn bằng AJAX
trong khối kết quả Kanji, độ đặc hiệu (1,0,1) cao hơn 1 class đơn (0,1,0) nên luôn thắng, đè
mất font-size/color/font-weight cố ý đặt ở đây (đúng lỗi "chữ bị bé" — revert về cỡ chữ kế
thừa từ ancestor thay vì giữ clamp() đã khai báo). Thêm tiền tố ID để nâng độ đặc hiệu lên
(1,1,0), thắng được rule chặn rò rỉ mà không cần !important — khối loading này dùng LẠI y hệt
ở nhiều nơi (tìm Kanji, tìm Giáo trình, panel "Cách nhớ và Giải nghĩa" .tndg-kanji-info-panel-body
— xem tndgLoadWithLoadingPanel trong homeJs.js) nên phải liệt kê tiền tố riêng cho TỪNG nơi,
không gộp về 1 class chung (hạ specificity xuống dưới rule chặn rò rỉ, làm rò rỉ lại — xem
.kanji-loading-caption phía trên). */
#kanji_search_result_home .kanji-loading-quote-jp,
#giaotrinh_search_result_home .kanji-loading-quote-jp,
#flashcard_search_result_home .kanji-loading-quote-jp,
#dethi_search_result_home .kanji-loading-quote-jp,
#phim_search_result_home .kanji-loading-quote-jp,
.tndg-kanji-info-panel-body .kanji-loading-quote-jp,
#quickSearchPopupInternal .kanji-loading-quote-jp{
margin:0;display:flex;align-items:center;justify-content:center;gap:12px;
font-family:"Noto Sans JP",var(--font-jp,"M PLUS Rounded 1c"),sans-serif;
font-size:clamp(24px,6.5vw,38px);font-weight:700;color:#1b1b1a;flex-wrap:wrap;
}
/* Toàn bộ chuỗi ruby/kana của câu (window.tndgPtFuriganaHtml) PHẢI nằm gọn trong 1 khối duy
nhất — .kanji-loading-quote-jp là flex container nên nếu để từng /từng cụm kana rời
rạc làm con trực tiếp của nó, mỗi mảnh sẽ tách thành flex item riêng và bị đẩy xa nhau bởi
gap:10px (chữ vỡ hàng, dạt lung tung). white-space:nowrap để cả câu không tự ý xuống dòng
giữa chừng làm rời khớp furigana khỏi đúng chữ của nó. */
.kanji-loading-quote-jp-text{white-space:nowrap}
.kanji-loading-quote-jp rt{font-size:12px;font-weight:400;opacity:.65}
.kanji-loading-quote-divider{display:flex;align-items:center;gap:8px;opacity:.4}
.kanji-loading-quote-divider .line{width:72px;height:1px;background:color-mix(in srgb,#c8232f 35%,transparent)}
#kanji_search_result_home .kanji-loading-quote-vi,
#giaotrinh_search_result_home .kanji-loading-quote-vi,
#flashcard_search_result_home .kanji-loading-quote-vi,
#dethi_search_result_home .kanji-loading-quote-vi,
#phim_search_result_home .kanji-loading-quote-vi,
.tndg-kanji-info-panel-body .kanji-loading-quote-vi,
#quickSearchPopupInternal .kanji-loading-quote-vi{
margin:0;font-size:clamp(21px,5.5vw,32px);font-weight:700;line-height:1.3;
}
.kanji-loading-quote-vi .black{color:#1b1b1a}
.kanji-loading-quote-vi .red{color:#c8232f}
/* Hoa văn 5 cánh trang trí — mượn lại nguyên giá trị toạ độ từ .tndg-pt-flower
(assets/css/page-transition.css) để 2 nơi trông giống hệt nhau. */
.kanji-loading-quote-flower{position:relative;width:16px;height:16px;flex:none;display:inline-block}
.kanji-loading-quote-flower i{position:absolute;width:7px;height:7px;border-radius:50%;background:#f0b8c2}
.kanji-loading-quote-flower i:nth-child(1){top:4.5px;left:9.5px}
.kanji-loading-quote-flower i:nth-child(2){top:9.25px;left:6.05px}
.kanji-loading-quote-flower i:nth-child(3){top:7.44px;left:0.46px}
.kanji-loading-quote-flower i:nth-child(4){top:1.56px;left:0.46px}
.kanji-loading-quote-flower i:nth-child(5){top:-0.25px;left:6.05px}
.kanji-loading-quote-flower b{position:absolute;width:5px;height:5px;border-radius:50%;background:#c8232f;top:5.5px;left:5.5px}
.kanji-loading-quote-flower--red i{background:#c8232f}
.kanji-loading-quote-flower--red b{background:#fff}
/* Nút Dừng để xem — copy lại đúng kiểu dáng .tndg-pt-pause/.is-paused
(assets/css/page-transition.css) cho đồng nhất, chỉ đổi hành vi (xem
tndgStartKanjiLoadingTips trong homeJs.js) vì ở đây không có điều hướng trang để dừng lại —
nút giờ điều khiển việc tự xoay câu. */
.kanji-loading-quote-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px}
.kanji-loading-quote-pause{
margin:0;border-radius:999px;padding:10px 22px;cursor:pointer;
font-family:var(--font-ui,Inter,sans-serif);font-size:13px;
background:#c8232f;border:2px solid #c8232f;font-weight:600;color:#fbf7f1;
box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.kanji-loading-quote-pause.is-paused{background:#fbf7f1;color:#c8232f}
/* Panel "Cách nhớ và Giải nghĩa" trượt phải-sang-trái (tndgCreateKanjiInfoPanel/
tndgOpenKanjiInfoPanel trong assets/js/new-home.js) — bấm nút trong tooltip hover Kanji mở panel
này thay vì điều hướng hẳn sang trang khác. MỖI LẦN bấm tạo 1 instance MỚI (id trùng nhau có chủ
đích, xem comment ở tndgCreateKanjiInfoPanel) xếp chồng lên panel đang mở, không còn dùng chung
1 overlay singleton như bản đầu — panel sau luôn đứng SAU trong DOM nên tự vẽ đè lên panel trước
dù CÙNG z-index (không cần tăng z-index thủ công theo độ sâu chồng). z-index phải cao hơn TẤT CẢ z-index khác đang có trên site
(rà lại toàn bộ CSS theme, cao nhất là #kanji_search_result_home.hp_btn_onfocus/
.box-search-container.hp_btn_onfocus ở z-index:9999999!important trong chính file này — bật
lên khi khung tìm kiếm đang focus, đứng cùng stacking context với overlay này vì cả 2 đều là
con gần-trực-tiếp của không qua ancestor nào tạo stacking context riêng — nếu không cao
hơn, kết quả tìm kiếm phía sau sẽ đè lên panel ngay khi khung tìm kiếm đang ở trạng thái
focus). Không dùng !important vì bản thân z-index của overlay này không bị ai khác đè, chỉ
cần number đủ lớn. */
/* Đóng panel: PHẢI trượt hết ra phải rồi mới mờ nền dần (tuần tự, không mờ+trượt cùng lúc) —
làm bằng transition-delay: opacity của overlay chỉ bắt đầu chạy SAU khi transform của
.tndg-kanji-info-panel trượt xong (delay = đúng .34s, khớp thời lượng trượt bên dưới).
visibility chuyển "hidden" trễ nhất (delay = tổng slide+fade) để phần tử vẫn được vẽ xuyên
suốt animation, không biến mất đột ngột giữa chừng. Mở panel thì hiện ngay, không cần trễ —
chỉ chiều đóng mới cần đúng thứ tự này. */
#tndg-kanji-info-panel-overlay{
position:fixed;inset:0;z-index:2147483000;
background:rgba(20,20,20,.45);
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .26s ease .34s,visibility 0s linear .6s;
}
#tndg-kanji-info-panel-overlay.is-open{
opacity:1;visibility:visible;pointer-events:auto;
transition:opacity .22s ease,visibility 0s linear;
}
/* Rộng bằng #kanji_search_result_home (đo thực tế ~980px ở viewport 1280px, khớp
.page-container trừ sidebar) để nội dung content-single_kanji.php — vốn chỉ được thiết kế/test
cho layout rộng — hiển thị đủ chỗ như bên ngoài, không bị co cụm 3 cột lại 1 chỗ như khi panel
chỉ 480px. */
.tndg-kanji-info-panel{
position:absolute;top:0;right:0;height:100%;width:min(94vw,1235px);
display:flex;flex-direction:column;
background:#fff;box-shadow:-10px 0 30px rgba(0,0,0,.18);
transform:translateX(100%);
transition:transform .34s cubic-bezier(.32,.72,0,1);
will-change:transform;
}
#tndg-kanji-info-panel-overlay.is-open .tndg-kanji-info-panel{transform:translateX(0)}
.tndg-kanji-info-panel-header{
display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
padding:16px 20px;border-bottom:1px solid var(--color-border);
}
.tndg-kanji-info-panel-heading{flex:1 1 auto;min-width:0}
/* Đồng bộ với #quickSearchPopupHeadingKanji (style.css/new-home.css, popup "Tra cứu nhanh") —
.result-list-kanji vốn thiết kế để "tràn" khớp viền khối kết quả có padding riêng
(#kanji_search_result_home), phải bỏ hết margin/padding/border-bottom khi nằm thẳng trong
header đã có padding/border-bottom riêng của .tndg-kanji-info-panel-header, tránh cộng dồn. */
.tndg-kanji-info-panel-heading .result-list-kanji{margin:0;padding:0;border-bottom:none}
/* Đồng bộ y hệt .qspop-close (popup "Tra cứu nhanh") — cùng kích thước/bo góc/màu nền, SVG X thay
cho icon Font Awesome cũ (xem markup mới trong tndgCreateKanjiInfoPanel(), new-home.js). */
.tndg-kanji-info-panel-close{
flex-shrink:0;width:32px;height:32px;border:none;border-radius:9px;
background:var(--page-bg);color:var(--color-text-secondary);cursor:pointer;
display:flex;align-items:center;justify-content:center;transition:background .15s ease;
}
.tndg-kanji-info-panel-close:hover{background:var(--color-border)}
.tndg-kanji-info-panel-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tndg-kanji-info-panel-body{flex:1 1 auto;overflow-y:auto;padding:8px 20px 24px;overflow-x:hidden}
@media (max-width:480px){
.tndg-kanji-info-panel{width:100%}
}
/* Hàng nút chọn Kanji khi gõ từ 2 Kanji khác nhau trở lên (tndgRenderKanjiPicker() trong
homeJs.js) — style theo design token của trang chủ (teal) thay vì .btn-secondary xám mặc
định của Bootstrap, cho đồng bộ với phần nội dung kanji hiển thị ngay bên dưới.
margin trái/phải -20px "trung hoà" đúng padding-left/right 20px của chính hàng này để hàng
nằm khít theo padding của khung cha (kanji-search-result-home, 28px) — nhưng padding-top
14px thì KHÔNG có margin-top âm tương ứng để bù, nên bị cộng dồn với padding-top 28px của
khung cha thành 42px, cao hơn hẳn lề trái/phải (28px). Bỏ hẳn padding-top (dựa hoàn toàn vào
padding-top của khung cha) để lề trên bằng đúng lề trái/phải; giữ padding-bottom cho khoảng
cách trước border-bottom bên dưới. */
.result-list-kanji{
display:flex;align-items:center;flex-wrap:wrap;gap:16px;
padding:0 20px 14px;margin:0 -20px 4px;border-bottom:1px solid var(--color-border);
}
.result-list-kanji-info{display:flex;align-items:center;gap:12px;flex-shrink:0}
.result-list-kanji-icon{
display:flex;align-items:center;justify-content:center;flex-shrink:0;
width:40px;height:40px;border-radius:50%;
background:var(--color-primary);color:#fff;
}
.result-list-kanji-icon .fa{font-size:16px}
/* Trường hợp "không tìm thấy Kanji" (runKanjiLookup() trong new-home.js) — đồng bộ đúng màu đỏ
cảnh báo #dc3545 đã dùng cho .kanji-not-found ở nơi khác (kết quả tìm kiếm trang chủ/panel),
thay vì giữ nguyên màu teal mặc định vốn chỉ hợp cho trạng thái "tìm thấy". */
.result-list-kanji-icon.is-not-found{background:#dc3545}
.result-list-kanji-text{display:flex;flex-direction:column;gap:1px}
.result-list-kanji-label{font-size:15px;font-weight:700;color:var(--color-text-primary);white-space:nowrap}
.result-list-kanji-sublabel{font-size:12.5px;color:var(--color-text-tertiary);white-space:nowrap}
.result-list-kanji-items{display:flex;flex-wrap:wrap;gap:8px}
.kanji-picker-btn{
position:relative;display:flex;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:10px;
background:var(--page-bg);border:1.5px solid var(--color-border-2);
font-family:var(--font-jp);font-size:22px;font-weight:500;color:var(--color-text-primary);
transition:background .15s ease,border-color .15s ease,color .15s ease,transform .1s ease;
}
.kanji-picker-btn:hover{background:var(--color-primary-tint);border-color:var(--color-primary);color:var(--color-primary-deep)}
.kanji-picker-btn:active{transform:scale(.94)}
.kanji-picker-btn.is-active{
background:var(--color-primary);border-color:var(--color-primary);color:#fff;
box-shadow:0 3px 10px rgba(var(--color-primary-rgb),.35);
}
.kanji-picker-check{
position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:#2ecc71;color:#fff;border:2px solid #fff;
}
.kanji-picker-check svg{width:8px;height:8px}
/* Icon loa đọc to Âm On/Kun/Nanori (tndgInitKanjiPronunciation() trong homeJs.js) — chip
.txt-item vốn đã có sẵn hiệu ứng hover trong content-single_kanji.php nên chỉ cần thêm
con trỏ pointer + icon, không cần định nghĩa lại toàn bộ style của chip. */
#kanji_search_result_home .txt-item,
.tndg-kanji-info-panel-body .txt-item,
#quickSearchPopupInternal .txt-item{cursor:pointer}
#kanji_search_result_home .txt-item-speak,
.tndg-kanji-info-panel-body .txt-item-speak,
#quickSearchPopupInternal .txt-item-speak{margin-left:6px;font-size:.75em;opacity:.7}
#kanji_search_result_home .txt-item:hover .txt-item-speak,
.tndg-kanji-info-panel-body .txt-item:hover .txt-item-speak,
#quickSearchPopupInternal .txt-item:hover .txt-item-speak{opacity:1}
/* Trạng thái đang chờ Azure Speech trả về mp3 (is-loading, gắn/gỡ trong tndgSpeakKanjiReading()
của new-home.js) — quay icon loa để báo hiệu đang xử lý, tái dùng đúng @keyframes tv-tts-spin
đã khai cho nút loa bảng Từ vựng (xem #tuvung_datatable_wrap .tv-tts-btn.is-loading bên dưới). */
#kanji_search_result_home .txt-item-speak.is-loading,
.tndg-kanji-info-panel-body .txt-item-speak.is-loading,
#quickSearchPopupInternal .txt-item-speak.is-loading{opacity:1;animation:tv-tts-spin .8s linear infinite}
/* tabs.css có rule ".content-wrap section p" (chữ nền mờ trang trí cho hệ tab gốc của trang chủ,
font-size:4em) vô tình đè lên mọi thẻ
trong nội dung chèn bằng AJAX ở các khối kết quả tìm
kiếm trang chủ, làm chữ to bất thường/vỡ layout. Trả lại kế thừa bình thường (giống hệt khi
render trên trang gốc). Áp cho cả #giaotrinh_search_result_home cùng lý do — xem
.kanji-loading-quote-jp/-vi phía trên về việc vì sao phải liệt kê riêng ID từng khối. */
#kanji_search_result_home p,
#giaotrinh_search_result_home p,
#flashcard_search_result_home p,
#dethi_search_result_home p,
#phim_search_result_home p,
#quickSearchPopupInternal p{color:revert;font-weight:revert;font-size:revert;line-height:revert;margin:0;padding:0;text-align:left}
/* Rule chặn rò rỉ ở trên áp dụng cho MỌI thẻ
nên cũng vô tình đè luôn lên 2 chỗ vốn có
style riêng cố ý khác biệt (banner "MẸO NHỚ NHANH" và chữ Kanji đặt giữa ảnh nền mờ khi
không có ảnh minh họa riêng — content-single_kanji.php) — khôi phục lại đúng giá trị gốc
của 2 chỗ này, độ đặc hiệu cao hơn rule chặn rò rỉ ở trên (thêm .wrap-url-image/#report)
nên vẫn thắng được nó mà không cần quay lại dùng "revert" (revert bỏ qua toàn bộ CSS do
theme viết, kể cả các rule hợp lệ này, chứ không riêng gì rule rò rỉ của tabs.css). */
#kanji_search_result_home #report,
#quickSearchPopupInternal #report{padding:7.5px 12.5px}
#kanji_search_result_home .wrap-url-image p,
#quickSearchPopupInternal .wrap-url-image p{padding:5px 20px;margin:0 0 10px;font-size:90px;color:#721c24}
.aside-menu::-webkit-scrollbar{width:6px}
.aside-menu::-webkit-scrollbar-thumb{background:rgba(23,73,84,.18);border-radius:50rem}
.aside-menu::-webkit-scrollbar-thumb:hover{background:rgba(23,73,84,.32)}
.aside-menu::-webkit-scrollbar-track{background:transparent}
/* ---- sidebar backdrop (mobile drawer dimming) ---- */
.sidebar-backdrop{
position:fixed;inset:0;background:rgba(10,13,18,.45);
z-index:99;opacity:0;visibility:hidden;transition:opacity .25s ease;
backdrop-filter:blur(1px);
}
.sidebar-backdrop.show{opacity:1;visibility:visible}
.btn-close-sidebar, .btn-mobile-menu{display:none}
/* ============ SIDEBAR ============ */
.aside-menu{
position:fixed; inset:0 auto 0 0;
width:var(--sidebar-w);
/* gradient teal rất nhạt, học theo .sidebar của japanese-learning-ui (trắng ngà → xanh
nhạt ở đáy) thay vì nền trắng phẳng cũ — chỉ đổi màu, không đổi bố cục/nội dung */
background:linear-gradient(180deg,#fefefe 0%,#f9fcfd 66%,#e7f7f8 100%);
border-right:1px solid #dfecef;
display:flex; flex-direction:column;
z-index:100; overflow-y:auto; overflow-x:hidden;
box-shadow:4px 0 28px rgba(23,73,84,.05);
scrollbar-width:thin; scrollbar-color:rgba(23,73,84,.18) transparent;
transition:width .25s cubic-bezier(.32,.72,0,1);
}
body.sidebar-collapsed{ --sidebar-w: var(--sidebar-w-collapsed); }
/* site đang bật Customizer > Site Layout: "Boxed Layout" (style.css .boxed_layout #page{
margin:0 auto;width:1256px}) — nếu không ghi đè, cột nội dung sẽ co lại giữa trang
trong khi sidebar fixed vẫn dính mép trái, gây lệch/hụt layout */
.boxed_layout #page{width:auto!important;margin:0!important}
/* ---- vùng trên cùng sidebar (logo + ô tìm kiếm nhanh) — dùng chung 1 nền tranh núi
Phú Sĩ để 2 khối liền mạch, không đứt đoạn ở đường viền logo ---- */
.sidebar-top{position:relative;padding-bottom:2px}
/* nền tranh đặt riêng ở pseudo-element (không phải trực tiếp trên .sidebar-top) để mask
fade chỉ làm mờ dần ảnh nền, không kéo mờ theo logo/ô tìm kiếm nằm đè lên trên */
.sidebar-top::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:url('../images/sidebar-illustration.png') right top/cover no-repeat;
-webkit-mask-image:linear-gradient(to bottom, #000 65%, transparent 100%);
mask-image:linear-gradient(to bottom, #000 65%, transparent 100%);
}
.box-logo{
display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:10px;
padding:16px 16px 14px; flex-shrink:0; position:relative; z-index:1; width:100%;
}
.logo-link{display:block}
/* ---- brand logo: real "ĐG" mark from tiengnhatdongian.com (giữ nguyên đỏ gốc) + wordmark teal ---- */
.logo-lockup{display:flex;align-items:center;gap:12px}
/* logo/slogan to hơn chút cho hợp sidebar rộng 260px (trước 38px/11.5px canh cho sidebar
hẹp hơn, giờ dư chỗ nên phóng lên) */
.logo-badge{
width:44px;height:44px;border-radius:50%;flex-shrink:0;object-fit:cover;display:block;
box-shadow:0 2px 6px rgba(var(--color-logo-accent-rgb),.35);
}
.logo-badge.small{width:32px;height:32px}
.logo-word{
font-weight:800;color:var(--color-primary-deep);font-size:13px;line-height:1.3;
letter-spacing:.4px;white-space:nowrap;display:block;
}
.logo-word.single{font-size:15px;color:var(--color-primary-deep);display:inline-block;white-space:nowrap}
.header-logo{display:flex;align-items:center;gap:10px}
.btn-toggle-sidebar{
width:34px;height:34px;border:1px solid var(--color-border);border-radius:10px;flex-shrink:0;
background:var(--color-primary-tint);color:var(--color-primary-deep);display:flex;align-items:center;justify-content:center;
box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.btn-toggle-sidebar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease;transform:none}
.btn-toggle-sidebar:hover{background:#fff;border-color:var(--color-primary)}
body.sidebar-collapsed .btn-toggle-sidebar svg{transform:rotate(180deg)}
/* mặc định: mở rộng — logo + toggle nằm cùng hàng, menu hiện nhãn chữ */
/* .sidebar-collapsed: thu gọn về icon-only, logo xếp dọc phía trên toggle — đổi flex-direction
NGAY LẬP TỨC (không đợi -settled như .menu-item, xem new-home.js) vì .box-logo chỉ có 2 phần
tử (logo + nút toggle): nếu đợi khung co xong mới đổi, suốt .25s đó logo+nút vẫn ở bố cục
HÀNG NGANG bị ép chung vào 1 khung đang hẹp dần (do .box-logo{width:100%} tự stretch theo
.aside-menu) — 2 phần tử chen lấn nhau ngày càng chật, đứng yên/kẹt ở trạng thái ép sát mép
phải trong khoảnh khắc cuối animation rồi mới "nhảy" sang bố cục dọc khi -settled thêm vào —
đúng hiệu ứng "khựng lại rồi giật về vị trí" quan sát được trên nút tròn "<". Snap ngay từ đầu
(cùng lúc bắt đầu co) tránh hẳn được hiện tượng ép/khựng này vì chỉ có 2 phần tử, ít gây chú ý
hơn nhiều so với 8 dòng menu-item snap cùng lúc (lý do menu-item vẫn cần tách -settled). */
body.sidebar-collapsed .box-logo{flex-direction:column;justify-content:center;padding:16px 0 14px;width:auto}
/* ---- ô tìm kiếm nhanh trên cùng sidebar (dưới logo, trên nav) — bo tròn/đổ bóng
theo đúng tham chiếu new_UI (D:/tiengnhatdongian/new_UI/japanese-learning-ui) ---- */
.quick-search{
position:relative;z-index:1;
display:flex;align-items:center;gap:6px;margin:14px 12px 12px;padding:0 8px 0 12px;
height:44px;background:rgba(255,255,255,.94);border:1px solid var(--color-border);
border-radius:14px;color:var(--color-text-tertiary);
box-shadow:0 4px 15px rgba(18,60,72,.07);
flex-shrink:0;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.quick-search:hover{transform:translateY(-1px);border-color:var(--color-primary-tint);box-shadow:0 6px 20px rgba(18,60,72,.1)}
.quick-search svg{width:17px;height:17px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.quick-search input{
flex:1;min-width:0;border:none;outline:none;background:transparent;
font-family:inherit;font-size:13.5px;color:var(--color-text-primary);
/* input[type=search] mặc định có "chrome" riêng của trình duyệt (khung focus do OS/engine
vẽ, không phải CSS border/outline thường) — appearance:none để bỏ hẳn, chỉ còn giao
diện tự thiết kế ở trên */
appearance:none;-webkit-appearance:none;
}
/* style.css gốc của theme có rule input[type="search"]:focus{border:1px solid #AAA}
(dòng ~430) — specificity (attribute + :focus) cao hơn ".quick-search input" ở trên
nên viền xám vẫn lọt qua lúc focus; phải khớp lại đúng specificity đó mới thắng được */
.quick-search input:focus{border:none;outline:none}
.quick-search input::placeholder{color:var(--color-text-tertiary)}
/* trình duyệt tự thêm nút "x" xóa nhanh cho input[type=search] — ẩn icon mặc định của
WebKit để dùng chung giao diện tối giản, không lệch với các ô search khác trên site */
.quick-search input::-webkit-search-cancel-button{-webkit-appearance:none}
/* ---- nút mở dropdown danh mục tra cứu nhanh — pill nền xám nhạt hiện tên danh mục
đang chọn (Ngữ pháp/Kanji/...) + chevron, giống đúng ảnh tham chiếu người dùng cung
cấp. positionMenu() trong new-home.js tính toạ độ dropdown theo đúng vị trí nút này. */
.quick-search-cat-toggle{
display:flex;align-items:center;gap:3px;flex-shrink:0;max-width:92px;
padding:6px 8px;border:none;border-radius:999px;cursor:pointer;
background:var(--page-bg);transition:background .15s ease;
}
.quick-search-cat-toggle:hover{background:var(--color-border)}
.quick-search-cat-toggle span{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-size:12.5px;font-weight:600;color:var(--sidebar-grad-b);
}
.quick-search-cat-toggle svg{
width:12px;height:12px;flex-shrink:0;fill:none;stroke:currentColor;
stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
color:var(--color-text-tertiary);transition:transform .18s ease,color .15s ease;
}
.quick-search-cat-toggle.is-open{background:var(--color-primary-tint)}
.quick-search-cat-toggle.is-open svg{transform:rotate(180deg);color:var(--color-primary-deep)}
/* bỏ viền focus-visible mặc định (button:focus-visible ở trên) riêng cho nút này — đã
có nền đổi màu khi mở (.is-open) làm tín hiệu, không cần thêm viền */
.quick-search-cat-toggle:focus-visible{outline:none}
body.sidebar-collapsed .quick-search-cat-toggle{display:none}
/* ---- dropdown danh mục ("Ngữ pháp / Kanji / Giáo trình / Flashcard / Đề thi / Anime")
— position:fixed + JS tính toạ độ (positionMenu() trong new-home.js) để không bị
.aside-menu{overflow-y:auto} cắt mất ---- */
.quick-search-categories{
/* width do JS đặt khớp đúng bề rộng ô tìm kiếm (positionMenu(), new-home.js) */
display:none;position:fixed;z-index:10000;
background:#fff;border-radius:12px;box-shadow:0 16px 40px rgba(17,62,74,.18);
border:1px solid var(--color-border);padding:6px;box-sizing:border-box;
}
.quick-search-categories.is-open{display:block}
/* mục dropdown giờ là "bộ chọn phạm vi tìm kiếm" (button, không phải link điều hướng) —
chọn xong vẫn ở lại trang, gõ từ khoá + Enter mới mở popup kết quả theo đúng phạm vi
(quickSearchOpenPopup() trong new-home.js) */
.quick-search-categories button{
width:100%;border:none;background:none;cursor:pointer;font:inherit;text-align:left;
display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;
font-size:13.5px;font-weight:500;color:var(--color-text-primary);
}
.quick-search-categories button:hover{background:var(--page-bg);color:var(--color-primary-deep)}
.quick-search-categories button svg{
width:17px;height:17px;flex-shrink:0;fill:none;stroke:currentColor;
stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.quick-search-categories button.is-selected{background:var(--color-primary-tint);color:var(--color-primary-deep)}
.quick-search-categories button.is-selected span::after{content:"✓";margin-left:auto;padding-left:8px;font-weight:700}
/* ---- panel kết quả "Tra cứu nhanh" — mở khi ấn Enter/nút tìm, hiện Google CSE (Ngữ pháp)
hoặc danh sách kết quả nội bộ (5 danh mục còn lại). Trượt vào từ mép phải, y hệt kiểu dáng/
chuyển động của panel "Cách nhớ và Giải nghĩa" Kanji (#tndg-kanji-info-panel-overlay/
.tndg-kanji-info-panel trong homeJs.js/new-home.css) cho đồng nhất — trước đây là modal nổi
giữa màn hình, giờ đổi sang panel để 2 tính năng "xem nhanh 1 kết quả ngay tại chỗ" của site
dùng chung 1 ngôn ngữ thiết kế. JS (new-home.js) chỉ toggle class "is-open", không đổi gì
thêm — html/body giữ nguyên `#quickSearchPopup` (JS trỏ theo id này) chỉ style lại. */
.qspop-backdrop{
/* z-index cũ (10001) thấp hơn .box-search-container.hp_btn_onfocus/.kanji-search-result-home
.hp_btn_onfocus (9999999!important — trạng thái "focus" phát sáng của khung tìm kiếm trang
chủ, xem phía dưới file này) — nếu khung đó đang bật (VD người dùng vừa tương tác khung
tìm kiếm chính trước khi mở "Tra cứu nhanh" ở sidebar) thì nó đè hẳn lên trên panel này dù
panel mở SAU, đúng lỗi "panel nằm dưới khung search". Nâng lên cao hơn 9999999 nhưng vẫn
thấp hơn #tndg-kanji-info-panel-overlay (2147483000 — panel "Cách nhớ và Giải nghĩa" có
thể mở LỒNG bên trên panel này khi bấm 1 Kanji trong kết quả, nên phải luôn ở trên). */
/* Đóng panel: PHẢI trượt hết ra phải rồi mới mờ nền dần (tuần tự, không mờ+trượt cùng lúc)
— giống hệt cơ chế/thời lượng của #tndg-kanji-info-panel-overlay phía trên (transition-
delay = đúng thời lượng trượt .qspop-panel bên dưới) để 2 panel trượt-từ-phải của site có
cùng 1 cảm giác đóng. Mở panel thì hiện ngay, không cần trễ. */
position:fixed;inset:0;z-index:99999999;
background:rgba(10,13,18,.45);
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .26s ease .34s,visibility 0s linear .6s;
}
.qspop-backdrop.is-open{
opacity:1;visibility:visible;pointer-events:auto;
transition:opacity .22s ease,visibility 0s linear;
}
.qspop-panel{
/* Rộng bằng đúng .tndg-kanji-info-panel (panel "Cách nhớ và Giải nghĩa") để 2 panel trượt-
từ-phải của site có cùng bề rộng, không lệch nhau khi mở lần lượt. */
position:absolute;top:0;right:0;height:100%;width:min(94vw,1235px);
display:flex;flex-direction:column;
background:#fff;box-shadow:-10px 0 30px rgba(0,0,0,.18);
transform:translateX(100%);
transition:transform .34s cubic-bezier(.32,.72,0,1);
will-change:transform;
}
.qspop-backdrop.is-open .qspop-panel{transform:translateX(0)}
@media (max-width:480px){
.qspop-panel{width:100%}
}
.qspop-header{
display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
padding:18px 20px;border-bottom:1px solid var(--color-border);flex-shrink:0;
}
.qspop-scope{
display:inline-block;margin-bottom:6px;padding:3px 9px;border-radius:99px;
background:var(--color-primary-tint);color:var(--color-primary-deep);
font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
}
.qspop-heading{flex:1 1 auto;min-width:0}
.qspop-heading h2{
margin:0;font-family:var(--font-ui);font-size:16.5px;font-weight:700;
color:var(--color-text-primary);line-height:1.4;word-break:break-word;
}
/* Phạm vi "Kanji"/"Giáo trình"/"Flashcard"/"Đề thi"/"Anime": #quickSearchPopupHeadingKanji/
GiaoTrinh/Flashcard/DeThi/Anime thay hẳn header mặc định (runKanjiLookup()/runScopeLookup()
trong new-home.js) bằng hàng kiểu "Tìm thấy N..." (.result-list-kanji ở trên trong file này) —
nhưng .result-list-kanji vốn thiết kế để nằm trong khối kết quả có padding riêng (VD
#kanji_search_result_home), margin âm/padding/border-bottom của nó dùng để "tràn" ra khớp viền
khối cha đó. Ở đây nó nằm thẳng trong .qspop-heading (đã có padding/border-bottom riêng của
.qspop-header) nên phải bỏ hết margin/padding/border-bottom, tránh cộng dồn 2 lớp viền/khoảng
cách chồng lên nhau (đúng lỗi "2 đường line" chụp màn hình thực tế ở phạm vi Đề thi). */
#quickSearchPopupHeadingKanji .result-list-kanji,
#quickSearchPopupHeadingGiaoTrinh .result-list-kanji,
#quickSearchPopupHeadingFlashcard .result-list-kanji,
#quickSearchPopupHeadingDeThi .result-list-kanji,
#quickSearchPopupHeadingAnime .result-list-kanji,
#quickSearchPopupHeadingNguPhap .result-list-kanji{margin:0;padding:0;border-bottom:none}
.qspop-close{
flex-shrink:0;width:32px;height:32px;border:none;border-radius:9px;
background:var(--page-bg);color:var(--color-text-secondary);cursor:pointer;
display:flex;align-items:center;justify-content:center;transition:background .15s ease;
}
.qspop-close:hover{background:var(--color-border)}
.qspop-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qspop-body{flex:1;min-height:0;overflow-y:auto;padding:16px 20px 22px}
.qspop-internal{display:flex;flex-direction:column;gap:10px}
.qspop-internal .qsp-state{padding:30px 12px;font-size:13.5px;color:var(--color-text-tertiary);text-align:center}
.qspop-internal .qsp-see-all{
display:block;margin-top:4px;padding:10px 12px;font-size:13px;font-weight:600;
color:var(--color-primary-deep);text-align:center;
}
.qspop-internal .qsp-see-all:hover{text-decoration:underline}
.qspop-gcse{display:none}
.qspop-gcse.is-active{display:block}
.box-item{display:flex;flex-direction:column;align-items:stretch;padding:4px 12px;gap:3px;flex:0 0 auto;position:relative;z-index:1;transition:padding .25s cubic-bezier(.32,.72,0,1)}
/* khoảng trống còn lại giữa nav và box-bottom — nơi hiện tranh minh họa núi Phú Sĩ/torii,
crop theo chiều cao thật còn lại (không đè lên nav) vì background bị clip theo khung của chính div này */
.sidebar-illustration{flex:1;min-height:60px;background:url('../images/sidebar_bg_blue.png') bottom center/100% auto no-repeat}
body.sidebar-collapsed .sidebar-illustration{display:none}
.box-item.box-bottom{
/* trước có background:#fff riêng, tạo 1 khối trắng lệch tông so với gradient teal nhạt
của .aside-menu phía trên — bỏ nền để "Tài khoản/Giới thiệu" liền mạch với sidebar */
flex:0 0 auto;padding:10px 12px 16px;background:transparent;border-top:1px solid var(--color-border);
}
.menu-item{
width:100%;height:auto;border-radius:10px;
display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:14px;padding:11px 12px;
color:var(--color-text-secondary); position:relative;
/* width/height/padding/gap CÓ animate được — cùng thời lượng/easing với transition width của
.aside-menu (mục 6, style.css) để nội dung bên trong co/giãn ĐỒNG BỘ với khung sidebar thay
vì snap sang kích thước cuối cùng ngay lập tức rồi khung mới đuổi theo sau (giật). */
transition:background .15s ease,color .15s ease,transform .15s ease,
width .25s cubic-bezier(.32,.72,0,1),height .25s cubic-bezier(.32,.72,0,1),
padding .25s cubic-bezier(.32,.72,0,1),gap .25s cubic-bezier(.32,.72,0,1);
}
/* Trong lúc đang co/giãn (đã có .sidebar-collapsed nhưng CHƯA settle — xem new-home.js), tự cắt
phần nhãn có thể tràn ra ngoài hàng đang hẹp dần, tránh chữ "ló" đè lên icon/hàng bên cạnh giữa
chừng animation. Bỏ overflow:hidden ngay khi đã settle vì lúc đó span chuyển sang
position:absolute để làm tooltip nổi — nếu vẫn còn overflow:hidden trên chính .menu-item (containing
block của span tuyệt đối) thì tooltip sẽ bị cắt mất, không hiện ra được. */
body.sidebar-collapsed:not(.sidebar-collapsed-settled) .menu-item{overflow:hidden}
.menu-item svg{
width:24px;height:24px;flex-shrink:0;transition:transform .15s ease;
fill:none!important;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.menu-item span{
position:static;transform:none;background:none;color:inherit;box-shadow:none;
opacity:1;padding:0;font-size:16px;font-weight:500;pointer-events:auto;white-space:nowrap;
/* max-width đủ rộng cho nhãn dài nhất ("Học qua hình ảnh") ở chế độ mở rộng, nhưng vẫn là 1
con số cụ thể (không phải "none") để CÓ THỂ animate dần về 0 khi thu gọn — xem rule collapsed
bên dưới. Nhờ đó icon tự trôi dần về giữa hàng theo justify-content:center (đã bật sẵn ngay
từ .sidebar-collapsed, không đợi -settled) khi nhãn co hết chỗ, thay vì icon dán chết ở mép
trái suốt animation rồi "giật" sang giữa khi hàng đã đứng yên. */
max-width:200px;overflow:hidden;
transition:opacity .18s ease,max-width .25s cubic-bezier(.32,.72,0,1);
}
.menu-item:hover{background:var(--page-bg);color:var(--color-text-primary)}
.menu-item:hover svg{transform:translateY(-1px)}
/* trạng thái active của menu = pill teal nhạt + vạch teal bên trái, giống ảnh tham chiếu */
.menu-item.active{background:var(--color-primary-tint);color:var(--color-primary-deep);box-shadow:none;border-left:3px solid var(--color-primary);padding-left:9px}
.menu-item.active:hover{background:var(--color-primary-tint)}
/* ---- .sidebar-collapsed: icon-only, tooltip khi hover (giao diện thu gọn cũ) ----
Tách 2 lớp (xem setSidebarCollapsed() trong new-home.js):
- body.sidebar-collapsed: áp ngay, chỉ đổi các thuộc tính animate được (width/height/padding/
gap/opacity/max-width) — chạy song song, cùng nhịp với transition width của .aside-menu.
justify-content:center cũng bật NGAY ở đây (không đợi -settled): vì span co max-width về 0
CÙNG NHỊP, icon tự trôi dần về giữa theo từng khung hình khi nhãn hết chỗ, không cần đợi
flex-direction đổi mới canh giữa được — tránh hẳn kiểu "icon lệch trái suốt animation rồi mới
giật về giữa" (bug đã gặp khi còn để justify-content:center trong -settled).
- body.sidebar-collapsed-settled: chỉ thêm SAU KHI khung đã co xong (hoặc gỡ NGAY LẬP TỨC
trước khi khung bắt đầu giãn) — CHỈ còn dùng cho tooltip nổi (`.menu-item span` chuyển
position:static → absolute, thuộc tính không animate được) vì lúc settle nhãn đã max-width:0
(vô hình/không chiếm chỗ), đổi position lúc này không gây giật gì thêm. */
body.sidebar-collapsed .box-item{align-items:center;padding:4px 8px}
body.sidebar-collapsed .menu-item{
width:52px;height:52px;gap:0;padding:0;justify-content:center;
}
body.sidebar-collapsed .menu-item.active{border-radius:12px;border-left:none;padding-left:0}
body.sidebar-collapsed .quick-search{margin:2px 8px 12px;justify-content:center;padding:9px}
body.sidebar-collapsed .quick-search input{display:none}
body.sidebar-collapsed .menu-item span{opacity:0;max-width:0}
body.sidebar-collapsed-settled .menu-item span{
position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
background:#1b1b1a; color:#fff; font-size:12px; font-weight:500; padding:6px 12px;
border-radius:8px; white-space:nowrap; pointer-events:none; transition:opacity .15s ease,transform .15s ease;
box-shadow:0 4px 14px rgba(10,13,18,.25); z-index:5;
}
body.sidebar-collapsed-settled .menu-item:hover span{opacity:1;transform:translate(4px,-50%)}
body.sidebar-collapsed .aside-menu .logo-word{display:none}
/* mobile drawer close button */
.btn-close-sidebar{
width:32px;height:32px;border:none;border-radius:50%;flex-shrink:0;
background:rgba(255,255,255,.15);color:#fff;align-items:center;justify-content:center;
}
.btn-close-sidebar svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.btn-close-sidebar:hover{background:rgba(255,255,255,.28)}
/* ============ MAIN WRAP ============ */
.main-wrap{margin-left:var(--sidebar-w);transition:margin-left .25s cubic-bezier(.32,.72,0,1)}
/* wpDiscuz tự tính left cho #wpd-bubble-wrapper (bong bóng bình luận) bằng JS dựa theo vị trí
.entry-content, không biết tới .aside-menu (sidebar cố định bên trái, z-index:100) của giao
diện mới -> bong bóng bị rơi vào vùng sidebar và chìm phía sau (z-index:99), coi như mất hẳn.
Ghim lại ngay bên phải sidebar (theo đúng --sidebar-w hiện tại, kể cả khi thu gọn) và nâng
z-index cao hơn sidebar. Chỉ áp dụng ở layout desktop/tablet — dưới 768px sidebar là drawer
ẩn ngoài màn hình (xem @media max-width:767px phía trên) nên không cần bù trừ. */
@media (min-width:768px){
#wpd-bubble-wrapper.wpd-left-content,
#wpd-bubble-wrapper.wpd-left-corner{
left: calc(var(--sidebar-w) + 20px) !important;
z-index: 101 !important;
}
/* Mặc định wpDiscuz đặt bubble ở bottom:80px trên PC (style.css plugin) — kéo sát xuống
cuối màn hình còn cách 20px cho đồng bộ với khoảng cách trên mobile. */
#wpd-bubble-wrapper{
bottom: 20px !important;
}
}
/* Bong bóng bình luận wpDiscuz mặc định opacity:0.9 (style.css plugin, load SAU new-home.css
nên cùng specificity là plugin thắng) — mờ bớt còn 0.3 lúc bình thường để đỡ chiếm mắt nhìn,
rõ hẳn (1) khi hover vào. Cần !important để thắng rule opacity:0.9 load sau. */
#wpd-bubble-wrapper{
opacity: .3 !important;
transition: opacity .2s ease;
}
#wpd-bubble-wrapper:hover{
opacity: 1 !important;
}
/* Thanh "luyện tập nhanh" (.wrap-learn-bar, single.php — 5 nút Học/Thẻ ghi nhớ/Ghép thẻ/
Chính tả/Kiểm tra) là fixed bottom, z-index:9999 — cao hơn hẳn #wpd-bubble-wrapper mặc định
của wpDiscuz (z-index:99, fixed bottom-left). single.php đã chừa sẵn 64px bên trái thanh học
trên mobile (@media max-width:768px, .wrap-learn-bar.nav{left:64px}) đúng bằng chỗ bong bóng
(wpd-left-corner: left:10px, rộng 40px) cần — giờ chỉ cần hạ bong bóng xuống ngang hàng
(cùng bottom:3px) thay vì để wpDiscuz tự đặt bottom:20px mặc định. Chỉ áp dụng khi thanh học
đang thực sự hiển thị (.nav-visible, JS single.php thêm class khi cuộn quá 300px) — trang
không có thanh học thì giữ nguyên vị trí gốc của wpDiscuz. */
@media (max-width:1024px){
body:has(.wrap-learn-bar.nav-visible) #wpd-bubble-wrapper{
bottom: 3px !important;
}
}
/* ---- app download strip ---- */
.container-ad{
display:flex;align-items:center;justify-content:space-between;
background:#fff;border-bottom:1px solid var(--color-border);
padding:10px 20px;
}
.ad-left{display:flex;align-items:center;gap:10px}
.ic-mazii-badge{
width:36px;height:36px;border-radius:50%;object-fit:cover;display:block;flex-shrink:0;
box-shadow:0 2px 6px rgba(var(--color-logo-accent-rgb),.35);
}
.app-open-title{font-weight:700;font-size:14px}
.app-open-des{font-size:12px;color:var(--color-text-tertiary)}
.btn-open{background:var(--accent-amber);color:#171a1c;border:none;padding:8px 18px;border-radius:var(--btn-radius);font-weight:700;font-size:13px}
.btn-open:hover{background:var(--accent-amber-hover)}
/* ---- header ---- */
.box-header{
display:flex;align-items:center;justify-content:space-between;gap:16px;
/* header kính mờ + viền/bóng tông teal nhạt, học theo .topbar của japanese-learning-ui
thay vì nền trắng đặc + không bóng như trước — chỉ đổi màu, giữ nguyên bố cục */
background:rgba(255,255,255,.93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border-bottom:1px solid var(--color-border);
box-shadow:0 2px 10px rgba(20,65,75,.025);
padding:12px 30px;
position:sticky;top:0;z-index:60;
}
.title-heading{display:flex;align-items:center;gap:14px;min-width:0}
.greeting-block{min-width:0}
.greeting-line1{color:var(--color-text-primary);font-size:15px;font-weight:700;white-space:nowrap;display:flex;align-items:center;gap:6px}
.greeting-line1 .wave{font-size:16px}
.greeting-line2{color:var(--color-text-tertiary);font-size:12.5px;white-space:nowrap;margin-top:1px}
.box-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.btn{border:none;font-size:14px}
/* ---- social links (Facebook / TikTok / Threads / Instagram) ---- */
.social-links{display:flex;align-items:center;gap:8px;margin-right:2px}
.social-btn{
position:relative;width:38px;height:38px;border-radius:50%;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
background:var(--page-bg);color:var(--color-text-secondary);
transition:background .2s ease,color .2s ease,transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease;
}
/* biến thể phẳng dùng ở header: không nền vòng tròn khi chưa hover, giống ảnh tham chiếu */
.social-links--flat .social-btn{background:transparent}
.social-btn svg{width:19px;height:19px;position:relative;z-index:1}
.social-btn::before{
content:"";position:absolute;inset:0;border-radius:50%;
background:var(--social-color,var(--color-primary));
transform:scale(0);opacity:0;
transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s ease;
}
.social-btn:hover{color:#fff;transform:translateY(-3px) rotate(-6deg);box-shadow:0 6px 14px -4px var(--social-shadow,rgba(2,159,178,.5))}
.social-btn:hover::before{transform:scale(1);opacity:1}
.social-btn:active{transform:translateY(-1px) scale(.94)}
.social-fb{--social-color:#1877f2;--social-shadow:rgba(24,119,242,.45)}
.social-tiktok{--social-color:#000;--social-shadow:rgba(0,0,0,.35)}
.social-threads{--social-color:#000;--social-shadow:rgba(0,0,0,.35)}
.social-instagram{--social-shadow:rgba(188,42,141,.45)}
.social-instagram::before{background:radial-gradient(circle at 30% 110%,#ffdb73 0%,#fdad4e 15%,#ff6f52 32%,#e02d5f 50%,#c72e93 68%,#8a3ab9 84%,#5d4bd0 100%)}
/* ---- buttons: Đăng nhập (teal đặc) / Đăng ký (teal nhạt) ---- */
.btn-primary{background:var(--color-primary);color:#fff;padding:9px 18px;border-radius:var(--btn-radius);font-weight:500;box-shadow:0 2px 6px rgba(var(--color-primary-rgb),.25)}
.btn-primary:hover{background:var(--color-primary-deep);box-shadow:0 3px 10px rgba(var(--color-primary-rgb),.35)}
.btn-register{background:var(--color-primary-tint);color:var(--color-primary-deep);padding:9px 18px;border-radius:var(--btn-radius);font-weight:500}
.btn-register:hover{background:#d3edf0}
.box-flag{display:flex;align-items:center;gap:4px;background:none;border:none;padding:8px;border-radius:var(--btn-radius)}
.box-flag:hover{background:var(--page-bg)}
.flag-emoji{font-size:18px}
.chev{width:16px;height:16px;color:var(--color-text-tertiary)}
.notify-wrap{position:relative;display:flex;align-items:center;flex-shrink:0}
.btn-notify{
position:relative;width:38px;height:38px;border-radius:var(--btn-radius);border:1px solid var(--color-border);
background:#fff;color:var(--color-text-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.btn-notify svg{width:18px;height:18px;color:var(--color-text-secondary)}
.btn-notify:hover{background:var(--page-bg)}
.notify-dot{
position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;
background:#ff4d4f;border:2px solid #fff;
}
/* ---- Bảng thông báo xổ xuống khi bấm chuông (.notify-wrap > .btn-notify + .notify-panel) ----
Layout phỏng theo mock-up user cung cấp (avatar tròn + tiêu đề + mô tả ngắn + thời gian +
chấm trạng thái bên phải + tab "Tất cả/Chưa đọc"). Panel luôn nằm sẵn trong DOM (không
display:none) để opacity/transform animate được mượt — mặc định vô hình + pointer-events:none,
JS (new-home.js) chỉ thêm/gỡ class .is-open. */
.notify-panel{
position:absolute;top:calc(100% + 10px);right:0;width:380px;max-width:calc(100vw - 32px);
background:#fff;border:1px solid var(--color-border);border-radius:16px;
box-shadow:0 14px 34px rgba(20,30,40,.14);z-index:80;overflow:hidden;
opacity:0;transform:translateY(-6px);pointer-events:none;
transition:opacity .18s ease,transform .18s ease;
}
.notify-panel.is-open{opacity:1;transform:translateY(0);pointer-events:auto}
.notify-panel-header{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:14px 16px;border-bottom:1px solid var(--color-border);
}
.notify-panel-title{font-weight:800;font-size:15px;color:var(--color-text-primary)}
.notify-tabs{display:flex;gap:2px;background:var(--page-bg);border-radius:20px;padding:3px}
.notify-tab{
border:none;background:transparent;cursor:pointer;font-family:inherit;
font-size:12px;font-weight:600;padding:5px 12px;border-radius:16px;color:var(--color-text-tertiary);
transition:background .15s ease,color .15s ease;
}
.notify-tab.is-active{background:#fff;color:var(--color-text-primary);box-shadow:0 1px 4px rgba(20,30,40,.14)}
.notify-panel-list{max-height:420px;overflow-y:auto}
.notify-item{
display:flex;align-items:flex-start;gap:10px;padding:12px 16px;position:relative;
text-decoration:none;border-bottom:1px solid var(--color-border);
}
.notify-item:last-child{border-bottom:none}
.notify-item:hover{background:var(--page-bg)}
.notify-item.is-filtered-out{display:none}
.notify-item-avatar{
flex-shrink:0;width:38px;height:38px;border-radius:50%;overflow:hidden;
background:var(--color-primary-tint,#eaf6f7);display:flex;align-items:center;justify-content:center;
}
.notify-item-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.notify-item-avatar svg{width:18px;height:18px;color:var(--color-primary)}
.notify-item-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.notify-item-kicker{font-size:11.5px;font-weight:700;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.02em}
.notify-item-time{font-weight:400;text-transform:none;margin-left:4px;letter-spacing:0}
.notify-item-title{
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
font-size:13.5px;line-height:1.42;color:var(--color-text-primary);font-weight:700;
}
.notify-item-excerpt{
display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
font-size:12px;line-height:1.4;color:var(--color-text-tertiary);
}
.notify-item-status{flex-shrink:0;width:8px;height:8px;border-radius:50%;margin-top:6px}
/* Chưa xem: chấm tròn màu primary bên phải + tiêu đề đậm (mặc định). Đã xem: ẩn chấm, tiêu đề
thường + nhạt màu hơn — trạng thái do JS gán qua tndgNotifySyncReadState(), dựa vào
localStorage nên hoạt động cho cả khách chưa đăng nhập. */
.notify-item.is-unread .notify-item-status{background:var(--color-primary)}
.notify-item.is-read .notify-item-status{background:transparent}
.notify-item.is-read .notify-item-title{font-weight:500;color:var(--color-text-secondary)}
.notify-empty{padding:26px 16px;text-align:center;font-size:13px;color:var(--color-text-tertiary)}
.avatar.header-avatar{width:38px;height:38px;font-size:15px}
/* ---- Popup "Tính năng đang được phát triển" (nút Đăng nhập/Đăng ký ở header, mục 17
HUONG_DAN_AI_SUA_TRANG.md) — modal căn giữa màn hình, luôn nằm sẵn trong DOM (không
display:none) để opacity/transform animate mượt, JS chỉ toggle class .is-open. z-index
cao hơn #tndg-kanji-info-panel-overlay (2147483000) vì popup này có thể xuất hiện từ
header ở BẤT KỲ trang nào, kể cả khi 1 panel khác đang mở phía dưới. */
.tndg-comingsoon-overlay{
position:fixed;inset:0;z-index:2147483600;
background:rgba(10,13,18,.5);
display:flex;align-items:center;justify-content:center;padding:20px;
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .2s ease,visibility 0s linear .2s;
}
.tndg-comingsoon-overlay.is-open{
opacity:1;visibility:visible;pointer-events:auto;
transition:opacity .2s ease,visibility 0s linear;
}
.tndg-comingsoon-modal{
position:relative;width:360px;max-width:100%;background:#fff;border-radius:18px;
box-shadow:0 20px 50px rgba(20,30,40,.24);padding:32px 24px 24px;text-align:center;
transform:scale(.92) translateY(6px);transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.tndg-comingsoon-overlay.is-open .tndg-comingsoon-modal{transform:scale(1) translateY(0)}
.tndg-comingsoon-close{
position:absolute;top:10px;right:10px;width:30px;height:30px;padding:0;
display:flex;align-items:center;justify-content:center;border-radius:50%;border:none;
background:var(--page-bg);color:var(--color-text-tertiary);cursor:pointer;
line-height:normal;
}
.tndg-comingsoon-close svg{width:16px;height:16px;fill:currentColor}
.tndg-comingsoon-close:hover{background:var(--color-border);color:var(--color-text-primary)}
.tndg-comingsoon-icon{font-size:38px;line-height:1;margin-bottom:12px}
.tndg-comingsoon-title{font-size:17px;font-weight:800;color:var(--color-text-primary);margin:0 0 8px}
.tndg-comingsoon-desc{font-size:13.5px;line-height:1.5;color:var(--color-text-tertiary);margin:0 0 20px}
.tndg-comingsoon-ok{
height:auto;line-height:normal;width:100%;padding:11px 20px;border:none;border-radius:12px;
background:var(--color-primary);color:#fff;font-family:inherit;font-size:14px;font-weight:700;
cursor:pointer;
}
.tndg-comingsoon-ok:hover{filter:brightness(.95)}
/* Khách chưa đăng nhập: 2 nút Đăng nhập/Đăng ký thay cho avatar (.btn-primary/.btn-register đã
có sẵn style teal đặc/teal nhạt — vốn định nghĩa sẵn cho đúng khu vực này nhưng trước đây chưa
có markup nào dùng tới, kể cả rule mobile .btn-register{display:none} ở breakpoint 767px). */
.auth-links{display:flex;align-items:center;gap:8px;flex-shrink:0}
.auth-links .btn-primary,
.auth-links .btn-register{font-size:13.5px;white-space:nowrap;text-decoration:none;display:inline-block}
.btn-mobile-menu{
display:none;width:38px;height:38px;border:none;border-radius:var(--btn-radius);
background:var(--page-bg);color:var(--color-text-primary);align-items:center;justify-content:center;flex-shrink:0;
}
.btn-mobile-menu svg{width:20px;height:20px}
.btn-mobile-menu:hover{background:var(--color-border)}
/* ============ CONTENT ============ */
.page-container{max-width:1240px;margin:0 auto;padding:16px 20px 40px}
/* Các trang khác trang chủ (bài viết/page/kanji/flashcard/...) vẫn dùng khung
#content.site-content > .mt-container kế thừa từ layout cũ (không có gutter),
nên nội dung dính sát sidebar bên trái và mép phải. Áp cùng gutter như
.page-container ở trang chủ cho đồng nhất. */
body.new-home-ui #content.site-content > .mt-container{padding:16px 20px 40px}
/* ---- search card ---- */
.box-search-container{
background:var(--card-bg);border-radius:var(--card-radius);box-shadow:var(--card-shadow);
padding:16px; margin-bottom:16px; border:3px solid transparent;
transition:box-shadow .28s ease,border-color .28s ease;
position:relative;overflow:hidden;
}
.search-heading{position:relative;z-index:1;max-width:64%;margin:18px 0 16px}
.search-heading h1{margin:0;font-family:var(--font-ui);font-size:26px;font-weight:800;color:var(--color-text-primary);line-height:1.3}
.search-heading h1 span{color:#078c96}
.search-heading p{margin:6px 0 0;padding:0;text-align:left;font-family:var(--font-ui);font-size:13.5px;color:var(--color-text-tertiary)}
.search-illustration{
position:absolute;top:-10px;right:-10px;width:420px;height:auto;object-fit:contain;pointer-events:none;z-index:0;
-webkit-mask-image:linear-gradient(to bottom, #000 65%, transparent 100%);
mask-image:linear-gradient(to bottom, #000 65%, transparent 100%);
}
@media (max-width:900px){.search-illustration{display:none}.search-heading{max-width:100%}}
.box-search-container:focus-within{box-shadow:0 4px 20px rgba(var(--color-primary-rgb),.16)}
/* ---- chế độ tập trung khi bấm vào ô search (giống bản cũ: mờ toàn bộ phần còn lại,
viền teal quanh khu vực search) — logic JS ở assets/js/new-home.js. Overlay được JS
thêm/xoá khỏi DOM (không chỉ ẩn/hiện), nên phải tự bật opacity:0 → .is-visible ở lần
render kế tiếp (rAF) mới có hiệu ứng fade-in, và khi tắt phải đợi hết transition rồi
JS mới gỡ phần tử (transitionend/timeout) thì fade-out mới kịp chạy hết. */
.background-blur{
opacity:0;width:100%;height:100%;background-color:#000000b0;
display:block;position:fixed;left:0;top:0;bottom:0;z-index:999;
transition:opacity .28s ease;
}
.background-blur.is-visible{opacity:.5}
.box-search-container.hp_btn_onfocus{
border-radius:var(--card-radius);background:#fff;border-color:var(--color-primary)!important;
z-index:9999999!important;position:relative;overflow:hidden;
}
/* Các khối kết quả tìm kiếm chèn bằng AJAX (Kanji, Giáo trình... — dùng chung class
"kanji-search-result-home", xem page-home.php) cũng phải "nổi" lên trên nền tối giống hệt
khung tìm kiếm — nếu không, dù nền vẫn mờ đúng ý, kết quả lại bị .background-blur (z-index
999) đè tối lên vì bản thân nó không có z-index/position để thoát khỏi lớp phủ đó. */
.kanji-search-result-home.hp_btn_onfocus{
z-index:9999999!important;position:relative;
}
.box-search{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.content-search{
flex:1;min-width:280px;display:flex;align-items:center;gap:8px;
background:var(--page-bg);border-radius:12px;padding:4px 6px 4px 14px;
border:1.5px solid transparent;transition:border-color .15s ease,background .15s ease;
}
.content-search:focus-within{border-color:var(--color-primary);background:#fff}
.btn-search{background:none;border:none;color:var(--color-text-tertiary);display:flex;flex-shrink:0}
.btn-search svg{width:20px;height:20px}
.input-search{flex:1;min-width:0;border:none;background:transparent;outline:none;font-size:15px;padding:10px 4px;font-family:var(--font-ui);color:var(--color-text-primary)}
.input-search::placeholder{color:var(--color-text-tertiary)}
.btn-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.vertical-divider{width:1px;height:26px;background:var(--color-border-2)}
.gr-btn{display:flex;gap:2px}
.btn-common{width:34px;height:34px;border:none;background:none;border-radius:8px;color:var(--color-text-secondary);display:flex;align-items:center;justify-content:center}
.btn-common svg{width:18px;height:18px}
.btn-common:hover{background:var(--color-primary-tint);color:var(--color-primary-deep)}
.lang-search{flex-shrink:0}
.dict-show{
display:flex;align-items:center;gap:6px;background:var(--color-primary-tint);border:none;
padding:12px 16px;border-radius:12px;color:var(--color-primary-deep);font-weight:600;font-size:14.5px;white-space:nowrap;
}
.dict-show:hover{background:#d3edf0}
.chev-blue{width:16px;height:16px;color:var(--color-primary-deep)}
.line-btn{display:flex;align-items:center;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.btn-tab{
background:none;border:none;padding:9px 16px;border-radius:8px;font-size:14px;font-weight:500;color:var(--color-text-tertiary);
}
.btn-tab.active{background:var(--color-primary-tint);color:var(--color-primary-deep)}
.btn-tab:hover{color:var(--color-primary-deep)}
.btn-chat-qa{
display:flex;align-items:center;gap:6px;border:1px dashed var(--color-text-tertiary);color:var(--color-text-tertiary);padding:8px 14px;
}
.ai-ic{width:15px;height:15px;color:var(--accent-amber)}
/* ---- result word card ---- */
.result-panel{max-width:820px;margin:0 auto}
.word-card{background:var(--card-bg);border-radius:var(--card-radius);padding:28px 30px;box-shadow:var(--card-shadow)}
.wc-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.wc-word{font-family:var(--font-jp);font-size:34px;font-weight:700;color:var(--color-text-primary)}
.wc-kana{font-size:15px;color:var(--color-text-tertiary)}
.wc-play{width:34px;height:34px;border-radius:50%;border:1px solid var(--color-border-2);background:#fff;color:var(--color-primary);display:flex;align-items:center;justify-content:center}
.wc-play:hover{background:var(--color-primary-tint)}
.wc-play svg{width:16px;height:16px}
.wc-tags{display:flex;gap:6px;margin:10px 0 18px}
.wc-tag{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:50rem;background:var(--color-primary-tint);color:var(--color-primary-deep)}
.wc-meanings{display:flex;flex-direction:column;gap:10px}
.wc-meanings li{display:flex;gap:10px;font-size:15px;line-height:1.6;color:var(--color-text-secondary)}
.wc-meanings b{color:var(--color-primary-deep);flex-shrink:0}
.wc-example{margin-top:20px;padding-top:18px;border-top:1px solid var(--color-border)}
.wc-example h4{margin:0 0 8px;font-size:13px;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.wc-example p{margin:0 0 4px;font-family:var(--font-jp)}
.wc-example small{color:var(--color-text-tertiary)}
.wc-empty{padding:60px 20px;text-align:center;color:var(--color-text-tertiary)}
/* ---- two-column layout ---- */
/* section-block--full: nằm ngoài .row-main nên không được flex gap của .col-main
lo khoảng cách giúp — tự thêm margin-bottom bằng đúng gap đó (16px) để đều nhau. */
.section-block--full{margin-bottom:16px}
.row-main{display:flex;gap:16px;align-items:flex-start}
.col-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}
.col-side{width:300px;flex-shrink:0;position:sticky;top:84px;align-self:flex-start}
/* .col-side không dùng flex/gap để chia khoảng cách — 2 khối con (.motivation-card/.quick-links)
tự lo khoảng cách bằng margin-top:16px của riêng .motivation-card (xem rule ở dưới, dùng
CHUNG với #secondary.tndg-post-sidebar trong inc/template-functions.php — nơi đó lại tự có
flex+gap:16px riêng nên không đụng tới 2 dòng dưới đây). Từ khi đổi thứ tự "Giữ lửa Nhật Ngữ"
lên trước "Liên kết nhanh" trên trang chủ, phải tự set lại margin theo đúng vị trí MỚI — nếu
không, .motivation-card (giờ là con đầu) thừa 16px phía trên, còn .quick-links (giờ là con thứ
2) mất hẳn khoảng cách với khối phía trên nó. */
.col-side .motivation-card{margin-top:0}
.col-side .quick-links{margin-top:16px}
/* style.css đặt overflow:hidden trên
, còn vốn đã overflow-y:scroll (dòng 47) —
2 scroll container lồng nhau (html + body) làm position:sticky của .col-side bám nhầm mốc
vào body (ancestor GẦN hơn), nhưng body không tự cuộn được (chiều cao luôn khớp nội dung,
phần cuộn thật nằm ở html) nên sidebar trôi tuột như position:static thay vì dính lại khi
cuộn trang. Chỉ trên trang chủ (body.new-home-ui): bỏ hẳn overflow trên body (không còn là
scroll container), chuyển việc che tràn ngang sang qua :has() — để html là scroll
container DUY NHẤT, sticky mới tính đúng theo cuộn trang thật. */
html:has(body.new-home-ui){overflow-x:hidden}
body.new-home-ui{overflow:visible}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.word-day-container, .history-home-container, .feedback-card{
background:var(--card-bg);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:16px;
transition:box-shadow .2s ease,transform .2s ease;
}
.word-day-container:hover, .history-home-container:hover{box-shadow:0 6px 20px rgba(17,62,74,.08);transform:translateY(-2px)}
.line-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.vertical-divider-accent{width:3px;height:18px;background:var(--color-primary);border-radius:2px;flex-shrink:0}
.tt-main-df{font-size:17px;font-weight:600;color:var(--color-text-primary);flex:1}
.tt-more{font-size:13.5px;font-weight:600;color:oklch(0.5 0.1 195);text-decoration:none}
.tt-more:hover{color:var(--color-primary-deep)}
.quick-links .line-top svg{width:22px;height:22px;flex-shrink:0;fill:none;stroke:#078c96;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:44px 10px;color:var(--color-text-tertiary)}
.empty-ic{width:44px;height:44px;opacity:.35}
.empty-state .tt-main{font-size:14px;margin:0;color:var(--color-text-tertiary)}
/* ---- promo banner: gradient teal + CTA cam san hô ---- */
.promo-banner{
position:relative;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
background:linear-gradient(120deg,var(--sidebar-grad-b),var(--color-primary) 70%);border-radius:var(--card-radius);
padding:22px 26px;color:#fff;overflow:hidden;box-shadow:0 8px 24px rgba(var(--color-primary-rgb),.3);
}
.promo-banner::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(circle at 85% 0%, rgba(255,255,255,.18), transparent 55%);
}
.promo-close{
position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;border:none;
background:rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center;
}
.promo-close svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.promo-close:hover{background:rgba(255,255,255,.35)}
.promo-qr{width:64px;height:64px;background:#fff;border-radius:8px;padding:6px;flex-shrink:0}
.promo-text{display:flex;flex-direction:column;gap:4px;flex:1;min-width:200px}
.promo-text strong{font-size:18px;font-family:var(--font-jp)}
.promo-text span{font-size:13.5px;opacity:.9}
.promo-cta{background:var(--accent-coral);color:#fff;border:none;padding:11px 22px;border-radius:50rem;font-weight:700;font-size:13.5px;flex-shrink:0}
.promo-cta:hover{background:var(--accent-coral-hover)}
/* ---- course archive hero (/khoa-hoc/) ---- */
/* .course-hero dùng chung class .tutor-container với .tutor-wrap (khối filter+lưới khóa học
bên dưới) để tự động khớp đúng max-width/canh giữa của Tutor LMS ở mọi kích thước màn hình
— .course-hero.tutor-container (2 class) cần thiết để thắng specificity so với chính
.tutor-container gốc khi override padding.
Ảnh nền (Phú Sĩ + hoa anh đào + sách, hero-khoa-hoc.png) đã tự nhạt dần/trắng ở giữa-trái
nên không cần phủ gradient tối lên trên — chữ dùng màu tối như thiết kế tham chiếu. */
.course-hero{
position:relative;display:flex;align-items:center;
background:#eef6f8 url('../images/hero-khoa-hoc.png') right center/cover no-repeat;
border-radius:var(--card-radius);margin:0 auto 20px;overflow:hidden;
box-shadow:var(--card-shadow);
}
.course-hero.tutor-container{padding:48px 60px;min-height:300px}
.course-hero-text{position:relative;max-width:600px}
.course-hero-eyebrow{
display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;
color:var(--color-primary-deep);margin-bottom:14px;
}
/* h1,p toàn site có color:#3d3d3d cố định (style.css) — ép lại đúng tông màu thiết kế ở đây vì
color đặt trực tiếp trên chính element luôn thắng color kế thừa từ .course-hero. */
.course-hero-text h1{font-size:34px;line-height:1.32;margin:0 0 16px;font-family:var(--font-jp);font-weight:800;color:var(--color-text-primary)}
.course-hero-text h1 .hl{color:var(--color-primary)}
.course-hero-text p{font-size:15px;line-height:1.7;margin:0 0 22px;max-width:480px;color:var(--color-text-secondary)}
.course-hero-stats{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;font-weight:700;color:var(--color-primary-deep)}
.course-hero-stat-sep{color:var(--color-border-2);font-weight:400}
/* Khung filter + lưới khóa học bên dưới hero (.tutor-wrap của Tutor LMS) đang có class Bootstrap
.rounded (border-radius:.25rem!important) — bo lại bằng bán kính thẻ chung của site cho đồng
bộ với hero. Cần !important vì .rounded của Bootstrap cũng !important. */
.course-archive-page{border-radius:var(--card-radius)!important}
/* Trang chi tiết khóa học (VD /khoa-hoc//) — khung .tutor-wrap ở đây không có class
.rounded sẵn nên chỉ cần border-radius thường, không cần !important. */
.tutor-wrap.tutor-course-top-info{border-radius:var(--card-radius)}
/* Khung nội dung bài viết đơn (#primary trong single.php) đang có class Bootstrap .rounded
(border-radius:.25rem!important) — bo lại bằng bán kính thẻ chung của site (--card-radius)
cho đồng bộ với sidebar phải mới (.feedback-card/.motivation-card/... cũng dùng --card-radius).
overflow:hidden để ảnh đại diện/nội dung tràn viền không đè lên góc bo. */
.single #primary{border-radius:var(--card-radius)!important;overflow:hidden}
/* Popup "Cách nhớ và Giải nghĩa" kanji (.new-tooltip-content) là absolute, rộng 300px, canh
giữa ký tự kanji (margin-left:-150px) — với kanji ở gần mép trái khung (cột đầu bảng),
popup tràn ra ngoài #primary và bị overflow:hidden ở trên cắt mất, đồng thời để lộ
sidebar trái (.aside-menu, fixed, nằm ngoài #primary) đè lên phần bị cắt đó. Chỉ mở khoá
overflow đúng lúc đang hover popup (không bỏ hẳn overflow:hidden) để vẫn giữ bo góc/clip
ảnh như thiết kế gốc những lúc khác. */
.single #primary:has(.new-tooltip:hover){overflow:visible}
/* ---- generic section block ---- */
.section-block{border-radius:var(--card-radius);padding:16px 0}
/* .level-card/.textbook-card vốn không tự set nền (trước đây ăn nền trắng có sẵn của
.section-block) — giờ section có màu riêng nên phải set nền trắng tường minh cho các thẻ con
này, nếu không chúng sẽ "trong suốt" và lộ màu section ra, mất hẳn cảm giác thẻ nổi lên nền. */
.level-card,.textbook-card{background:var(--card-bg)}
/* ---- community ---- */
.community-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qa-card{border:1px solid var(--color-border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px;transition:box-shadow .2s ease,border-color .2s ease}
.qa-card:hover{box-shadow:0 6px 18px rgba(17,62,74,.08);border-color:transparent}
.qa-tag{align-self:flex-start;font-size:11px;font-weight:700;color:var(--color-primary-deep);background:var(--color-primary-tint);padding:3px 10px;border-radius:50rem}
.qa-card h3{font-size:15px;margin:0;line-height:1.4}
.qa-author{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--color-text-tertiary)}
.qa-author b{color:var(--color-text-primary);font-size:13.5px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--color-primary-deep);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;text-transform:uppercase}
/* role-badge: gộp vào cùng hệ tag/pill teal duy nhất */
.role-badge{background:var(--color-border);color:var(--color-text-secondary);font-size:10.5px;padding:1px 7px;border-radius:50rem;margin-left:2px}
.role-badge.expert{background:var(--color-primary-tint);color:var(--color-primary-deep)}
.qa-time{font-size:11.5px;color:var(--color-text-tertiary)}
.qa-card p{margin:0;font-size:13px;color:var(--color-text-secondary);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qa-footer{display:flex;gap:14px;font-size:12.5px;color:var(--color-text-tertiary);border-top:1px solid var(--color-border);padding-top:10px}
.pagination{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.pagination button{width:30px;height:30px;border-radius:50%;border:1px solid var(--color-border-2);background:#fff;color:var(--color-text-secondary)}
.pagination button:hover{background:var(--color-primary-tint);color:var(--color-primary-deep);border-color:var(--color-primary-tint)}
/* ---- reading ---- */
.reading-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.reading-card{border-radius:12px;overflow:hidden;border:1px solid var(--color-border);transition:box-shadow .2s ease,border-color .2s ease}
.reading-card:hover{box-shadow:0 6px 18px rgba(17,62,74,.1);border-color:transparent}
.reading-card:hover .reading-thumb{transform:scale(1.04)}
.reading-thumb{
height:120px;display:flex;align-items:flex-end;padding:10px;position:relative;
background-size:cover;background-position:center;transition:transform .3s ease;overflow:hidden;
}
/* ảnh nền minh họa bài đọc — gam trung tính, không thuộc bảng màu thương hiệu */
.reading-thumb.t1{background:linear-gradient(135deg,#3e5c8a,#1b2a44)}
.reading-thumb.t2{background:linear-gradient(135deg,#5b7fa6,#22344f)}
.reading-thumb.t3{background:linear-gradient(135deg,#2f3e50,#101820)}
.reading-thumb .furi{color:#fff;font-family:var(--font-jp);font-size:12.5px;line-height:1.5;background:rgba(0,0,0,.35);padding:4px 8px;border-radius:6px}
.reading-meta{display:flex;align-items:center;justify-content:space-between;padding:10px 12px}
.unread{font-size:11.5px;font-weight:600;color:var(--color-primary-deep);background:var(--color-primary-tint);padding:3px 9px;border-radius:50rem}
.date{font-size:11.5px;color:var(--color-text-tertiary)}
/* ---- Trang chủ: cấp độ / flashcard / giáo trình / tips / công cụ / phim ---- */
.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.level-card{border:1px solid var(--color-border);border-radius:var(--card-radius);padding:18px 16px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .2s ease,border-color .2s ease}
.level-card:hover{box-shadow:var(--card-shadow-hover);border-color:transparent}
.level-top{display:flex;align-items:center;justify-content:space-between}
.level-code{font-size:22px;font-weight:800;color:var(--color-text-primary)}
.level-tag{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;font-family:var(--font-jp);flex-shrink:0}
.level-desc{font-size:12.5px;color:var(--color-text-tertiary)}
.level-divider{height:1px;background:var(--color-border)}
.level-links{display:flex;gap:8px}
.level-links a{flex:1;font-size:11.5px;font-weight:600;text-align:center;padding:7px 0;border-radius:8px;background:var(--page-bg);color:var(--color-text-secondary)}
.level-links a:hover{background:var(--color-primary-tint);color:var(--color-primary-deep)}
.flashcard-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
/* background riêng (không kế thừa nền section) — section "Flashcard luyện từ vựng" giờ có nền
pastel riêng (.section-block--flashcard), nếu không set nền thẻ vẫn "trắng" ngầm định do
trước đây section luôn trắng, sẽ bị trong suốt và lộ màu section ra. */
.flashcard-card{background:var(--card-bg);border:1px solid var(--color-border);border-radius:12px;padding:16px 14px;display:flex;flex-direction:column;gap:8px;transition:box-shadow .2s ease,border-color .2s ease}
.flashcard-card:hover{box-shadow:0 6px 18px rgba(17,62,74,.1);border-color:transparent}
.flashcard-badge{width:34px;height:34px;border-radius:9px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12.5px}
.flashcard-name{font-size:13px;font-weight:700}
.flashcard-count{font-size:11.5px;color:var(--color-text-tertiary)}
.textbook-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.textbook-card{border:1px solid var(--color-border);border-radius:12px;overflow:hidden;transition:box-shadow .2s ease,border-color .2s ease}
.textbook-card:hover{box-shadow:0 6px 18px rgba(17,62,74,.1);border-color:transparent}
.textbook-cover{height:88px;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-deep));display:flex;align-items:center;justify-content:center;color:#fff;font-size:19px;font-weight:800;font-family:var(--font-jp);letter-spacing:.02em;text-align:center;padding:0 12px}
.textbook-body{padding:14px 16px}
.textbook-title{font-size:13.5px;font-weight:700;margin-bottom:4px;line-height:1.4}
.textbook-desc{font-size:12px;color:var(--color-text-tertiary);line-height:1.5}
.tips-list{display:flex;flex-direction:column;background:var(--card-bg);border:1px solid var(--color-border);border-radius:var(--card-radius);padding:4px 20px}
.tips-item{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid var(--color-border)}
.tips-item:last-child{border-bottom:none}
.tips-num{width:26px;height:26px;border-radius:7px;background:var(--color-primary-tint);color:var(--color-primary-deep);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0}
.tips-title{flex:1;font-size:13.5px;font-weight:600;color:var(--color-text-primary);line-height:1.4}
.tips-arrow{color:var(--color-text-tertiary)}
.tips-item:hover .tips-title{color:var(--color-primary-deep)}
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tools-card{border-radius:var(--card-radius);padding:20px;display:flex;flex-direction:column;gap:6px;justify-content:center;min-height:110px;transition:transform .2s ease}
.tools-card:hover{transform:translateY(-3px)}
.tools-eyebrow{font-size:11px;font-weight:600;opacity:.8}
.tools-title{font-size:17px;font-weight:800}
.tools-desc{font-size:12.5px;opacity:.85;line-height:1.4}
.movie-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
/* background riêng — lý do giống .flashcard-card ở trên: section "Học qua phim & anime song
ngữ" giờ có nền pastel riêng (.section-block--movie), và .movie-tag bên trong dùng đúng
--color-primary-tint làm nền nên cần .movie-body có nền trắng để không bị chìm màu. */
.movie-card{background:var(--card-bg);border-radius:12px;overflow:hidden;border:1px solid var(--color-border);transition:box-shadow .2s ease,border-color .2s ease}
.movie-card:hover{box-shadow:0 6px 18px rgba(17,62,74,.1);border-color:transparent}
.movie-poster{height:130px;background-size:cover;background-position:center;background-color:var(--color-border)}
.movie-body{padding:12px 14px}
.movie-tag{display:inline-block;font-size:10.5px;font-weight:700;color:var(--color-primary-deep);background:var(--color-primary-tint);padding:3px 9px;border-radius:50rem}
.movie-title{font-size:13px;font-weight:700;line-height:1.4;margin-top:8px}
@media (max-width:900px){
.level-grid,.flashcard-grid{grid-template-columns:repeat(3,1fr)}
.textbook-grid,.tools-grid{grid-template-columns:1fr 1fr}
.movie-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
.level-grid,.flashcard-grid{grid-template-columns:repeat(2,1fr)}
.textbook-grid,.tools-grid,.movie-grid{grid-template-columns:1fr}
}
/* ---- feedback sidebar card ---- */
.fb-list{display:flex;flex-direction:column;gap:14px}
.fb-list li{font-size:13.5px;line-height:1.5;color:var(--color-text-secondary);padding-bottom:12px;border-bottom:1px solid var(--color-border)}
.fb-list li:last-child{border-bottom:none;padding-bottom:0}
.fb-word{font-family:var(--font-jp);font-weight:700;color:var(--color-text-primary)}
.fb-user{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;color:var(--color-text-tertiary)}
.avatar.sm{width:18px;height:18px;background:var(--color-border-2)}
/* ============ FOOTER ============ */
/* Nền footer đổi sang teal đậm (#007072) — hầu hết chữ/viền/link bên dưới đều tham chiếu qua
các biến --color-text-primary, --color-text-secondary, --color-text-tertiary, --color-border,
--color-border-2, --color-primary-deep (định nghĩa dark trên nền trắng ở :root), nên chỉ cần
định nghĩa lại đúng các biến đó NGAY TRONG PHẠM VI .site-footer là toàn
bộ chữ/viền con bên trong tự động đổi sang tông sáng phù hợp nền tối, không phải sửa tay từng
selector. Ngoại lệ: .pm-ic (nền đặc dùng --color-primary-deep để làm khối icon, không phải
chữ — nếu đổi theo sẽ ra icon nhạt cùng tông với nền, mất hẳn tương phản) và .social-btn
(vòng tròn nền sáng riêng, icon bên trong phải giữ tối để tương phản với chính vòng tròn của
nó, không liên quan gì đến nền footer) — 2 chỗ này ghi đè cứng riêng bên dưới, không dùng biến
đã đổi ở trên. */
.site-footer{
background:#007072;
border-top:1px solid rgba(255,255,255,.15);
margin-top:24px;padding:32px 20px 0;
--color-text-primary:#ffffff;
--color-text-secondary:rgba(255,255,255,.85);
--color-text-tertiary:rgba(255,255,255,.62);
--color-border:rgba(255,255,255,.18);
--color-border-2:rgba(255,255,255,.26);
--color-primary-deep:#8fe9e2;
}
.site-footer .pm-ic{background:rgba(255,255,255,.16)}
.site-footer .social-btn{background:#fff;color:#495057}
.site-footer .footer-app-card{background:rgba(255,255,255,.05)}
.footer-top{max-width:1240px;margin:0 auto;display:flex;gap:32px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid var(--color-border)}
.footer-brand{flex:1;min-width:260px;display:flex;flex-direction:column;gap:8px}
.footer-brand .logo-word{display:block;color:#fff}
.footer-tagline{color:#fff;font-weight:700;font-size:15px;margin:6px 0 4px}
.contact-row{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--color-text-secondary)}
.contact-row svg{width:16px;height:16px;color:var(--color-text-tertiary);flex-shrink:0}
.footer-app-card{
width:300px;flex-shrink:0;border:1px solid var(--color-border);border-radius:12px;padding:16px;
display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:center;
}
.app-card-text{display:flex;flex-direction:column;font-size:13px;color:var(--color-text-tertiary)}
.app-card-text b{font-size:14px;color:var(--color-text-primary)}
.qr-block{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--color-text-tertiary);border-top:1px solid var(--color-border);padding-top:10px}
.mini-qr{width:40px;height:40px;border:1px solid var(--color-border)}
.store-badges{grid-column:1/-1;display:flex;gap:8px}
.store-badge{flex:1;text-align:center;background:#171a1c;color:#fff;padding:8px;border-radius:8px;font-size:12px;font-weight:600}
.footer-cols{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1.3fr 1fr 1.4fr 1fr;gap:24px;padding:28px 0}
.footer-col{display:flex;flex-direction:column;gap:9px;font-size:13.5px;color:var(--color-text-secondary)}
.footer-col h4{color:var(--color-text-primary);font-size:14px;margin:0 0 4px}
.footer-col h4.mt-h4{margin-top:10px}
.footer-col a:hover{color:var(--color-primary-deep)}
.product-mini{display:flex;align-items:center;gap:10px;font-size:12.5px}
.product-mini b{display:block;font-size:13px;color:var(--color-text-primary)}
.product-mini span{color:var(--color-text-tertiary);font-size:11.5px}
/* pm1-4: 4 icon "Chuyên mục" — gộp về 1 tông teal đậm duy nhất */
.pm-ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-jp);font-weight:700;font-size:13px;flex-shrink:0;background:var(--color-primary-deep)}
.social-row{display:flex;gap:8px}
.social-row .social-btn{width:32px;height:32px}
.social-row .social-btn svg{width:15px;height:15px}
.footer-col .social-btn:hover{color:#fff}
.footer-bottom{
max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
padding:16px 0;font-size:12px;color:var(--color-text-tertiary);
}
.footer-bottom b{color:var(--color-text-primary);display:block;font-size:13px;margin-bottom:2px}
.notice-badge{border:1px solid var(--color-border-2);border-radius:6px;padding:6px 12px;font-size:11.5px;color:var(--color-text-secondary);white-space:nowrap}
/* mobile-only duplicate toolbar (mirrors mazii.net's own d-md-none pattern) */
.mobile-tools-row{display:none;justify-content:center;gap:28px;margin-top:12px;padding-top:12px;border-top:1px solid var(--color-border)}
.mobile-tools-row button{background:none;border:none;color:var(--color-text-secondary);display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10.5px}
.mobile-tools-row svg{width:22px;height:22px}
.mobile-tools-row button:hover{color:var(--color-primary-deep)}
/* mặc định ẩn — chỉ hiện trong @media max-width:1100px dưới đây khi hàng tab chuyển sang
cuộn ngang 1 dòng và JS phát hiện còn nội dung bị ẩn bên phải. Phải khai báo TRƯỚC block
@media để không bị chính rule display:flex bên trong media query đè mất (cùng specificity,
rule khai báo sau thắng bất kể có nằm trong media query hay không). */
.tabs-scroll-hint{display:none}
/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
.row-main{flex-direction:column;align-items:stretch}
.col-side{width:100%;position:static}
.footer-cols{grid-template-columns:1fr 1fr}
/* Tablet trở xuống: hàng tab Ngữ pháp/Kanji/Từ vựng/... ở khối tìm kiếm trang chủ chỉ
hiện 1 dòng, tràn thì cuộn ngang thay vì xuống dòng (đè .tabs nav ul flex-wrap:wrap
gốc trong tabs.css) */
.tabs.tabs-style-pill nav ul{
flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.tabs.tabs-style-pill nav ul::-webkit-scrollbar{display:none}
.tabs.tabs-style-pill nav ul li{flex-shrink:0}
.tabs.tabs-style-pill nav ul li a{white-space:nowrap}
/* Báo hiệu còn tab bị ẩn bên phải khi hàng tab tràn — mũi tên nổi trên nền mờ dần,
JS (homeJs.js) bật/tắt class .show tuỳ theo còn cuộn được sang phải hay không. Badge
dùng nền tint nhạt + icon teal (bản teal đặc/viền trắng trước đó nổi bật quá mức cần) */
.tabs.tabs-style-pill nav{position:relative}
.tabs-scroll-hint{
display:flex;align-items:center;justify-content:flex-end;
position:absolute;top:0;right:0;bottom:12px;width:40px;
background:linear-gradient(to right,rgba(255,255,255,0),var(--card-bg) 60%);
pointer-events:none;opacity:0;transition:opacity .2s ease;
/* tabs.css đặt sẵn ".tabs nav ul li{z-index:1}" cho từng tab — không set z-index ở
đây thì badge (z-index:auto) bị pill nền của tab đang active/hover đè lên khi tab
đó nằm ngay dưới vùng này */
z-index:2;
}
.tabs-scroll-hint.show{opacity:1}
.tabs-scroll-hint i{
width:20px;height:20px;border-radius:50%;
background:var(--color-primary-tint);
display:flex;align-items:center;justify-content:center;
color:var(--color-primary-deep);font-size:11px;
}
}
@media (max-width:900px){
.community-grid{grid-template-columns:1fr}
.reading-grid{grid-template-columns:1fr}
.footer-top{flex-direction:column}
.footer-app-card{width:100%}
}
@media (max-width:767px){
/* --- drawer sidebar: full menu w/ labels, dims background --- */
.aside-menu{
width:min(78vw,300px); transform:translateX(-100%);
transition:transform .28s cubic-bezier(.32,.72,0,1);
border-radius:0 20px 20px 0;
}
.aside-menu.open{transform:translateX(0)}
.box-logo{flex-direction:row;justify-content:space-between;padding:18px 20px 16px;border-bottom:none;margin-bottom:0}
.logo-word{display:block}
.btn-toggle-sidebar{display:none}
.btn-close-sidebar{display:flex}
.box-item{align-items:stretch;padding:6px 12px}
.menu-item{
width:100%;height:auto;flex-direction:row;justify-content:flex-start;gap:14px;
padding:12px 12px;border-radius:12px;
}
.menu-item span{
position:static;transform:none;background:none;color:inherit;box-shadow:none;
opacity:1;padding:0;font-size:14.5px;font-weight:500;pointer-events:auto;
}
.menu-item:hover span{transform:none}
/* chốt an toàn: trạng thái "thu gọn" lưu từ phiên desktop không được rò rỉ vào drawer mobile */
body.sidebar-collapsed .box-logo{flex-direction:row;justify-content:space-between;padding:18px 20px 16px;width:auto}
body.sidebar-collapsed .box-item{align-items:stretch;padding:6px 12px}
body.sidebar-collapsed .menu-item{width:100%;height:auto;flex-direction:row;justify-content:flex-start;gap:14px;padding:12px 12px;border-radius:12px}
/* Cùng lỗi rò rỉ collapsed->drawer như .quick-search phía dưới: chỉ reset border-radius
(khớp .menu-item{border-radius:12px} của drawer) là chưa đủ — border-left:none và
padding-left:0 của bản icon-only (dòng ~675) vẫn còn hiệu lực (không bị ghi đè vì rule
dưới đây không khai lại 2 thuộc tính đó), khiến icon/chữ của mục active bị đẩy lệch
sang trái so với các mục thường (border-left 3px của mục thường choán mất 3px, mục
active lại padding-left:0 nên hụt luôn 3px đó). Khai đủ cả border-left/padding-left
để khớp lại đúng dáng "pill teal nhạt + vạch teal trái" như bản gốc (dòng 667). */
body.sidebar-collapsed .menu-item.active{border-radius:12px;border-left:3px solid var(--color-primary);padding-left:9px}
/* max-width:0 (dòng ~700, cơ chế thu-nhãn-về-0 để icon tự canh giữa mượt khi thu gọn desktop)
phải reset lại ở đây — không thì nhãn trong drawer mobile bị vô hình/mất chỗ theo đúng lỗi
rò rỉ collapsed->drawer đã ghi ở "chốt an toàn" phía trên. */
body.sidebar-collapsed .menu-item span{position:static;transform:none;background:none;color:inherit;box-shadow:none;opacity:1;padding:0;font-size:14.5px;font-weight:500;pointer-events:auto;max-width:200px}
body.sidebar-collapsed .aside-menu .logo-word{display:block}
/* JS tự thêm .sidebar-collapsed cho mọi màn hình <=1100px khi chưa có tuỳ chọn lưu
(new-home.js dòng ~816) — bao gồm cả các máy tính bảng/điện thoại rơi vào breakpoint
drawer này, khiến ô "tìm kiếm nhanh" bị co lại kiểu icon-only (chỉ còn kính lúp, mất
placeholder "Tìm nhanh…" và nút chọn danh mục "Ngữ pháp ▾"). Trả lại đúng layout gốc
của .quick-search cho drawer, đồng bộ với "chốt an toàn" phía trên. */
body.sidebar-collapsed .quick-search{margin:14px 12px 12px;justify-content:flex-start;padding:0 8px 0 12px}
body.sidebar-collapsed .quick-search input{display:block}
body.sidebar-collapsed .quick-search-cat-toggle{display:flex}
.main-wrap{margin-left:0}
.sidebar-toggle-btn{display:none}
/* --- header --- */
.box-header{padding:10px 14px;gap:8px}
.btn-mobile-menu{display:flex}
.title-heading{gap:8px;flex:1 1 auto;min-width:0}
/* greeting-block cần co lại + cắt chữ bằng "..." trên mobile, không thì text 2 dòng
(nowrap) sẽ tràn đè lên .box-right (social icons + avatar) vì box-right có
flex-shrink:0, không tự nhường chỗ được. */
.greeting-block{flex:1 1 auto;min-width:0;overflow:hidden}
.greeting-line1{overflow:hidden;text-overflow:ellipsis;font-size:13.5px}
.greeting-line2{display:none}
.logo-word.single{display:none}
.btn-register{display:none}
.box-right{gap:6px}
.btn-primary{padding:6.5px 12.5px;font-size:13.5px}
.btn-notify{display:none}
/* --- search card --- */
.box-search{flex-direction:column;align-items:stretch}
.content-search .btn-right{display:none}
.mobile-tools-row{display:flex}
.lang-search{width:100%}
.dict-show{width:100%;justify-content:center}
.gcse-row{flex-direction:column;align-items:stretch;gap:10px}
#search-box .gsib_a{padding-right:40px!important}
.line-btn{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px 12px;padding:0 16px 4px;scrollbar-width:none}
.line-btn::-webkit-scrollbar{display:none}
.btn-tab, .btn-chat-qa{flex-shrink:0}
.two-col{grid-template-columns:1fr}
/* --- horizontal snap carousels --- */
.community-grid{
display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;
gap:12px;margin:0 -16px;padding:0 16px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.community-grid::-webkit-scrollbar{display:none}
.community-grid .qa-card{flex:0 0 86%;scroll-snap-align:start}
.reading-grid{
display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;
gap:12px;margin:0 -16px;padding:0 16px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.reading-grid::-webkit-scrollbar{display:none}
.reading-grid .reading-card{flex:0 0 62%;scroll-snap-align:start}
.promo-banner{padding:18px 16px;text-align:center;justify-content:center}
.promo-text{text-align:left}
.footer-cols{grid-template-columns:1fr 1fr;gap:20px 16px}
.footer-col.products-col{grid-column:1/-1}
.page-container{padding:12px}
body.new-home-ui #content.site-content > .mt-container{padding:12px}
/* Ảnh nền rất ngang (bleed bên phải) không đủ chỗ nhạt dần trên màn hẹp — bỏ ảnh,
giữ màu nền be nhạt của ảnh để không đè lên chữ. */
.course-hero{background:#eef6f8}
.course-hero.tutor-container{padding:24px 20px;min-height:0}
.course-hero-text{max-width:none}
.course-hero-text h1{font-size:24px}
.course-hero-stats{gap:10px;font-size:12.5px}
}
@media (max-width:420px){
.footer-cols{grid-template-columns:1fr}
.box-flag span.flag-emoji{font-size:16px}
.btn-primary{padding:6.5px 11px;font-size:13px}
}
/* ==========================================================
WordPress integration overrides — re-skin của các form tìm
kiếm thật (ngữ pháp/kanji/từ vựng/giáo trình/flashcard/đề
thi/anime) hiện có trên site, giữ nguyên toàn bộ logic JS/PHP
gốc (cbpFWTabs.js, homeJs.js), chỉ đổi giao diện cho khớp
design tokens phía trên.
========================================================== */
.tabs.tabs-style-pill{background:none;overflow:visible;font-size:1em;font-weight:400}
.tabs.tabs-style-pill nav{border-bottom:1px solid var(--color-border);padding-bottom:12px}
.tabs.tabs-style-pill nav ul{justify-content:flex-start;gap:6px;max-width:none;position:relative}
.tabs.tabs-style-pill nav ul li{flex:none;position:relative}
.tabs.tabs-style-pill nav ul li a{
background:none;border:none;padding:9px 16px;border-radius:8px;
font-size:14px;font-weight:500;line-height:normal;color:var(--color-text-tertiary);
}
/* tabs.css gốc có ".tabs nav a span{font-size:.75em}" (dành cho label nhỏ dưới icon
ở thiết kế tab cũ) làm chữ trong pill bị thu nhỏ còn ~10.5px — ghi đè lại 14px */
.tabs.tabs-style-pill nav ul li a span{font-size:14px}
.tabs.tabs-style-pill nav ul li a i{font-size:13px;margin-right:6px;vertical-align:middle}
.tabs.tabs-style-pill nav ul li a:hover,
.tabs.tabs-style-pill nav ul li a:focus{color:var(--color-primary-deep)}
.tabs.tabs-style-pill nav li.tab-current a{background:var(--color-primary-tint);color:var(--color-primary-deep)}
/* Nền pill trượt mượt giữa các tab khi bấm qua lại (thay vì mỗi tab tự bật/tắt nền riêng, snap
tức thì) — 1 span riêng (.tabs-pill-indicator, chèn làm con ĐẦU TIÊN của
trong page-home.php)
nằm ĐÈ DƯỚI toàn bộ
nhờ thứ tự DOM (đứng trước) + cùng là phần tử positioned
(.tabs.tabs-style-pill nav ul li{position:relative} ngay trên — bắt buộc phải có, nếu không