@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');
:root{--ink:#172b4d;--muted:#718096;--line:#e8edf3;--bg:#f6f8fb;--white:#fff}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#253247;font-family:'Be Vietnam Pro',Arial,sans-serif;font-size:14px}
button,textarea{font:inherit}.app-shell{min-height:100vh;display:flex}.sidebar{width:250px;background:#fff;border-right:1px solid var(--line);padding:26px 18px 18px;display:flex;flex-direction:column;flex-shrink:0}
.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);padding:0 10px 34px}.brand-mark{width:40px;height:40px;border-radius:13px;background:#172b4d;color:white;display:grid;place-items:center;font-size:23px}.brand strong{display:block;font-size:13px;letter-spacing:1.2px}.brand small{display:block;color:#8995a6;font-size:10px;margin-top:3px}
.nav{display:grid;gap:7px}.nav-item{border:0;background:transparent;text-align:left;padding:13px 14px;border-radius:10px;color:#68778c;cursor:pointer;display:flex;gap:13px;align-items:center;font-size:17px}.nav-item span{font-size:13px;font-weight:600}.nav-item:hover,.nav-item.active{background:#edf3fb;color:#244d7c}.sidebar-note{margin-top:auto;background:#f5f7fa;border-radius:13px;padding:16px;color:#69788c;line-height:1.7;font-size:12px}.note-icon{font-size:20px;color:#d49a50}.sidebar-note p{margin:8px 0 0}.sidebar-note strong{color:#35445a}.profile{display:flex;gap:10px;align-items:center;padding:20px 4px 0}.avatar{width:34px;height:34px;border-radius:50%;background:#e8eef8;color:#34577f;display:grid;place-items:center;font-weight:700}.profile strong,.profile small{display:block;font-size:11px}.profile small{color:#8b96a5;margin-top:3px}
.main{min-width:0;flex:1;display:flex;flex-direction:column}.topbar{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 42px}.breadcrumb{color:#8995a6;font-size:12px}.breadcrumb span{padding:0 10px;color:#c2cbd5}.breadcrumb strong{color:#3d4b60}.top-actions{font-size:11px;color:#8793a3;display:flex;align-items:center;gap:8px}.status-dot{width:7px;height:7px;border-radius:50%;background:#63b58a}.menu-button{display:none;border:0;background:none;font-size:20px}
.content{width:min(1100px,100%);margin:0 auto;padding:42px 42px 28px;flex:1}.welcome{position:relative;overflow:hidden;background:#172b4d;border-radius:18px;padding:34px 38px;color:#fff;min-height:170px;display:flex;align-items:center;justify-content:space-between}.eyebrow{font-size:9px;letter-spacing:2px;color:#b9c9df;font-weight:700}.welcome h1{font-size:27px;margin:12px 0 8px;letter-spacing:-.8px}.subheading{margin:0;color:#c5d1e0;font-size:12px;max-width:530px;line-height:1.8}.welcome-art{font-size:56px;color:#8ca4c4;opacity:.45;transform:rotate(-12deg);padding-right:35px}.welcome-art span:nth-child(2){font-size:76px;color:#d6b77d}.section-heading{display:flex;justify-content:space-between;align-items:end;margin:32px 0 16px}.section-heading h2,.panel h2{font-size:16px;margin:0;color:#25364d}.section-heading p,.panel-heading p{margin:5px 0 0;color:#8995a5;font-size:11px}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.feature-card{position:relative;text-align:left;border:1px solid var(--line);border-radius:14px;padding:20px 17px;background:#fff;min-height:160px;cursor:pointer;transition:.2s}.feature-card:hover{transform:translateY(-3px);box-shadow:0 10px 25px #172b4d12}.feature-icon{width:39px;height:39px;border-radius:11px;display:grid;place-items:center;font-size:20px;margin-bottom:16px}.feature-card strong,.feature-card small{display:block}.feature-card strong{font-size:12px;color:#2c3a4f}.feature-card small{font-size:10px;line-height:1.7;color:#8b96a5;margin-top:6px;max-width:180px}.card-arrow{position:absolute;right:16px;top:18px;color:#9aa7b7}.blue .feature-icon{background:#eaf2fc;color:#4675aa}.green .feature-icon{background:#eaf5ed;color:#57936a}.orange .feature-icon{background:#fcf0e5;color:#bf8249}.purple .feature-icon{background:#f1edfb;color:#806bb5}
.bottom-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;margin-top:16px}.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:21px}.panel-heading{display:flex;justify-content:space-between;align-items:center}.panel-symbol{font-size:20px;color:#8096b3}textarea{width:100%;min-height:94px;resize:vertical;border:1px solid #e8edf3;border-radius:9px;padding:12px;margin-top:17px;outline:none;font-size:11px;color:#35445a}textarea:focus{border-color:#9bb3d0}.panel-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}.panel-footer span{font-size:9px;color:#9aa4b2;line-height:1.5}.primary-button,.secondary-button{border:0;border-radius:8px;padding:10px 14px;font-size:10px;font-weight:700;cursor:pointer}.primary-button{background:#203d63;color:white}.secondary-button{background:#edf2f8;color:#35577f;margin-top:20px}.feedback{font-size:10px;color:#43845b;margin-top:8px}.quote-panel{background:#f0f3f8;border:0;position:relative;overflow:hidden}.quote-mark{font-family:Georgia;font-size:54px;color:#9aacc4;line-height:1}.quote-panel h2{font-size:17px;margin:2px 0 10px;color:#304766}.quote-panel p{font-size:11px;color:#718198;line-height:1.8;max-width:270px}.quote-line{display:block;width:32px;height:2px;background:#b4c1d1;margin:18px 0 10px}.quote-panel small{font-size:8px;letter-spacing:1.6px;color:#8d9bad}
.section-placeholder{text-align:center;padding:60px 20px;margin-top:24px}.placeholder-icon{font-size:34px;color:#7892b2}.section-placeholder h2{margin-top:12px}.section-placeholder p{color:#8793a3;font-size:12px}.coming-soon{display:inline-block;background:#f1f4f8;color:#8795a7;padding:7px 12px;border-radius:20px;font-size:9px;letter-spacing:1px;margin-top:12px}footer{text-align:center;padding:18px;color:#a0aab7;font-size:9px;letter-spacing:.7px}footer span{padding:0 7px}
@media(max-width:900px){.sidebar{width:215px}.content{padding:28px 24px}.topbar{padding:0 24px}.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.sidebar{position:fixed;z-index:5;left:-260px;top:0;bottom:0;width:250px;transition:left .2s;box-shadow:8px 0 30px #172b4d14}.sidebar.open{left:0}.menu-button{display:block}.topbar{height:58px;padding:0 17px;justify-content:flex-start;gap:14px}.top-actions{margin-left:auto}.content{padding:20px 15px}.welcome{padding:25px 22px;min-height:155px}.welcome h1{font-size:22px}.welcome-art{padding:0;font-size:36px}.welcome-art span:nth-child(2){font-size:50px}.feature-grid{gap:10px}.feature-card{padding:15px 13px;min-height:150px}.bottom-grid{grid-template-columns:1fr}.breadcrumb{font-size:10px}.panel-footer{align-items:flex-start;flex-direction:column}.primary-button{width:100%}}
[hidden]{display:none!important}
.login-screen{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 15% 15%,#e6edf7 0,transparent 32%),radial-gradient(circle at 85% 85%,#e9eef6 0,transparent 30%),#f6f8fb}
.login-card{width:min(430px,100%);background:#fff;border:1px solid var(--line);border-radius:20px;padding:38px;box-shadow:0 18px 55px #172b4d12}
.login-mark{width:48px;height:48px;border-radius:15px;background:#172b4d;color:#fff;display:grid;place-items:center;font-size:27px;margin-bottom:22px}
.login-eyebrow{font-size:9px;letter-spacing:2px;font-weight:800;color:#8092aa;margin:0 0 10px}
.login-card h1{font-size:23px;color:#172b4d;margin:0 0 10px}.login-desc{font-size:12px;line-height:1.8;color:#8190a3;margin:0 0 25px}
.login-card label{display:block;font-size:11px;font-weight:700;color:#40516a;margin:15px 0 7px}
.login-card input{width:100%;height:44px;border:1px solid #e3e9f0;border-radius:9px;padding:0 12px;font:inherit;font-size:12px;outline:none}
.login-card input:focus{border-color:#91a9c7;box-shadow:0 0 0 3px #eaf0f8}
.login-button{width:100%;height:45px;border:0;border-radius:9px;background:#203d63;color:white;font:inherit;font-size:12px;font-weight:700;margin-top:22px;cursor:pointer}
.login-button:disabled{opacity:.65;cursor:wait}.login-feedback{min-height:18px;font-size:11px;line-height:1.6;color:#b45c55;margin:12px 0 0}
.login-footnote{border-top:1px solid #edf0f4;margin-top:22px;padding-top:16px;text-align:center;color:#9aa5b3;font-size:9px;line-height:1.7}
.logout-button{border:1px solid #e3e9f0;background:#fff;color:#536780;border-radius:7px;padding:6px 10px;font:inherit;font-size:10px;cursor:pointer;margin-left:8px}
.logout-button:hover{background:#f2f5f9}
@media(max-width:480px){.login-card{padding:28px 22px}.login-card h1{font-size:21px}}

/* KHU VUC GIAO TRINH */
.language-workspace{margin-top:28px}.language-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.language-toolbar h2{font-size:17px;margin:0;color:#25364d}.language-toolbar p{font-size:11px;color:#8995a5;margin:5px 0 0}.language-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:15px;align-items:start}.course-panel,.unit-panel{min-height:310px}.list-heading{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#34465e;padding-bottom:14px;border-bottom:1px solid var(--line)}.list-heading span{background:#edf2f8;border-radius:20px;padding:3px 9px;color:#60758f;font-size:10px}.course-list,.unit-list{display:grid;gap:9px;margin-top:12px}.course-item{width:100%;text-align:left;border:1px solid transparent;background:#f7f9fc;border-radius:10px;padding:12px;cursor:pointer}.course-item.selected{background:#edf3fb;border-color:#cbd9ea}.course-item strong,.course-item small{display:block}.course-item strong{font-size:11px;color:#34465e}.course-item small{font-size:9px;color:#8995a5;margin-top:5px;line-height:1.5}.unit-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}.mini-label{font-size:8px;letter-spacing:1.4px;color:#91a0b2;font-weight:700}.unit-heading h2{font-size:17px;margin:6px 0;color:#263950}.unit-heading p{font-size:10px;color:#8a96a5;margin:0}.unit-card{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:11px}.unit-number{width:36px;height:36px;border-radius:10px;background:#edf3fb;color:#54769e;display:grid;place-items:center;font-weight:700;font-size:11px;flex-shrink:0}.unit-info{min-width:0;flex:1}.unit-info strong{font-size:11px;color:#34465e}.unit-info p{font-size:9px;color:#8a96a5;margin:4px 0}.unit-status{font-size:8px;color:#699078}.unit-actions{display:flex;gap:5px}.unit-actions button{border:1px solid #e6ebf1;background:#fff;color:#60738c;border-radius:6px;padding:6px 8px;font-size:9px;cursor:pointer}.empty-state{text-align:center;color:#98a3b1;font-size:10px;line-height:1.8;padding:28px 10px}.error-text{color:#b45c55}
@media(max-width:760px){.language-layout{grid-template-columns:1fr}.language-toolbar{align-items:flex-start}.unit-heading{align-items:flex-start;flex-direction:column}.unit-heading .primary-button{width:100%}.unit-card{align-items:flex-start}.unit-actions{flex-direction:column}}

/* UNIT DOC LAP VA TRINH SOAN THAO */
.remember-row{display:flex!important;align-items:center;gap:8px;font-weight:500!important;color:#718096!important}.remember-row input{width:15px;height:15px;margin:0;accent-color:#203d63}
.unit-only-layout{grid-template-columns:285px minmax(0,1fr)}.unit-panel,.editor-panel{min-height:470px}.unit-list-row{border:1px solid transparent;border-radius:10px}.unit-list-row.selected{background:#edf3fb;border-color:#cbd9ea}.unit-select{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;text-align:left;padding:10px;cursor:pointer}.unit-list-text{min-width:0}.unit-list-text strong,.unit-list-text small{display:block;overflow-wrap:anywhere}.unit-list-text strong{font-size:11px;color:#34465e}.unit-list-text small{font-size:9px;color:#8995a5;margin-top:4px}.editor-empty{padding:100px 20px}.editor-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.unit-title-input{display:block;border:0;outline:0;font:700 21px 'Be Vietnam Pro',sans-serif;color:#263950;padding:5px 0;width:min(480px,100%);background:transparent}.unit-description-input{display:block;width:100%;border:0;border-bottom:1px solid var(--line);outline:0;padding:8px 0 14px;margin:0 0 14px;font:11px 'Be Vietnam Pro',sans-serif;color:#718096}.editor-heading-actions{display:flex;gap:7px}.editor-heading-actions .secondary-button{margin:0;white-space:nowrap}.danger-button{border:1px solid #f0d9d7;background:#fff;color:#b45c55;border-radius:8px;padding:9px 12px;font-size:10px;cursor:pointer}.editor-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px;background:#f7f9fc;border:1px solid var(--line);border-radius:9px 9px 0 0}.editor-toolbar button,.editor-toolbar select{border:1px solid #e3e9f0;background:#fff;border-radius:6px;padding:6px 9px;color:#50647e;font:10px 'Be Vietnam Pro',sans-serif;cursor:pointer}.editor-toolbar span{height:20px;border-left:1px solid #dce3eb;margin:0 3px}.rich-editor{min-height:300px;padding:20px;border:1px solid var(--line);border-top:0;border-radius:0 0 9px 9px;background:#fff;outline:none;font-size:13px;line-height:1.85;color:#34445a;overflow-wrap:anywhere}.rich-editor:empty:before{content:attr(data-placeholder);white-space:pre-wrap;color:#a4afbd;pointer-events:none}.rich-editor h2{font-size:20px;color:#203d63}.rich-editor h3{font-size:16px;color:#304766}.rich-editor table{border-collapse:collapse;width:100%;margin:12px 0}.rich-editor th,.rich-editor td{border:1px solid #dfe6ef;padding:8px;text-align:left;min-width:70px}.rich-editor th{background:#f1f5fa}.rich-editor blockquote{border-left:3px solid #9bb3d0;margin:12px 0;padding:5px 14px;color:#718096;background:#f7f9fc}.editor-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px}.editor-footer span{font-size:10px;color:#8a96a5}.editor-footer .primary-button{font-size:11px}
@media(max-width:760px){.unit-only-layout{grid-template-columns:1fr}.unit-panel,.editor-panel{min-height:0}.editor-heading{flex-direction:column}.editor-heading-actions{width:100%}.editor-heading-actions button{flex:1}.editor-footer{align-items:stretch;flex-direction:column}.editor-footer .primary-button{width:100%}.rich-editor{min-height:250px}}

/* TRINH SOAN THAO NANG CAO - BO CUC UU TIEN NOI DUNG */
.content:has(#languagePage:not([hidden])){width:100%;max-width:none;padding-left:clamp(16px,3vw,44px);padding-right:clamp(16px,3vw,44px)}
.language-workspace{margin-top:12px}
.language-layout.unit-only-layout{grid-template-columns:minmax(210px,260px) minmax(0,1fr);align-items:stretch;gap:14px}
.unit-panel{min-width:0;transition:width .2s,padding .2s}
.editor-panel{min-width:0;padding:clamp(14px,2vw,26px)}
.editor-workspace-actions{display:flex;justify-content:flex-end;gap:7px;margin-bottom:12px;flex-wrap:wrap}
.editor-view-button{border:1px solid #e2e8f0;background:#f8fafc;color:#526780;border-radius:7px;padding:7px 10px;font:600 10px 'Be Vietnam Pro',sans-serif;cursor:pointer}
.editor-view-button:hover{background:#edf3fb;color:#244d7c}
.editor-toolbar{position:sticky;top:0;z-index:3;gap:5px;padding:9px;background:#f7f9fc;box-shadow:0 2px 5px #172b4d08}
.editor-toolbar button{min-width:30px;min-height:30px;font-size:11px;padding:6px 8px}
.editor-toolbar button:hover,.editor-toolbar select:hover{border-color:#9eb4cf;background:#edf3fb}
.editor-toolbar select{min-height:30px;font-size:10px}
.editor-toolbar .color-tool{height:30px;display:inline-flex;align-items:center;gap:5px;padding:3px 6px;border:1px solid #e3e9f0;border-radius:6px;background:#fff;color:#405775;font-size:11px;font-weight:700;cursor:pointer}
.color-tool input{width:19px;height:19px;border:0;padding:0;background:transparent;cursor:pointer}
.rich-editor{min-height:clamp(520px,68vh,1100px);padding:clamp(22px,4vw,52px);font-size:14px;line-height:1.9;resize:vertical;overflow:auto;box-shadow:inset 0 1px 3px #172b4d06}
.rich-editor:focus{box-shadow:inset 0 0 0 1px #b7c9df}
.rich-editor img{max-width:100%;height:auto;border-radius:7px}
.rich-editor a{color:#2867a5;text-decoration:underline}
.rich-editor ul,.rich-editor ol{padding-left:28px}
.rich-editor h2,.rich-editor h3,.rich-editor h4{line-height:1.4;margin:1.2em 0 .55em}
.language-layout.units-collapsed{grid-template-columns:58px minmax(0,1fr)}
.language-layout.units-collapsed .unit-panel{padding:12px 7px;overflow:hidden}
.language-layout.units-collapsed .list-heading{justify-content:center;border:0;padding:5px 0}
.language-layout.units-collapsed .list-heading strong,.language-layout.units-collapsed .unit-list-text{display:none}
.language-layout.units-collapsed .list-heading span{font-size:9px}
.language-layout.units-collapsed .unit-select{justify-content:center;padding:7px 2px}
.language-layout.units-collapsed .unit-number{margin:0}
.app-shell.sidebar-collapsed .sidebar{width:68px;padding-left:9px;padding-right:9px;overflow:hidden}
.app-shell.sidebar-collapsed .brand{padding:0 4px 34px;justify-content:center}
.app-shell.sidebar-collapsed .brand>span:last-child,.app-shell.sidebar-collapsed .nav-item span,.app-shell.sidebar-collapsed .sidebar-note,.app-shell.sidebar-collapsed .profile>div:last-child{display:none}
.app-shell.sidebar-collapsed .nav-item{justify-content:center;padding:13px 5px}
.app-shell.sidebar-collapsed .profile{justify-content:center}
.app-shell.focus-mode .sidebar,.app-shell.focus-mode .topbar,.app-shell.focus-mode .welcome,.app-shell.focus-mode .language-toolbar,.app-shell.focus-mode footer{display:none!important}
.app-shell.focus-mode .content{width:100%;max-width:none;padding:10px 16px}
.app-shell.focus-mode .language-workspace{margin:0}
.app-shell.focus-mode .editor-panel{min-height:calc(100vh - 20px)}
.app-shell.focus-mode .rich-editor{min-height:calc(100vh - 260px)}
@media(max-width:760px){
 .content:has(#languagePage:not([hidden])){padding:14px 10px}
 .language-layout.unit-only-layout,.language-layout.units-collapsed{grid-template-columns:1fr}
 .unit-panel{min-height:0}
 .language-layout.units-collapsed .unit-panel{display:none}
 .rich-editor{min-height:55vh;padding:18px}
 .editor-toolbar{position:static}
 .editor-workspace-actions{justify-content:flex-start}
 .app-shell.sidebar-collapsed .sidebar{width:0;padding:0;border:0}
}


/* V5 - BANNER TINH GON: uu tien dien tich cho bai hoc */
.content:has(#languagePage:not([hidden])) .welcome{
  min-height:62px;
  padding:11px 20px;
  border-radius:11px;
  align-items:center;
}
.content:has(#languagePage:not([hidden])) .welcome .eyebrow{display:none}
.content:has(#languagePage:not([hidden])) .welcome h1{
  font-size:17px;
  line-height:1.35;
  margin:0 0 2px;
  letter-spacing:-.2px;
}
.content:has(#languagePage:not([hidden])) .welcome .subheading{
  font-size:10px;
  line-height:1.45;
}
.content:has(#languagePage:not([hidden])) .welcome-art{
  font-size:27px;
  padding-right:12px;
}
.content:has(#languagePage:not([hidden])) .welcome-art span:nth-child(2){font-size:36px}
@media(max-width:760px){
 .content:has(#languagePage:not([hidden])) .welcome{min-height:56px;padding:9px 13px}
 .content:has(#languagePage:not([hidden])) .welcome h1{font-size:15px}
 .content:has(#languagePage:not([hidden])) .welcome-art{display:none}
}


/* V5.1 - Toggle sidebar luon hien thi, doc lap voi noi dung editor */
.global-sidebar-toggle{display:inline-flex;align-items:center;gap:6px;margin-right:14px;white-space:nowrap}
.topbar{justify-content:flex-start;gap:10px}
.breadcrumb{flex:1}
.language-layout-controls{display:flex;justify-content:flex-start;align-items:center;margin:0 0 8px;min-height:30px}
.language-layout-controls .editor-view-button{background:#fff}
.language-layout.units-collapsed{grid-template-columns:minmax(0,1fr)}
.language-layout.units-collapsed .unit-panel{display:none}
@media(max-width:620px){.global-sidebar-toggle{display:none}.language-layout-controls{margin-bottom:8px}}

/* V6 - Nhat ky, kien thuc, muc tieu va tong quan */
.workspace-panel{background:transparent;min-width:0}
.section-actions{display:flex;gap:8px;align-items:center}
.item-manager{display:grid;grid-template-columns:minmax(230px,300px) minmax(0,1fr);gap:14px;min-height:570px}
.item-list-panel,.item-editor-panel{background:#fff;border:1px solid var(--line,#e4eaf2);border-radius:14px;padding:14px;min-width:0}
.item-search-row{display:flex;gap:7px;margin-bottom:12px}
.item-search-row input{min-width:0;flex:1}
.item-search-row input,.item-search-row select,.item-editor-top input,#itemTags{border:1px solid #dfe6ef;border-radius:8px;padding:10px;font:inherit;color:#243b5a;background:#fff}
.item-list{display:flex;flex-direction:column;gap:8px;max-height:650px;overflow:auto}
.manager-item{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:5px;padding:12px;border:1px solid #e5ebf3;border-radius:10px;background:#fff;color:#203754;cursor:pointer;width:100%}
.manager-item.selected,.manager-item:hover{background:#eef4fc;border-color:#bfd2eb}
.manager-item strong{font-size:13px}.manager-item small{font-size:11px;color:#7890ad}.manager-item span{font-size:12px;color:#687d96;line-height:1.45}
.item-editor-panel{display:flex;flex-direction:column;gap:10px}
.item-editor-top{display:flex;gap:8px;align-items:center}.item-editor-top #itemTitle{flex:1;min-width:100px;font-weight:650;font-size:16px}.item-editor-top #itemDate{max-width:155px}
#itemTags{width:100%;box-sizing:border-box}
.item-content-editor{border:1px solid #dfe6ef;border-radius:10px;padding:18px;min-height:390px;outline:none;line-height:1.7;color:#263b58;overflow:auto}
.item-content-editor:empty:before{content:attr(data-placeholder);color:#9aa9ba;pointer-events:none}
.item-content-editor:focus{border-color:#9bb8dc;box-shadow:0 0 0 3px #eaf2fc}
.item-editor-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#7b8da5;font-size:12px}
.pin-gate{min-height:440px;display:grid;place-items:center;background:#fff;border:1px solid #e5ebf3;border-radius:14px}
.pin-card{width:min(360px,90%);text-align:center;padding:28px}.pin-card input{width:100%;box-sizing:border-box;padding:12px;border:1px solid #dce5ef;border-radius:9px;margin:12px 0;font-size:18px;text-align:center;letter-spacing:5px}
.pin-card .primary-button{width:100%}.text-button{border:0;background:transparent;color:#315d91;margin-top:12px;cursor:pointer}
.dashboard-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0 20px}
.stat-card{background:#fff;border:1px solid #e5ebf3;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:5px}.stat-card strong{font-size:25px;color:#1d3c65}.stat-card span{font-size:12px;color:#72849a}
@media(max-width:900px){.item-manager{grid-template-columns:1fr}.item-list{max-height:230px}.dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.section-heading{align-items:flex-start;gap:8px;flex-direction:column}.section-actions{flex-wrap:wrap}.item-editor-top{flex-wrap:wrap}.item-editor-top #itemTitle{flex-basis:100%}.item-editor-top #itemDate{max-width:none;flex:1}.item-editor-footer{align-items:flex-start;flex-direction:column}}

/* V7: toolbar dinh dang cho Nhat ky va Kho kien thuc */
.item-format-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:9px 10px;border:1px solid var(--line,#e4eaf1);border-bottom:0;border-radius:10px 10px 0 0;background:#f8fafc}
.item-format-toolbar button,.item-format-toolbar select{min-height:32px;border:1px solid #dce4ed;border-radius:6px;background:#fff;color:#34445a;padding:4px 8px;font:inherit;font-size:12px;cursor:pointer}
.item-format-toolbar button:hover{background:#edf4fb}.item-format-toolbar .color-tool{display:flex;align-items:center;gap:4px;border:1px solid #dce4ed;border-radius:6px;background:#fff;padding:3px 6px;font-weight:700}
.item-format-toolbar input[type=color]{width:22px;height:22px;border:0;padding:0;background:transparent;cursor:pointer}
.item-content-editor{border-top-left-radius:0!important;border-top-right-radius:0!important;min-height:300px}
.global-search-modal{position:fixed;inset:0;background:#172b4d88;z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px}
.global-search-card{width:min(760px,100%);max-height:75vh;overflow:auto;background:#fff;border-radius:16px;padding:20px;box-shadow:0 20px 60px #10213a44}
.global-search-card input{width:100%;padding:13px;border:1px solid #dce4ed;border-radius:9px;font:inherit;margin:12px 0}
.global-search-results{display:grid;gap:8px}.global-search-result{display:block;text-align:left;padding:12px;border:1px solid #e5ebf2;border-radius:9px;background:#fff;cursor:pointer}.global-search-result strong{display:block;color:#24364d}.global-search-result small{color:#718096}

.unit-search{width:100%;margin-top:12px;border:1px solid #e3e9f0;border-radius:8px;padding:9px 10px;font:10px 'Be Vietnam Pro',sans-serif;color:#34445a;outline:none;background:#fbfcfe}.unit-search:focus{border-color:#9bb3d0;box-shadow:0 0 0 2px #edf3fb}.unit-search::placeholder{color:#a0aab7}

.profile-settings-panel{max-width:760px;margin:24px auto}.profile-settings-panel label{display:block;margin:14px 0 6px;font-size:12px;font-weight:700;color:#40516a}.profile-settings-panel input{width:100%;height:42px;border:1px solid #e3e9f0;border-radius:9px;padding:0 12px;font:inherit;font-size:12px}.profile-settings-panel .section-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.profile-settings-panel .secondary-button{margin-top:0}.avatar{object-fit:cover}

/* VER 14 — Flashcard workspace */
.flashcard-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0}.flashcard-layout{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr);gap:18px;align-items:start}.flashcard-study,.flashcard-library,.flashcard-form{padding:20px}.flashcard-meta{display:flex;justify-content:space-between;gap:12px;color:var(--muted,#718096);font-size:13px;margin-bottom:14px}.flashcard-face{width:100%;min-height:260px;border:1px solid #dce5f1;border-radius:18px;background:linear-gradient(145deg,#f7fbff,#edf4ff);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px;color:#243b5a;cursor:pointer;text-align:center}.flashcard-face small{font-size:11px;letter-spacing:1.5px;color:#7186a2}.flashcard-face strong{font-size:clamp(25px,3vw,38px);line-height:1.3}.flashcard-face span{font-size:17px;line-height:1.8}.flashcard-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.flashcard-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid #edf0f5}.flashcard-row>div:first-child{min-width:0;display:flex;flex-direction:column;gap:5px}.flashcard-row small{color:#718096;overflow-wrap:anywhere}.flashcard-row-actions{display:flex;gap:6px;flex-shrink:0}.flashcard-row-actions button{padding:7px 10px;font-size:12px}.flashcard-form{margin-top:18px}.flashcard-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0}.flashcard-form-grid label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#52627a}.flashcard-form-grid input,.flashcard-form-grid select{width:100%;min-width:0}.flashcard-actions button{min-width:90px}
@media(max-width:850px){.flashcard-layout{grid-template-columns:1fr}.flashcard-stats{gap:8px}.flashcard-form-grid{grid-template-columns:1fr}.flashcard-study,.flashcard-library,.flashcard-form{padding:14px}.flashcard-face{min-height:220px}.flashcard-row{align-items:flex-start;flex-direction:column}.flashcard-row-actions{align-self:flex-end}}
/* VER15: dictionary + dark theme */
.dictionary-page{padding:24px;margin-top:24px}.dictionary-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}.dictionary-form input,.dictionary-form select,.dictionary-tools input{min-width:0;border:1px solid var(--line);border-radius:8px;padding:11px;background:var(--white);color:var(--ink);font:inherit;font-size:12px}.dictionary-form button{margin:0}.dictionary-tools{display:flex;align-items:center;gap:12px;margin:14px 0}.dictionary-tools input{flex:1}.dictionary-tools span{font-size:11px;color:var(--muted)}.dictionary-list{display:grid;gap:9px}.dictionary-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:10px;padding:13px;background:var(--white)}.dictionary-row strong,.dictionary-row small,.dictionary-row em{display:block}.dictionary-row strong{font-size:14px;color:var(--ink)}.dictionary-row small{font-size:11px;color:var(--muted);margin-top:5px}.dictionary-row p{font-size:12px;margin:7px 0;color:#52647b}.dictionary-row em{font-size:10px;color:#8292a7;font-style:normal;margin-top:4px}
:root[data-theme="dark"]{--ink:#e8eef7;--muted:#a7b4c6;--line:#344257;--bg:#111a28;--white:#1b2738}html[data-theme="dark"] body{background:var(--bg);color:#dce5f0}html[data-theme="dark"] .sidebar,html[data-theme="dark"] .topbar,html[data-theme="dark"] .panel,html[data-theme="dark"] .unit-panel,html[data-theme="dark"] .editor-panel,html[data-theme="dark"] .login-card{background:#1b2738;color:#dce5f0;border-color:#344257}html[data-theme="dark"] .rich-editor,html[data-theme="dark"] .item-content-editor{background:#152132;color:#e4ebf5;border-color:#344257}html[data-theme="dark"] input,html[data-theme="dark"] textarea,html[data-theme="dark"] select{background:#152132;color:#e4ebf5;border-color:#344257}html[data-theme="dark"] .welcome{background:#24354b}html[data-theme="dark"] .feature-card,html[data-theme="dark"] .unit-list-row,html[data-theme="dark"] .course-item{background:#202f43;color:#e4ebf5;border-color:#344257}html[data-theme="dark"] .editor-toolbar{background:#202f43;border-color:#344257}html[data-theme="dark"] .editor-toolbar button,html[data-theme="dark"] .editor-toolbar select{background:#152132;color:#e4ebf5;border-color:#344257}html[data-theme="dark"] .secondary-button{background:#30445e;color:#e4ebf5}html[data-theme="dark"] .quote-panel{background:#202f43}html[data-theme="dark"] .dictionary-row{background:#1b2738;border-color:#344257}
@media(max-width:680px){.dictionary-form{grid-template-columns:1fr}.dictionary-tools{align-items:stretch;flex-direction:column}.dictionary-row{align-items:flex-start}}
@media print{.sidebar,.topbar,button,.dictionary-form,.dictionary-tools{display:none!important}.content{max-width:none!important}}
.flashcards-page{padding:24px;margin-top:24px}.flashcard-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.stat-card{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px}.stat-card strong,.stat-card span{display:block}.stat-card strong{font-size:22px;color:var(--ink)}.stat-card span{font-size:10px;color:var(--muted)}.flashcard-study{max-width:650px;margin:15px auto;text-align:center;padding:20px}.study-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:11px}.flashcard-face{display:grid;place-items:center;gap:18px;width:100%;min-height:190px;margin:18px 0;background:var(--bg);border:1px solid var(--line);border-radius:14px;color:var(--ink);cursor:pointer;padding:22px}.flashcard-face>strong{font-size:28px}.flashcard-face small{font-size:10px;color:var(--muted)}.flashcard-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.flashcard-editor{padding:18px;margin:15px 0}.flashcard-list{display:grid;gap:8px}.flashcard-row{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);background:var(--white);padding:12px;border-radius:9px}.flashcard-row strong,.flashcard-row small{display:block}.flashcard-row small{font-size:10px;color:var(--muted);margin-top:5px}.flashcard-row-actions{display:flex;gap:6px}.flashcard-row-actions button{margin:0}@media(max-width:650px){.flashcard-stats{grid-template-columns:1fr}.flashcard-row{align-items:flex-start;flex-direction:column}}

/* VER16 — Schedule workspace */
.schedule-page{padding:22px;margin-top:22px}.schedule-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0}.schedule-stat{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:13px}.schedule-stat strong,.schedule-stat span{display:block}.schedule-stat strong{font-size:23px;color:var(--ink)}.schedule-stat span{font-size:11px;color:var(--muted)}.schedule-filters{display:flex;gap:9px;margin:14px 0}.schedule-filters input{flex:1;min-width:150px}.schedule-filters input,.schedule-filters select,.schedule-form input,.schedule-form select{border:1px solid var(--line);border-radius:8px;padding:10px;background:var(--white);color:var(--ink);font:inherit;font-size:12px}.schedule-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px;background:var(--white)}.schedule-table{width:100%;border-collapse:collapse;min-width:850px;font-size:12px}.schedule-table th{background:#148b8b;color:white;text-align:left;padding:11px 10px;white-space:nowrap}.schedule-table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}.schedule-table td:first-child{min-width:180px}.schedule-table td strong,.schedule-table td small{display:block}.schedule-table td small{margin-top:4px;color:var(--muted);max-width:240px;overflow-wrap:anywhere}.schedule-row.is-overdue{background:#ffe0df;color:#8e1717}.schedule-row.is-today{background:#fff3b8;color:#5b4700}.schedule-row.is-completed{background:#e0f5e4;color:#28633a}.schedule-status{display:inline-block;padding:4px 8px;border-radius:20px;font-size:10px;background:#edf1f6;color:#53657b;white-space:nowrap}.schedule-status.overdue{background:#ffd0cd;color:#9b1c16}.schedule-status.today{background:#ffe69a;color:#745400}.schedule-status.completed{background:#c7ebcf;color:#246438}.schedule-row-actions{display:flex;gap:5px;flex-wrap:wrap}.schedule-row-actions button{font-size:10px;padding:6px 8px;white-space:nowrap}.schedule-form{padding:18px;margin-top:16px}.schedule-form h3{margin-top:0}.schedule-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}.schedule-form-grid label{display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--muted)}.schedule-form-grid input,.schedule-form-grid select{width:100%;box-sizing:border-box}.schedule-toast{position:fixed;right:22px;bottom:28px;z-index:2000;max-width:min(390px,calc(100vw - 32px));padding:16px 20px;background:#fffdf1;border:1px solid #e6dca7;border-left:5px solid #d6a52e;border-radius:12px;box-shadow:0 12px 36px #14243a33;color:#26384f;font-size:14px;opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s}.schedule-toast.show{opacity:1;transform:translateY(0)}
@media(max-width:850px){.schedule-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.schedule-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.schedule-filters{flex-direction:column}.schedule-form-grid{grid-template-columns:1fr}.schedule-page{padding:13px}}


/* VER 16.1 - Banner gon tren tat ca cac muc */
.content > .welcome{min-height:58px;padding:10px 18px;border-radius:11px;margin-bottom:16px}
.content > .welcome .eyebrow{display:none}
.content > .welcome h1{font-size:16px;line-height:1.3;margin:0 0 2px;letter-spacing:-.2px}
.content > .welcome .subheading{font-size:10px;line-height:1.4;margin:0}
.content > .welcome .welcome-art{font-size:25px;padding-right:10px}
.content > .welcome .welcome-art span:nth-child(2){font-size:34px}
.schedule-toast{display:flex;align-items:flex-start;gap:14px;opacity:0;transform:translateY(12px);pointer-events:none;padding:14px 14px 14px 18px}
.schedule-toast.show{opacity:1;transform:translateY(0);pointer-events:auto}
.schedule-toast-message{flex:1;line-height:1.55;overflow-wrap:anywhere}
.schedule-toast-close{flex:0 0 28px;width:28px;height:28px;border:1px solid #d8cfaa;border-radius:7px;background:#fff;color:#536174;font-size:18px;line-height:1;cursor:pointer;padding:0}
.schedule-toast-close:hover{background:#f4edcf}
@media(max-width:620px){.content > .welcome{min-height:52px;padding:9px 12px;margin-bottom:12px}.content > .welcome h1{font-size:14px}.content > .welcome .welcome-art{display:none}.schedule-toast{right:12px;bottom:16px}}

/* Rich-text lists: Word-like bullet styles */
.rich-editor ul,.item-content-editor ul{padding-left:2.2em;margin:8px 0}
.rich-editor ol,.item-content-editor ol{padding-left:2.2em;margin:8px 0}
.rich-editor ul.mps-list-star,.item-content-editor ul.mps-list-star{list-style:none;padding-left:1.8em}
.rich-editor ul.mps-list-star>li,.item-content-editor ul.mps-list-star>li{position:relative}
.rich-editor ul.mps-list-star>li::before,.item-content-editor ul.mps-list-star>li::before{content:"✳";position:absolute;left:-1.55em;top:0}

/* Ver 16.3: indent chi thay doi vi tri, khong doi mau nen/chu */
.rich-editor blockquote{
  background:transparent !important;
  color:inherit !important;
  border-left:0 !important;
  margin:8px 0;
  padding:0 0 0 2em;
}
/* Noi dung dai se cuon ben trong khung soan thao, khong keo dai ca trang */
.rich-editor{
  height:68vh;
  min-height:320px;
  max-height:760px;
  overflow-y:auto;
  overflow-x:hidden;
  resize:vertical;
  overscroll-behavior:contain;
}
.item-content-editor{
  height:58vh;
  min-height:300px;
  max-height:680px;
  overflow-y:auto;
  overflow-x:hidden;
  resize:vertical;
  overscroll-behavior:contain;
}
@media(max-width:760px){
  .rich-editor{height:60vh;min-height:260px;max-height:620px}
  .item-content-editor{height:55vh;min-height:250px;max-height:580px}
}

/* Ver 16.4: dieu chinh khoang cach dong/doan va le trong khung ghi chep */
.rich-editor{line-height:var(--editor-line-height,1.5)}
.rich-editor p,.rich-editor div{margin-top:0;margin-bottom:var(--editor-paragraph-space,4px)}
.rich-editor li{margin-top:0;margin-bottom:var(--editor-paragraph-space,4px)}
.rich-editor h2,.rich-editor h3,.rich-editor h4{margin-top:.8em;margin-bottom:.35em}
.editor-toolbar select{max-width:150px}
#resetEditorSpacing{white-space:nowrap}

/* VER 16.5 - Khoa bo cuc trang hoc trong man hinh, chi cuon noi dung editor */
@media (min-width:761px){
  body:has(#languagePage:not([hidden])){overflow:hidden}
  body:has(#languagePage:not([hidden])) .app-shell{height:100vh;min-height:0;overflow:hidden}
  body:has(#languagePage:not([hidden])) .main{height:100vh;min-height:0;overflow:hidden}
  body:has(#languagePage:not([hidden])) .content:has(#languagePage:not([hidden])){
    height:calc(100vh - 68px);min-height:0;flex:1 1 auto;overflow:hidden;
    display:flex;flex-direction:column;box-sizing:border-box;
  }
  body:has(#languagePage:not([hidden])) .content > .welcome,
  body:has(#languagePage:not([hidden])) .content > .section-heading{flex:0 0 auto}
  body:has(#languagePage:not([hidden])) #languagePage{
    flex:1 1 0;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  }
  body:has(#languagePage:not([hidden])) #languagePage .language-toolbar,
  body:has(#languagePage:not([hidden])) #languagePage .language-layout-controls{flex:0 0 auto}
  body:has(#languagePage:not([hidden])) #languagePage .language-layout{
    flex:1 1 0;min-height:0;align-items:stretch;overflow:hidden;
  }
  body:has(#languagePage:not([hidden])) #languagePage .unit-panel{
    min-height:0;height:100%;overflow-y:auto;overscroll-behavior:contain;
  }
  body:has(#languagePage:not([hidden])) #languagePage .editor-panel{
    display:flex;flex-direction:column;min-height:0;height:100%;overflow:hidden;
  }
  body:has(#languagePage:not([hidden])) #languagePage #unitEditor{
    flex:1 1 0;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  }
  body:has(#languagePage:not([hidden])) #languagePage #unitEditor[hidden]{display:none!important}
  body:has(#languagePage:not([hidden])) #languagePage .editor-heading,
  body:has(#languagePage:not([hidden])) #languagePage .unit-description-input,
  body:has(#languagePage:not([hidden])) #languagePage .editor-workspace-actions,
  body:has(#languagePage:not([hidden])) #languagePage .editor-toolbar,
  body:has(#languagePage:not([hidden])) #languagePage .editor-footer{flex:0 0 auto}
  body:has(#languagePage:not([hidden])) #languagePage .rich-editor{
    flex:1 1 0;min-height:0;height:auto;max-height:none;resize:none;overflow:auto;
  }
  body:has(#languagePage:not([hidden])) .app-shell.focus-mode .content{
    height:calc(100vh - 68px);min-height:0;overflow:hidden;
  }
  body:has(#languagePage:not([hidden])) .app-shell.focus-mode #languagePage{height:100%;}
  body:has(#languagePage:not([hidden])) .app-shell.focus-mode .editor-panel{min-height:0;height:100%;}
  body:has(#languagePage:not([hidden])) .app-shell.focus-mode .rich-editor{min-height:0;height:auto;}
}

/* VER 16.6 - GON GIAO DIEN, UU TIEN KHUNG SOAN THAO */
@media (min-width:761px){
  body:has(#languagePage:not([hidden])){overflow:hidden}
  body:has(#languagePage:not([hidden])) .topbar{height:54px;min-height:54px;padding:0 18px;gap:10px}
  body:has(#languagePage:not([hidden])) .top-actions{gap:5px;white-space:nowrap}
  body:has(#languagePage:not([hidden])) .top-actions button{padding:7px 8px;font-size:9px}
  body:has(#languagePage:not([hidden])) .content:has(#languagePage:not([hidden])){height:calc(100vh - 54px);padding-top:10px;padding-bottom:8px}
  body:has(#languagePage:not([hidden])) .content > .welcome{min-height:42px!important;height:42px;padding:6px 14px!important;border-radius:8px}
  body:has(#languagePage:not([hidden])) .welcome h1{font-size:16px;margin:0}
  body:has(#languagePage:not([hidden])) .welcome .subheading{font-size:9px;line-height:1.2}
  body:has(#languagePage:not([hidden])) .welcome-art{font-size:25px;padding-right:8px}
  body:has(#languagePage:not([hidden])) .welcome-art span:nth-child(2){font-size:32px}
  body:has(#languagePage:not([hidden])) .section-heading{margin:9px 0 7px}
  body:has(#languagePage:not([hidden])) .section-heading h2{font-size:14px}
  body:has(#languagePage:not([hidden])) .section-heading p{font-size:9px;margin-top:2px}
  body:has(#languagePage:not([hidden])) .language-workspace{margin-top:5px}
  body:has(#languagePage:not([hidden])) .language-toolbar{margin-bottom:6px}
  body:has(#languagePage:not([hidden])) .language-toolbar h2{font-size:14px}
  body:has(#languagePage:not([hidden])) .language-toolbar p{font-size:9px;margin-top:2px}
  body:has(#languagePage:not([hidden])) .language-layout{gap:9px}
  body:has(#languagePage:not([hidden])) .editor-panel{padding:12px}
  body:has(#languagePage:not([hidden])) .editor-heading{align-items:center;gap:8px}
  body:has(#languagePage:not([hidden])) .unit-title-input{font-size:17px;padding:1px 0}
  body:has(#languagePage:not([hidden])) .unit-description-input{padding:4px 0 6px;margin-bottom:5px;font-size:10px}
  body:has(#languagePage:not([hidden])) .editor-workspace-actions{margin-bottom:5px}
  body:has(#languagePage:not([hidden])) .editor-view-button{padding:5px 8px}
  body:has(#languagePage:not([hidden])) .editor-toolbar{flex-wrap:nowrap;gap:4px;padding:5px;min-height:40px;overflow:visible;white-space:nowrap}
  body:has(#languagePage:not([hidden])) .editor-toolbar button,body:has(#languagePage:not([hidden])) .editor-toolbar select,body:has(#languagePage:not([hidden])) .editor-toolbar .color-tool{min-height:28px;height:28px;padding:3px 6px;font-size:10px}
  body:has(#languagePage:not([hidden])) .editor-toolbar select{max-width:105px}
  body:has(#languagePage:not([hidden])) .editor-toolbar #fontFamily{width:112px}
  body:has(#languagePage:not([hidden])) .editor-toolbar #fontSize{width:48px}
  .toolbar-more{position:relative;flex:0 0 auto;margin-left:auto}
  .toolbar-more>summary{list-style:none;cursor:pointer;border:1px solid #dce4ed;border-radius:6px;background:#fff;color:#405775;padding:6px 9px;font-size:10px;font-weight:600}
  .toolbar-more>summary::-webkit-details-marker{display:none}
  .toolbar-more-menu{position:absolute;right:0;top:calc(100% + 5px);z-index:30;display:flex;flex-wrap:wrap;gap:5px;width:min(520px,75vw);padding:9px;background:#fff;border:1px solid #dce4ed;border-radius:9px;box-shadow:0 10px 30px #172b4d24;white-space:normal}
  .toolbar-more-menu>span{display:none}
  .toolbar-more-menu select{max-width:145px}
  body:has(#languagePage:not([hidden])) #languagePage .rich-editor{padding:14px 18px}
  body:has(#languagePage:not([hidden])) #languagePage .editor-footer{margin-top:6px}
  body:has(#languagePage:not([hidden])) #languagePage .editor-footer .primary-button{padding:8px 12px}
}
@media(max-width:760px){
  .editor-toolbar{flex-wrap:wrap;align-items:center}
  .toolbar-more{position:relative}
  .toolbar-more>summary{list-style:none;cursor:pointer;border:1px solid #dce4ed;border-radius:6px;background:#fff;color:#405775;padding:7px 10px;font-size:11px}
  .toolbar-more>summary::-webkit-details-marker{display:none}
  .toolbar-more-menu{display:flex;flex-wrap:wrap;gap:5px;padding:8px;margin-top:6px;background:#fff;border:1px solid #dce4ed;border-radius:8px}
  .toolbar-more-menu>span{display:none}
}
@media (min-width:761px) and (max-width:1100px){
  body:has(#languagePage:not([hidden])) .breadcrumb{display:none}
  body:has(#languagePage:not([hidden])) .topbar{justify-content:flex-end;padding:0 10px}
  body:has(#languagePage:not([hidden])) .top-actions{gap:3px}
  body:has(#languagePage:not([hidden])) .top-actions button{padding:6px 5px;font-size:8px}
}

/* VER 16.7 - Compact workspace cho Nhat ky / Kien thuc / Muc tieu va Schedule */
@media (min-width:761px){
  body:has(#sectionPage:not([hidden])){overflow:hidden}
  body:has(#sectionPage:not([hidden])) .app-shell{height:100vh;min-height:0;overflow:hidden}
  body:has(#sectionPage:not([hidden])) .main{height:100vh;min-height:0;overflow:hidden}
  body:has(#sectionPage:not([hidden])) .topbar{height:54px;min-height:54px;padding:0 18px;gap:10px}
  body:has(#sectionPage:not([hidden])) .content:has(#sectionPage:not([hidden])){
    height:calc(100vh - 54px);min-height:0;flex:1 1 auto;overflow:hidden;
    display:flex;flex-direction:column;padding:10px 24px 8px;
  }
  body:has(#sectionPage:not([hidden])) .content>.welcome{flex:0 0 42px;height:42px;min-height:42px;padding:6px 14px!important;margin-bottom:8px;border-radius:8px}
  body:has(#sectionPage:not([hidden])) .content>.welcome h1{font-size:15px;margin:0}
  body:has(#sectionPage:not([hidden])) .content>.welcome .subheading{font-size:9px;line-height:1.2}
  body:has(#sectionPage:not([hidden])) #sectionPage{flex:1 1 0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  body:has(#sectionPage:not([hidden])) #sectionPage>.section-heading{flex:0 0 auto;margin:5px 0 7px;align-items:center}
  body:has(#sectionPage:not([hidden])) #sectionPage>.section-heading h2{font-size:14px}
  body:has(#sectionPage:not([hidden])) #sectionPage>.section-heading p{font-size:9px;margin-top:2px}
  body:has(#sectionPage:not([hidden])) #itemManager{flex:1 1 0;min-height:0;height:100%;overflow:hidden;grid-template-columns:minmax(190px,230px) minmax(0,1fr);gap:9px}
  body:has(#sectionPage:not([hidden])) #itemManager>.item-list-panel,
  body:has(#sectionPage:not([hidden])) #itemManager>.item-editor-panel{min-height:0;height:100%;overflow:hidden;padding:10px;border-radius:10px}
  body:has(#sectionPage:not([hidden])) #itemManager>.item-list-panel{display:flex;flex-direction:column}
  body:has(#sectionPage:not([hidden])) #itemList{flex:1 1 0;min-height:0;overflow-y:auto}
  body:has(#sectionPage:not([hidden])) #itemManager>.item-editor-panel{gap:6px}
  body:has(#sectionPage:not([hidden])) .item-editor-top{flex:0 0 auto;gap:6px}
  body:has(#sectionPage:not([hidden])) #itemTags{flex:0 0 auto;min-height:30px;padding:6px 8px;font-size:10px}
  body:has(#sectionPage:not([hidden])) .item-format-toolbar{flex:0 0 auto;flex-wrap:nowrap;gap:4px;padding:5px;overflow-x:auto;overflow-y:hidden;white-space:nowrap}
  body:has(#sectionPage:not([hidden])) .item-format-toolbar button,
  body:has(#sectionPage:not([hidden])) .item-format-toolbar select{min-height:27px;height:27px;padding:3px 6px;font-size:10px;flex:0 0 auto}
  body:has(#sectionPage:not([hidden])) .item-format-toolbar .color-tool{flex:0 0 auto;font-size:10px}
  body:has(#sectionPage:not([hidden])) #itemContent{flex:1 1 0;min-height:0;height:auto;max-height:none;overflow:auto;padding:14px 18px}
  body:has(#sectionPage:not([hidden])) .item-editor-footer{flex:0 0 auto;margin-top:0;padding-top:2px}
  body:has(#sectionPage:not([hidden])) footer{flex:0 0 auto;padding:4px;font-size:8px}
  body:has(#sectionPage:not([hidden])) .top-actions{gap:5px;white-space:nowrap}
  body:has(#sectionPage:not([hidden])) .top-actions button{padding:6px 7px;font-size:9px}
}
/* Schedule: thu gon hang cong viec khoang mot nua */
.schedule-page{padding:14px;margin-top:10px}
.schedule-summary{gap:8px;margin:10px 0}
.schedule-stat{padding:8px 10px}
.schedule-stat strong{font-size:18px}
.schedule-stat span{font-size:10px}
.schedule-filters{gap:7px;margin:9px 0}
.schedule-filters input,.schedule-filters select{padding:7px 9px;font-size:11px}
.schedule-table{font-size:10px}
.schedule-table th{padding:6px 7px;font-size:10px}
.schedule-table td{padding:5px 7px;line-height:1.3}
.schedule-table td:first-child{min-width:145px}
.schedule-table td small{margin-top:2px;font-size:9px;line-height:1.25;max-width:210px}
.schedule-status{padding:2px 6px;font-size:9px}
.schedule-row-actions{gap:3px}
.schedule-row-actions button{font-size:9px;padding:3px 5px;line-height:1.2}
.schedule-form{padding:12px;margin-top:10px}
.schedule-form-grid{gap:8px;margin:9px 0}
.schedule-form-grid input,.schedule-form-grid select{padding:7px;font-size:11px}
@media(max-width:760px){
  .schedule-page{padding:12px;margin-top:10px}
  .schedule-table td{padding:6px}
  .item-format-toolbar{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap}
}

/* Ver 16.8: co the thu gon panel tim kiem/danh sach trong Nhat ky, Kien thuc, Muc tieu */
.item-list-toggle{flex:0 0 auto;white-space:nowrap;padding:8px 10px;font-size:12px}
.item-manager.list-collapsed{grid-template-columns:minmax(0,1fr)!important}
.item-manager.list-collapsed>.item-list-panel{display:none!important}
@media(max-width:560px){.item-list-toggle{order:0}.item-editor-top #itemTitle{flex:1 1 160px;min-width:0}}

/* VER 16.9 - Dong bo nut thao tac trong Schedule */
.schedule-table th:last-child,
.schedule-table td:last-child{min-width:176px;white-space:nowrap}
.schedule-row-actions{display:flex;align-items:center;justify-content:flex-start;gap:6px;flex-wrap:nowrap;white-space:nowrap}
.schedule-row-actions button{display:inline-flex;align-items:center;justify-content:center;height:26px;min-height:26px;box-sizing:border-box;margin:0;padding:0 9px;border-radius:7px;font:600 10px 'Be Vietnam Pro',sans-serif;line-height:1;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.schedule-row-actions .secondary-button{background:#edf2f8;color:#35577f;border:1px solid transparent}
.schedule-row-actions .secondary-button:hover{background:#dfe9f5;color:#203d63}
.schedule-row-actions .danger-button{height:26px;min-height:26px;padding:0 9px;background:#fff5f4;border:1px solid #f2d4d1;color:#b45c55}
.schedule-row-actions .danger-button:hover{background:#ffe8e6;border-color:#e9b8b3}
@media(max-width:560px){.schedule-row-actions{gap:4px}.schedule-row-actions button{height:25px;min-height:25px;padding:0 7px;font-size:9px}}

/* VER 17.0 - Can chinh dong bo toan bo nut trong Schedule */
#schedulePage .section-heading{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin:0 0 12px;
}
#schedulePage .section-heading>div:first-child{min-width:220px;flex:1 1 auto}
#schedulePage .section-actions{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
  flex:0 0 auto;margin:0;
}
#schedulePage .section-actions button,
#schedulePage #scheduleSaveButton,
#schedulePage #scheduleCancelButton{
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;height:34px;min-height:34px;margin:0;
  padding:0 14px;border-radius:8px;line-height:1;white-space:nowrap;
}
#schedulePage #scheduleNotifyButton{border:1px solid #e3eaf2;background:#edf2f8;color:#35577f}
#schedulePage #scheduleAddButton,
#schedulePage #scheduleSaveButton{background:#203d63;color:#fff}
#schedulePage #scheduleCancelButton{background:#edf2f8;color:#35577f}
#schedulePage .schedule-row-actions{display:flex;align-items:center;justify-content:flex-start;gap:6px;min-height:30px}
#schedulePage .schedule-row-actions button{margin:0!important;align-self:center}
#schedulePage .schedule-form{display:flex;flex-direction:column;gap:8px}
#schedulePage .schedule-form h3{margin:0 0 2px}
#schedulePage .schedule-form-grid{margin:4px 0 8px}
#schedulePage .schedule-form>.section-actions{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin:0}
#schedulePage #scheduleFormFeedback{margin:0;min-height:0}
@media(max-width:600px){
  #schedulePage .section-heading{align-items:flex-start}
  #schedulePage .section-actions{width:100%;justify-content:flex-start}
  #schedulePage .section-actions button{height:32px;min-height:32px;padding:0 10px}
  #schedulePage .schedule-form>.section-actions{width:100%}
}


/* VER 17.1 - Can cot nut Schedule va nhan dien thuong hieu */
#schedulePage .schedule-table th:last-child,
#schedulePage .schedule-table td:last-child{width:190px;min-width:190px}
#schedulePage .schedule-row-actions{
  display:grid;grid-template-columns:86px 46px 46px;
  align-items:center;justify-content:start;gap:6px;
  min-height:30px;white-space:nowrap;
}
#schedulePage .schedule-row-actions button{
  width:100%;min-width:0;height:26px;min-height:26px;
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;margin:0!important;padding:0 4px;
  white-space:nowrap;
}
#schedulePage .brand-mark,#schedulePage .login-mark{display:grid;place-items:center}
.brand-mark{background:linear-gradient(145deg,#172b4d,#263f70)!important;box-shadow:0 5px 14px #172b4d25}
.brand-mark svg{width:34px;height:34px;display:block}
.login-mark{background:linear-gradient(145deg,#172b4d,#263f70)!important;box-shadow:0 8px 22px #172b4d30}
.login-mark svg{width:42px;height:42px;display:block}
@media(max-width:560px){
  #schedulePage .schedule-table th:last-child,#schedulePage .schedule-table td:last-child{width:174px;min-width:174px}
  #schedulePage .schedule-row-actions{grid-template-columns:78px 42px 42px;gap:4px}
}

/* VER 17.2 - Trung tam nhac nho */
.reminders-page{margin-top:0}
.reminder-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:12px 0}
.reminder-list{display:grid;gap:9px}
.reminder-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:11px}
.reminder-card-main{min-width:0;flex:1}
.reminder-card-main h3{font-size:13px;color:#263950;margin:6px 0 4px;overflow-wrap:anywhere}
.reminder-card-main p,.reminder-card-main small{font-size:10px;color:#8290a3;margin:0;line-height:1.6}
.reminder-card-main small{display:block;margin-top:4px}
.reminder-category{display:inline-flex;padding:3px 8px;border-radius:20px;font-size:9px;font-weight:700;background:#edf3fb;color:#476789}
.reminder-category.work{background:#fff2df;color:#94621f}.reminder-category.personal{background:#f1eafd;color:#7654a3}.reminder-category.goal{background:#e5f5ed;color:#397b59}
.reminder-card-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.reminder-card-actions button{height:29px;min-height:29px;margin:0;padding:0 10px;white-space:nowrap}
.reminder-card.is-completed{background:#f7faf8;opacity:.78}
.reminder-form{margin-top:14px;padding:18px}
.reminder-form h3{margin:0 0 12px;color:#263950;font-size:15px}
.reminder-form .schedule-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.reminder-form .schedule-form-grid label{display:flex;flex-direction:column;gap:6px;color:#718096;font-size:11px}
.reminder-form .schedule-form-grid input,.reminder-form .schedule-form-grid select{height:38px;min-width:0;border:1px solid var(--line);border-radius:8px;padding:0 10px;font:inherit;color:#263950;background:#fff}
.reminder-form>.section-actions{display:flex;align-items:center;gap:8px;margin-top:12px}
.reminder-form>.section-actions button{height:36px;margin:0}
@media(max-width:700px){.reminder-card{align-items:flex-start;flex-direction:column}.reminder-card-actions{width:100%;flex-wrap:wrap}.reminder-form .schedule-form-grid{grid-template-columns:1fr 1fr}.reminder-summary{grid-template-columns:1fr}}
@media(max-width:440px){.reminder-form .schedule-form-grid{grid-template-columns:1fr}.reminder-card-actions button{flex:1}}