/*
Theme Name: demtu-theme
Theme URI: https://demtuonline.com
Author: Hoàng Trần Bá Duy
Description: Block theme cho demtuonline.com — khung trang theo thiết kế Claude Design (design/). Token và style nội dung ở assets/css/dt-base.css (chép nguyên từ design/dt-base.css); file này chỉ lo khung trang: đầu trang, chân trang, breadcrumb, bố cục công cụ + sidebar, blog, 404. Style công cụ nằm trong plugin demtu-tools (tools.css).
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: demtu-theme
*/

/* ---------- Nền trang ---------- */
body{background:var(--dt-bg)}
.wp-site-blocks{min-height:100vh;display:flex;flex-direction:column}
.wp-site-blocks>main,.wp-site-blocks>.dt-main{flex:1}
.wp-site-blocks>*+*{margin-block-start:0}
:where(.dt-main) h1,:where(.dt-main) h2,:where(.dt-main) h3{color:var(--dt-text)}
.dt-main{padding-top:var(--dt-sp-5);padding-bottom:var(--dt-sp-8)}
.dt-h1{margin:0;font-size:var(--dt-fs-6);line-height:var(--dt-lh-tight);font-weight:700;letter-spacing:-.02em;text-wrap:pretty}
.dt-lead{margin:var(--dt-sp-3) 0 0;color:var(--dt-text-2);font-size:var(--dt-fs-4);line-height:1.5;text-wrap:pretty}
.dt-skip{position:absolute;left:-9999px;top:0;z-index:100;padding:var(--dt-sp-2) var(--dt-sp-4);background:var(--dt-text);color:var(--dt-text-invert)}
.dt-skip:focus{left:var(--dt-sp-4);top:var(--dt-sp-2)}

/* ---------- Đầu trang ---------- */
.dt-header{background:var(--dt-surface);border-bottom:1px solid var(--dt-border);position:relative;z-index:30}
.dt-header__row{display:flex;align-items:center;gap:var(--dt-sp-5);min-height:64px}
.dt-logo{margin:0;font-weight:700;font-size:18px;letter-spacing:-.01em;white-space:nowrap;line-height:1}
.dt-logo a{color:var(--dt-text);text-decoration:none}
.dt-logo span{color:var(--dt-primary)}
.dt-header .wp-block-navigation{font-size:var(--dt-fs-2)}
.dt-header .wp-block-navigation__container{gap:2px}
.dt-header .wp-block-navigation-item__content{display:inline-flex;align-items:center;min-height:var(--dt-control-h);padding:0 10px;border-radius:var(--dt-r-sm);color:var(--dt-text-2);font-weight:500;text-decoration:none}
.dt-header .wp-block-navigation-item__content:hover,.dt-header .current-menu-item>.wp-block-navigation-item__content{background:var(--dt-surface-2);color:var(--dt-text)}
.dt-header .current-menu-item>.wp-block-navigation-item__content{font-weight:600}
.dt-header .wp-block-navigation__submenu-container{border:1px solid var(--dt-border)!important;border-radius:var(--dt-r);box-shadow:var(--dt-sh-2);padding:var(--dt-sp-2)!important;min-width:240px!important}
.dt-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content{width:100%}
/* Menu: dưới 1024px gập vào nút (thiết kế), từ 1024px hiện thẳng hàng. Block navigation đặt overlayMenu "always". */
.dt-header .wp-block-navigation__responsive-container-open{display:inline-flex;align-items:center;justify-content:center;min-width:var(--dt-control-h);min-height:var(--dt-control-h);border:1px solid var(--dt-border);border-radius:var(--dt-r);background:var(--dt-surface);color:var(--dt-text-2)}
.dt-header .wp-block-navigation__responsive-container-close{display:inline-flex;align-items:center;justify-content:center;min-width:var(--dt-control-h);min-height:var(--dt-control-h);top:var(--dt-sp-3);right:var(--dt-sp-3)}
.dt-header .wp-block-navigation__responsive-container.is-menu-open{padding:var(--dt-sp-5) var(--dt-sp-4)!important}
.dt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{min-height:var(--dt-control-h);font-size:var(--dt-fs-3)}
.dt-header .wp-block-navigation{order:3;flex:0 0 auto}
@media(min-width:1024px){
.dt-header .wp-block-navigation{order:0;flex:1}
.dt-header .wp-block-navigation__responsive-container-open{display:none!important}
.dt-header .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open){display:block;position:relative;width:100%;background:transparent;z-index:auto}
.dt-header .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) .wp-block-navigation__responsive-container-close{display:none}
.dt-header .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) .wp-block-navigation__responsive-container-content{display:flex;flex-wrap:wrap;align-items:center}
}
.dt-header .wp-block-search{margin-left:auto}
.dt-header .wp-block-search__button{min-width:var(--dt-control-h);min-height:var(--dt-control-h);margin:0;padding:0 12px;border:1px solid var(--dt-border);border-radius:var(--dt-r);background:var(--dt-surface);color:var(--dt-text-2)}
.dt-header .wp-block-search__button:hover{border-color:var(--dt-border-strong);color:var(--dt-text)}
.dt-header .wp-block-search__input{min-height:var(--dt-control-h);border:1px solid var(--dt-border);border-radius:var(--dt-r);padding:0 12px;font-size:var(--dt-fs-2)}
.dt-header .wp-block-search__inside-wrapper{gap:var(--dt-sp-2)}
@media(max-width:1023px){.dt-header__row{gap:var(--dt-sp-2)}}

/* ---------- Chân trang ---------- */
.dt-footer{border-top:1px solid var(--dt-border);background:var(--dt-surface);padding:var(--dt-sp-7) 0 var(--dt-sp-6);font-size:var(--dt-fs-2)}
.dt-footer p{margin:0}
.dt-footer__brand-text{margin-top:10px!important;color:var(--dt-text-2);text-wrap:pretty}
.dt-footer__col{display:flex;flex-direction:column;gap:8px}
.dt-footer__head{font-weight:600;color:var(--dt-text-3);font-size:var(--dt-fs-1);text-transform:uppercase;letter-spacing:.04em}
.dt-footer__col a{color:var(--dt-text-2);text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
.dt-footer__col a:hover{color:var(--dt-primary)}
.dt-footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.dt-footer__legal{margin-top:var(--dt-sp-6)!important;padding-top:var(--dt-sp-4);border-top:1px solid var(--dt-border);font-size:var(--dt-fs-1);color:var(--dt-text-3);text-wrap:pretty}

/* ---------- Breadcrumb (Rank Math) ---------- */
.dt-breadcrumb{font-size:var(--dt-fs-2);color:var(--dt-text-3)}
.dt-breadcrumb p{margin:0;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.dt-breadcrumb a{color:var(--dt-text-2);text-decoration:none}
.dt-breadcrumb a:hover{color:var(--dt-primary);text-decoration:underline}
.dt-breadcrumb .separator{color:var(--dt-text-3)}
.dt-breadcrumb .last{color:var(--dt-text)}

/* ---------- Trang công cụ ---------- */
.dt-tool-head{max-width:var(--dt-content)}
.dt-tool-meta{margin:var(--dt-sp-3) 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;font-size:var(--dt-fs-1);color:var(--dt-text-3)}
.dt-tool-meta__sep{padding:2px 6px}
.dt-tool-meta__date{padding:2px 8px;border-radius:var(--dt-r-full);background:var(--dt-surface-2);color:var(--dt-text-2);font-weight:500}
/* Cột chính co giãn được (grid minmax) */
.dt-tool-col{min-width:0}
/* Nội dung trang: widget rộng hết cột, chữ giới hạn 760px */
.dt-page-content.dt-content{max-width:none}
.dt-page-content.dt-content>*:not(.dt-tool):not(.dt-hub-grid):not(.dt-tool-grid):not(.wp-block-table):not(figure):not(.dt-table-wrap){max-width:var(--dt-content)}
.dt-page-content.dt-content>.dt-tool{margin-top:0}
.dt-page-content.dt-content>h2:first-child{margin-top:0;padding-top:0;border-top:0}
.dt-page-content.dt-content>.wp-block-table,.dt-page-content.dt-content>.dt-table-wrap{max-width:100%}
.dt-content h2[id],.dt-content h3[id]{scroll-margin-top:var(--dt-sp-6)}

/* Mục lục + cùng nhóm */
.dt-toc-title{margin:0 0 10px;font-weight:600;color:var(--dt-text-3);font-size:var(--dt-fs-1);text-transform:uppercase;letter-spacing:.04em}
.dt-toc{font-size:var(--dt-fs-2)}
.dt-toc ol{margin:0;padding:0;list-style:none;border-left:2px solid var(--dt-border)}
.dt-toc a{display:block;margin-left:-2px;padding:7px 14px;border-left:2px solid transparent;color:var(--dt-text-2);text-decoration:none;line-height:1.35}
.dt-toc a:hover{color:var(--dt-primary);border-left-color:var(--dt-primary)}
details.dt-toc-mobile{margin-top:var(--dt-sp-5);background:var(--dt-surface);border:1px solid var(--dt-border);border-radius:var(--dt-r);padding:0 var(--dt-sp-4)}
details.dt-toc-mobile summary{cursor:pointer;min-height:var(--dt-control-h);display:flex;align-items:center;font-weight:600;font-size:var(--dt-fs-2)}
details.dt-toc-mobile ol{margin:0;padding:0 0 var(--dt-sp-3) 1.2em;font-size:var(--dt-fs-2)}
details.dt-toc-mobile li+li{margin-top:6px}
details.dt-toc-mobile a{color:var(--dt-text-2);display:flex;align-items:center;min-height:var(--dt-control-h)}
details.dt-toc-mobile li+li{margin-top:0}
.dt-logo a{display:inline-flex;align-items:center;min-height:var(--dt-control-h)}
.dt-header .is-menu-open .wp-block-navigation__submenu-container{border:0!important;box-shadow:none;padding:0 0 0 var(--dt-sp-4)!important}
.dt-header .wp-block-search__button{display:inline-flex;align-items:center;justify-content:center}
.dt-header .wp-block-search__button svg{width:20px;height:20px;min-width:20px;min-height:20px;margin:0}
.dt-side-box{padding:var(--dt-sp-4);background:var(--dt-surface);border:1px solid var(--dt-border);border-radius:var(--dt-r-lg)}
.dt-side-box ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dt-side-box li a{display:flex;align-items:center;min-height:36px;padding:0 10px;border-radius:var(--dt-r-sm);color:var(--dt-text-2);text-decoration:none;font-size:var(--dt-fs-2)}
.dt-side-box li a:hover{background:var(--dt-surface-2);color:var(--dt-text)}
.dt-side-box li a[aria-current]{background:var(--dt-primary-soft);color:var(--dt-primary-strong);font-weight:600}
.dt-side-box__all{display:inline-block;margin-top:var(--dt-sp-3);font-size:var(--dt-fs-2);font-weight:600;text-decoration:none}
.dt-sidebar-inner{display:grid;gap:var(--dt-sp-5)}

/* ---------- Trang thường: glossary, case, bảng tra cứu, mẫu ---------- */
.dt-page-single{max-width:var(--dt-content)}
.dt-page-single .dt-page-content{margin-top:var(--dt-sp-5)}
/* Glossary: đoạn đầu là định nghĩa → hộp nhấn */
.dt-loai-thuat-ngu .dt-page-content>p:first-of-type{padding:var(--dt-sp-5);background:var(--dt-primary-soft);border:1px solid var(--dt-border);border-radius:var(--dt-r-lg);font-size:var(--dt-fs-4);line-height:1.5}
.dt-loai-thuat-ngu .dt-page-content>p:first-of-type::before{content:"Định nghĩa";display:block;margin-bottom:8px;font-size:var(--dt-fs-1);font-weight:600;color:var(--dt-primary);text-transform:uppercase;letter-spacing:.04em}
/* Case page và bảng tra cứu: rộng hơn để bảng thở */
.dt-loai-case .dt-page-single,.dt-loai-bang-tra-cuu .dt-page-single{max-width:960px}

/* ---------- Hub ---------- */
.dt-hub-head{max-width:var(--dt-content)}
.dt-hub-head .dt-lead{font-size:var(--dt-fs-3)}

/* ---------- Blog ---------- */
.dt-post-cat{font-size:var(--dt-fs-1);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.dt-post-cat a{text-decoration:none}
.dt-post-byline{margin-top:var(--dt-sp-3);display:flex;flex-wrap:wrap;align-items:center;gap:var(--dt-sp-3);font-size:var(--dt-fs-2);color:var(--dt-text-2)}
.dt-avatar{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--dt-primary-soft);color:var(--dt-primary-strong);font-weight:700;font-size:var(--dt-fs-1)}
.dt-post-byline a{font-weight:600;color:var(--dt-text);text-decoration:none}
.dt-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--dt-sp-5)}
.dt-chip-link{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--dt-border);border-radius:var(--dt-r-full);background:var(--dt-surface);color:var(--dt-text-2);font-size:var(--dt-fs-2);text-decoration:none;white-space:nowrap}
.dt-chip-link:hover{border-color:var(--dt-border-strong);color:var(--dt-text)}
.dt-chip-link[aria-current]{background:var(--dt-text);border-color:var(--dt-text);color:var(--dt-text-invert)}
@media(pointer:coarse){.dt-chip-link{min-height:var(--dt-control-h)}}
.dt-card-list .wp-block-post-template{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--dt-sp-4)}
@media(min-width:768px){.dt-card-list .wp-block-post-template{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1200px){.dt-card-list .wp-block-post-template{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dt-card{height:100%;display:flex;flex-direction:column;gap:10px;padding:var(--dt-sp-5);background:var(--dt-surface);border:1px solid var(--dt-border);border-radius:var(--dt-r-lg);transition:border-color .15s,box-shadow .15s}
.dt-card:hover{border-color:var(--dt-border-strong);box-shadow:var(--dt-sh-2)}
.dt-card .wp-block-post-terms{font-size:var(--dt-fs-1);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.dt-card .wp-block-post-terms a{text-decoration:none}
.dt-card .wp-block-post-title{margin:0;font-size:var(--dt-fs-4);font-weight:600;line-height:1.35;text-wrap:pretty}
.dt-card .wp-block-post-title a{color:var(--dt-text);text-decoration:none}
.dt-card .wp-block-post-date{margin-top:auto;font-size:var(--dt-fs-1);color:var(--dt-text-3)}
.dt-empty{padding:var(--dt-sp-6);background:var(--dt-surface);border:1px dashed var(--dt-border-strong);border-radius:var(--dt-r-lg);color:var(--dt-text-2)}
.wp-block-query-pagination{margin-top:var(--dt-sp-6);gap:8px;justify-content:center;font-size:var(--dt-fs-2)}
.wp-block-query-pagination a,.wp-block-query-pagination .page-numbers{display:inline-grid;place-items:center;min-width:var(--dt-control-h);min-height:var(--dt-control-h);padding:0 12px;border:1px solid var(--dt-border);border-radius:var(--dt-r);background:var(--dt-surface);color:var(--dt-text-2);text-decoration:none}
.wp-block-query-pagination .page-numbers.current{background:var(--dt-text);border-color:var(--dt-text);color:var(--dt-text-invert)}
.dt-dem-ngay{margin-top:var(--dt-sp-5);padding:var(--dt-sp-4);background:var(--dt-surface);border:1px solid var(--dt-border);border-left:3px solid var(--dt-primary);border-radius:var(--dt-r-lg)}
.dt-dem-ngay>p:first-child{font-weight:600}

/* ---------- 404 và tìm kiếm ---------- */
.dt-404{max-width:720px;padding-top:var(--dt-sp-8)}
.dt-404__code{font-family:var(--dt-font-mono);font-size:var(--dt-fs-num-xl);font-weight:500;color:var(--dt-text-3);line-height:1;margin:0}
.dt-404 .wp-block-search{margin-top:var(--dt-sp-5)}
.dt-search .wp-block-search__input,.dt-404 .wp-block-search__input{min-height:var(--dt-control-h);border:1px solid var(--dt-border-strong);border-radius:var(--dt-r);padding:0 14px;background:var(--dt-surface)}
.dt-search .wp-block-search__button,.dt-404 .wp-block-search__button{min-height:var(--dt-control-h);margin-left:8px;padding:0 var(--dt-sp-5);border:0;border-radius:var(--dt-r);background:var(--dt-primary);color:var(--dt-text-invert);font-weight:600}
.dt-pho-bien{margin-top:var(--dt-sp-6)}
.dt-pho-bien ul{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.dt-pho-bien a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--dt-control-h);padding:0 14px;border:1px solid var(--dt-border);border-radius:var(--dt-r);background:var(--dt-surface);color:var(--dt-text);text-decoration:none;font-size:var(--dt-fs-2)}
.dt-pho-bien a:hover{border-color:var(--dt-primary);color:var(--dt-primary);background:var(--dt-primary-soft)}
.dt-search-results .wp-block-post-template{list-style:none;margin:var(--dt-sp-5) 0 0;padding:0;display:grid;gap:var(--dt-sp-3);max-width:var(--dt-content)}
.dt-search-results .wp-block-post-title{margin:0;font-size:var(--dt-fs-4);font-weight:600}
.dt-search-results .wp-block-post-title a{text-decoration:none}
.dt-search-results .wp-block-post-excerpt{margin:4px 0 0;color:var(--dt-text-2);font-size:var(--dt-fs-2)}
.dt-search-results .wp-block-post-excerpt__more-text{display:none}