/* Samio system theme — logo colors softened with the aqua, coral, cream and leaf tones from the current learning scene. */
:root {
  --samio-blue: #0046ab;
  --samio-blue-bright: #9ec3f0;
  --samio-blue-deep: #0054cd;
  --samio-blue-soft: #e9f1fe;
  --samio-pink: #ee7988;
  --samio-pink-bright: #ff9aab;
  --samio-pink-soft: #fff0f3;
  --samio-yellow: #247dff;
  --samio-yellow-soft: #fff8e8;
  --samio-leaf: #78a968;
  --samio-leaf-soft: #eef8e9;
  --samio-ink: #17383b;
  --samio-muted: #647f80;
  --samio-bg: #f7fdfc;
  --samio-border: #c1c5c8;
  --samio-shadow: 0 14px 34px rgba(42, 174, 184, .12);
  --background-static: var(--samio-blue);
  --background-hover: var(--samio-yellow);
  --color-red: var(--samio-pink);
  --color-hover: var(--samio-pink);
  --accent: var(--samio-yellow);
  --button-action: var(--samio-pink);
  --button-action-hover: #df6576;
  --button-cta: var(--samio-yellow);
  --button-cta-hover: #ffc74d;
  --highlight: var(--samio-pink-bright);
  --accent-2: var(--samio-pink-bright);
  --color-green: var(--samio-leaf);
  --color-dark-green: #5f8f50;
  --bs-primary: var(--samio-blue);
  --bs-info: var(--samio-blue);
  --bs-success: var(--samio-leaf);
  --bs-warning: var(--samio-yellow);
  --bs-danger: var(--samio-pink);
  --bg: var(--samio-bg);
  --border: var(--samio-border);
}

::selection { background: var(--samio-pink); color: #fff; }
body {
  color: var(--samio-ink);
  background:
    radial-gradient(circle at 14% 4%, rgba(255, 248, 232, .9) 0, rgba(255, 248, 232, 0) 30%),
    radial-gradient(circle at 86% 0, rgba(255, 240, 243, .8) 0, rgba(255, 240, 243, 0) 28%),
    linear-gradient(180deg, #f7fdfc 0%, #eefbfa 54%, #fff8f4 100%);
  background-color: var(--samio-bg);
}
a { color: var(--samio-blue); }
a:hover { color: var(--samio-blue-deep); }

.btn-primary,
.button-primary,
.bg-primary,
.badge-primary,
button[type="submit"]:not(.btn-danger):not(.btn-warning) {
  color: #fff !important;
  background: var(--samio-blue) !important;
  border-color: var(--samio-blue) !important;
  box-shadow: 0 10px 22px rgba(42, 174, 184, .18) !important;
}
.btn-primary:hover,
.button-primary:hover,
button[type="submit"]:not(.btn-danger):not(.btn-warning):hover {
  filter: brightness(.94);
}
.btn-outline-primary {
  color: var(--samio-blue) !important;
  border-color: var(--samio-blue) !important;
}
.btn-outline-primary:hover {
  color: #fff !important;
  background: var(--samio-blue) !important;
}
.btn-warning,
.badge-warning,
.bg-warning {
  color: #5c4305 !important;
  background: var(--samio-yellow) !important;
  border-color: var(--samio-yellow) !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--samio-blue-bright) !important;
  box-shadow: 0 0 0 3px rgba(118, 218, 221, .24) !important;
}
input[type="checkbox"],
input[type="radio"] { accent-color: var(--samio-pink); }

.card,
.modal-content,
.content-card,
.panel,
.list-card,
.tool-card {
  border-color: var(--samio-border) !important;
  box-shadow: var(--samio-shadow);
}
.nav-tabs .nav-link.active {
  color: var(--samio-blue) !important;
  border-bottom-color: var(--samio-pink) !important;
}
.page-item.active .page-link,
.pagination .active > a {
  color: #fff !important;
  background: var(--samio-blue) !important;
  border-color: var(--samio-blue) !important;
}
.progress-bar { background: var(--samio-blue) !important; }

/* Public navigation */
.menu-account,
.header-account,
.header-wrapper {
  border-color: var(--samio-border) !important;
}
.menu-account .active > a,
.menu-account a:hover,
.menu-account .menu-active {
  color: var(--samio-blue) !important;
}

/* Teacher, class, task-bank, gradebook and vocabulary sidebars */
.teacher-portal-sidebar,
.gradebook-sidebar,
.vocab-sidebar {
  color: #fff !important;
  background: var(--samio-blue) !important;
  border-color: rgba(255, 255, 255, .13) !important;
  box-shadow: 8px 12px 30px rgba(27, 141, 149, .18) !important;
}
.teacher-sidebar-head,
.gradebook-sidebar-head,
.vocab-sidebar-head,
.teacher-sidebar-footer,
.gradebook-sidebar-footer,
.vocab-sidebar-footer {
  border-color: rgba(255, 255, 255, .18) !important;
}
.teacher-sidebar-logo,
.teacher-sidebar-brand,
.gradebook-brand,
.vocab-sidebar-brand,
.teacher-sidebar-logo strong,
.teacher-sidebar-brand strong,
.gradebook-brand strong,
.vocab-sidebar-brand strong {
  color: #fff !important;
}
.teacher-sidebar-logo > span,
.teacher-sidebar-brand > span,
.gradebook-brand > span,
.vocab-sidebar-brand > span {
  overflow: hidden;
  background: #fff !important;
  border: 2px solid rgba(255, 255, 255, .78);
}
.teacher-sidebar-nav a,
.teacher-sidebar-footer a,
.gradebook-sidebar-nav a,
.gradebook-sidebar-footer a,
.vocab-sidebar-nav a,
.vocab-sidebar-footer a {
  color: rgba(255, 255, 255, .86) !important;
}
.teacher-sidebar-nav a:hover,
.teacher-sidebar-footer a:hover,
.gradebook-sidebar-nav a:hover,
.gradebook-sidebar-footer a:hover,
.vocab-sidebar-nav a:hover,
.vocab-sidebar-footer a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .13) !important;
}
.teacher-sidebar-nav a.is-active,
.gradebook-sidebar-nav a.is-active,
.vocab-sidebar-nav a.is-active {
  color: #fff !important;
  background: #002a67 !important;
  box-shadow: inset 3px 0 0 var(--samio-yellow), 0 7px 18px rgba(120, 36, 51, .16) !important;
}
.teacher-sidebar-collapse,
.gradebook-sidebar-toggle,
.vocab-sidebar-toggle {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .34) !important;
  background: rgba(255, 255, 255, .1) !important;
}
.teacher-sidebar-collapse:hover,
.gradebook-sidebar-toggle:hover,
.vocab-sidebar-toggle:hover {
  color: #513900 !important;
  background: var(--samio-yellow) !important;
  border-color: var(--samio-yellow) !important;
}

/* Learning modules */
.listening-shell,
.reading-shell,
.speaking-shell,
.dictation-shell,
.writing-shell {
  --primary: var(--samio-blue);
  --primary-color: var(--samio-blue);
  --accent-color: var(--samio-pink);
}
.listening-header,
.reading-header,
.speaking-header,
.dictation-header,
.writing-header {
  border-color: var(--samio-border) !important;
}
.answer-option.is-selected,
.question-option.is-selected,
.resource-item.selected {
  background: var(--samio-blue-soft) !important;
  border-color: var(--samio-blue) !important;
}
.is-correct,
.result-correct { box-shadow: inset 4px 0 0 var(--samio-yellow); }

/* Friendly highlight surfaces */
.highlight,
.notice-info,
.callout-info {
  border-color: var(--samio-blue-bright) !important;
  background: var(--samio-blue-soft) !important;
}
.notice-accent,
.feature-badge {
  color: #9b4a56 !important;
  background: var(--samio-pink-soft) !important;
}

/* Main Samio writing workspace */
.menu,
.active-menu-mobile,
.menu ul li ul,
.user-dropdown-menu {
  background: rgba(255, 255, 255, .92) !important;
  border-color: var(--samio-border) !important;
  box-shadow: 0 10px 28px rgba(42, 174, 184, .1) !important;
  backdrop-filter: blur(12px);
}
.menu ul li a.menu-item-primary,
.menu ul li.menu-has-active > a,
.menu ul li a.active,
.menu ul li a:hover,
.menu ul li ul li a.active,
.menu ul li ul li:hover > a,
.menu ul li ul li.menu-dropdown-divider a {
  color: var(--samio-blue-deep) !important;
}
.menu ul li a.active,
.menu ul li a:hover,
.menu ul li.menu-has-active > a {
  border-bottom-color: var(--samio-pink) !important;
}
.menu ul li a.has-child:hover:after,
.menu ul li a.has-child.active:after,
.menu ul li.menu-has-active > a.has-child:after,
.menu ul li ul li:hover > a.has-child:after {
  border-color: var(--samio-pink) !important;
}
.user-head a span,
.user-dropdown-toggle {
  border-color: var(--samio-border) !important;
  color: var(--samio-blue-deep) !important;
  background: rgba(232, 251, 250, .76) !important;
}
.user-head a:hover span,
.user-dropdown-toggle:hover {
  color: #fff !important;
  background: var(--samio-blue) !important;
}
.wrap-task .wrap-content,
.wrap-pane .wrap-content {
  position: relative;
}
.task-container {
  color: var(--samio-ink) !important;
  background:
    linear-gradient(115deg, rgba(232, 251, 250, .95) 0%, rgba(255, 248, 232, .92) 56%, rgba(255, 240, 243, .9) 100%) !important;
  border: 1px solid var(--samio-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--samio-shadow) !important;
}
.task-left strong {
  color: var(--samio-blue-deep) !important;
}
.task-left p,
.task-field label,
.checkbox {
  color: var(--samio-muted) !important;
}
.dropdown-selected,
.task-field select {
  color: var(--samio-ink) !important;
  background: rgba(255, 255, 255, .92) !important;
  border-color: var(--samio-border) !important;
  box-shadow: 0 6px 18px rgba(42, 174, 184, .08);
}
.dropdown-selected:hover,
.dropdown.open .dropdown-selected {
  border-color: var(--samio-blue) !important;
}
.dropdown-list {
  border-color: var(--samio-border) !important;
  box-shadow: 0 14px 28px rgba(42, 174, 184, .14) !important;
}
.dropdown-list li:hover,
.dropdown-list li.active {
  color: #9b4a56 !important;
  background: var(--samio-pink-soft) !important;
}
input[type="checkbox"] {
  border-color: #9bcfca !important;
  background: #fff !important;
}
input[type="checkbox"]:checked {
  border-color: var(--samio-pink) !important;
  background: var(--samio-pink) !important;
}
.split-container {
  background: rgba(255, 255, 255, .84) !important;
  border-bottom-color: var(--samio-border) !important;
}
.split-resizer:after {
  background: linear-gradient(180deg, transparent, var(--samio-border), transparent) !important;
}
.split-resizer img {
  background: #fffaf8 !important;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(42, 174, 184, .12);
}
.input-area {
  color: var(--samio-ink) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfffe 100%) !important;
  border-color: var(--samio-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
}
.input-area:focus {
  border-color: var(--samio-blue) !important;
  box-shadow: 0 0 0 4px rgba(118, 218, 221, .26) !important;
}
.input-area::placeholder {
  color: #91aaab !important;
}
.count-pane,
.word-count {
  color: var(--samio-muted) !important;
}
.left-title,
.right-title {
  color: var(--samio-blue-deep) !important;
}
.left-upload-area,
.right-upload-area,
.upload-box {
  color: var(--samio-muted) !important;
  background: linear-gradient(180deg, var(--samio-blue-soft) 0%, #fffdf9 100%) !important;
  border-color: #9bdcda !important;
}
.left-upload-area p,
.right-upload-area p {
  color: var(--samio-muted) !important;
}
.left-upload-area:hover,
.right-upload-area:hover,
.upload-box:hover {
  border-color: var(--samio-pink) !important;
  background: linear-gradient(180deg, #fff8fb 0%, var(--samio-blue-soft) 100%) !important;
}
.box-sample a,
.submit-btn {
  color: #fff !important;
  background: var(--samio-blue) !important;
  box-shadow: 0 12px 24px rgba(238, 121, 136, .22) !important;
}
.box-sample a:hover,
.submit-btn:hover {
  filter: brightness(.97);
  transform: translateY(-1px);
}
.box-upgrade a {
  color: #5c4305 !important;
  background: var(--samio-yellow) !important;
  box-shadow: 0 8px 16px rgba(255, 215, 111, .28);
}
.box-upgrade a:hover {
  color: #fff !important;
  background: var(--samio-blue) !important;
}

/* Legacy module palette normalization */
.btn-info,
.badge-info,
.bg-info {
  color: #fff !important;
  background: var(--samio-blue) !important;
  border-color: var(--samio-blue) !important;
}
.btn-success,
.badge-success,
.bg-success {
  color: #fff !important;
  background: var(--samio-leaf) !important;
  border-color: var(--samio-leaf) !important;
}
.btn-danger,
.badge-danger,
.bg-danger {
  color: #fff !important;
  background: var(--samio-pink) !important;
  border-color: var(--samio-pink) !important;
}
.text-primary,
.text-info,
.link-primary {
  color: var(--samio-blue-deep) !important;
}
.text-success {
  color: #5f8f50 !important;
}
.text-danger {
  color: #b85c68 !important;
}
.text-warning {
  color: #9b6d12 !important;
}
.alert-info,
.notice-info,
.callout-info {
  color: var(--samio-blue-deep) !important;
  background: var(--samio-blue-soft) !important;
  border-color: #9bdcda !important;
}
.alert-success,
.notice-success {
  color: #4f7d42 !important;
  background: var(--samio-leaf-soft) !important;
  border-color: #bddfb3 !important;
}
.alert-warning,
.notice-warning {
  color: #7b590b !important;
  background: var(--samio-yellow-soft) !important;
  border-color: #ffe49a !important;
}
.alert-danger,
.notice-danger {
  color: #9b4a56 !important;
  background: var(--samio-pink-soft) !important;
  border-color: #ffc2ca !important;
}
.table th,
.table thead th {
  color: var(--samio-ink) !important;
  background: #e9f1fe !important;
  border-color: var(--samio-border) !important;
}
.table td,
.table tbody tr {
  border-color: var(--samio-border) !important;
}
.table tbody tr:hover {
  background: rgba(232, 251, 250, .55) !important;
}
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.dropdown-item.active,
.dropdown-item:active {
  color: #fff !important;
  background: var(--samio-blue) !important;
}

/* User menus and account surfaces */
.user-avatar-circle,
.user-avatar-circle-large {
  color: #fff !important;
  background: var(--samio-blue) !important;
}
.badge-free {
  color: var(--samio-muted) !important;
  background: #eef8f7 !important;
}
.badge-pro {
  color: #5c4305 !important;
  background: var(--samio-yellow) !important;
}
.user-dropdown-header,
.user-dropdown-item:hover {
  background: #e9f1fe !important;
}
.user-name,
.user-name-large,
.user-dropdown-item:hover,
.user-dropdown-item:hover i {
  color: var(--samio-ink) !important;
}
.user-email,
.user-dropdown-item,
.user-dropdown-item i {
  color: var(--samio-muted) !important;
}
.user-dropdown-divider {
  background: var(--samio-border) !important;
}

/* History/stat cards */
.stats-heading,
.stats-chart-title,
.score-panel__caption {
  color: var(--samio-ink) !important;
}
.stats-heading i,
.score-panel__caption i {
  color: var(--samio-pink) !important;
}
.stat-card,
.stats-chart-box {
  border-color: var(--samio-border) !important;
  box-shadow: var(--samio-shadow) !important;
}
.stat-listening { --stat-color: var(--samio-blue) !important; }
.stat-reading { --stat-color: var(--samio-leaf) !important; }
.stat-writing { --stat-color: var(--samio-pink) !important; }
.stat-speaking { --stat-color: #f2bd45 !important; }

/* Writing result/report screens */
.card-result-task,
.detail-tabs,
.box,
.correction-item,
.criterion-feedback {
  background: rgba(255, 255, 255, .92) !important;
  border-color: var(--samio-border) !important;
  box-shadow: var(--samio-shadow) !important;
}
.card-result-task.success-result-task,
.criterion-tips {
  background: linear-gradient(135deg, var(--samio-leaf-soft) 0%, #fff 100%) !important;
  border-color: #bddfb3 !important;
}
.criterion-tips,
.card-result-task.success-result-task {
  border-left-color: var(--samio-leaf) !important;
}
.score-result-task,
.criterion-header h3,
.section h4 {
  color: var(--samio-ink) !important;
}
.score-red-result-task,
.correction-original del,
.grammar-error-list .error-label {
  color: #9b4a56 !important;
}
.score-yellow-result-task,
.criterion-tips h4 i {
  color: #c28a1c !important;
}
.view-detail-hint,
.overall-comment h5 {
  color: var(--samio-blue-deep) !important;
}
.tab-btn.active,
.score-badge,
.progress-fill {
  color: #fff !important;
  background: var(--samio-blue) !important;
}
.tab-btn,
.icon-pen-result-task,
.icon-refresh-result-task {
  color: var(--samio-muted) !important;
  background: #e9f1fe !important;
}
.grammar-error-item {
  background: var(--samio-yellow-soft) !important;
  border-left-color: var(--samio-yellow) !important;
}
.correction-original del {
  background: var(--samio-pink-soft) !important;
}
.correction-fixed ins {
  color: #4f7d42 !important;
  background: var(--samio-leaf-soft) !important;
}
.overall-comment {
  background: var(--samio-blue-soft) !important;
}
.badge-new-result-task {
  background: var(--samio-pink) !important;
}
input:checked + .slider,
.slider.is-active {
  background: var(--samio-leaf) !important;
}

/* Test player shells */
.listening-test-mode,
.reading-test-mode,
.speaking-test-mode,
.course-learn-mode {
  --listening-primary: var(--samio-blue);
  --listening-primary-dark: var(--samio-blue-deep);
  --listening-header: var(--samio-blue);
  --listening-header-dark: var(--samio-blue-deep);
  --reading-primary: var(--samio-blue);
  --reading-primary-dark: var(--samio-blue-deep);
  --reading-header: var(--samio-blue);
  --reading-header-dark: var(--samio-blue-deep);
  --speaking-primary: var(--samio-pink);
}
.reading-header,
.listening-header,
.test-panel__header,
.b1-listening-header,
.b1-reading-header {
  background: var(--samio-blue) !important;
}
.reading-header__logo,
.listening-header__logo,
.speaking-header__logo {
  filter: none !important;
}
.answer-option.is-correct,
.question-option.is-correct,
.review-correct,
.result-correct {
  color: #4f7d42 !important;
  background: var(--samio-leaf-soft) !important;
  border-color: #bddfb3 !important;
}
.answer-option.is-wrong,
.question-option.is-wrong,
.review-wrong,
.result-wrong {
  color: #9b4a56 !important;
  background: var(--samio-pink-soft) !important;
  border-color: #ffc2ca !important;
}

@media (max-width: 767px) {
  .card,
  .modal-content,
  .content-card { border-radius: 12px; }
}


/* ================= TalentLMS theme layer 2026-07-22 =================
   Đồng bộ toàn site theo /classes: sidebar xanh #0046AB (hover #0054CD, active #002A67,
   badge #247DFF), nút chính màu chính, hover xanh nhạt #E9F1FE.
   Đặt CUỐI file này để thắng mọi rule brand phía trên. */

/* --- Sidebar giáo viên (mọi shell: classes/gradebook/vocab/detail/task-bank/exams/dashboard) --- */
.teacher-portal-sidebar,.gradebook-sidebar,.vocab-sidebar,.vocab-portal-sidebar,.teacher-hover-sidebar{background:#0046ab!important;color:#fff!important;border:0!important;box-shadow:none!important}
.teacher-sidebar-head,.gradebook-sidebar-head,.vocab-sidebar-head,.teacher-sidebar-footer,.gradebook-sidebar-footer,.vocab-sidebar-footer{border-color:rgba(255,255,255,.2)!important}
.teacher-sidebar-logo,.teacher-sidebar-brand,.gradebook-brand,.vocab-sidebar-brand,.teacher-sidebar-logo strong,.teacher-sidebar-brand strong,.gradebook-brand strong,.vocab-sidebar-brand strong{color:#fff!important}
.teacher-sidebar-logo>span,.teacher-sidebar-brand>span,.gradebook-brand>span,.vocab-sidebar-brand>span{background:#fff!important;border:0!important;color:#0046ab!important;box-shadow:none!important}
.teacher-sidebar-profile,.gradebook-profile,.vocab-sidebar-profile{background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.2)!important}
.teacher-sidebar-profile>span,.gradebook-profile>span,.vocab-sidebar-profile>span{background:#fff!important;color:#0046ab!important;box-shadow:none!important}
.teacher-sidebar-profile strong,.gradebook-profile strong,.vocab-sidebar-profile strong{color:#fff!important}
.teacher-sidebar-profile small,.gradebook-profile small,.vocab-sidebar-profile small{color:rgba(255,255,255,.75)!important}
.teacher-sidebar-class,.gradebook-current-class{background:rgba(255,255,255,.08)!important;border-left:3px solid #247dff!important}
.teacher-sidebar-class small,.gradebook-current-class small{color:rgba(255,255,255,.6)!important}
.teacher-sidebar-class strong,.gradebook-current-class strong{color:#fff!important}
.teacher-sidebar-class span,.gradebook-current-class span{color:#9cc3ff!important}
.teacher-sidebar-label{color:rgba(255,255,255,.6)!important}
.teacher-sidebar-nav a,.teacher-sidebar-footer a,.gradebook-nav a,.gradebook-sidebar-footer a,.vocab-sidebar-nav a,.vocab-sidebar-footer a{color:#fff!important;border-radius:10px!important;transition:background .15s ease!important}
.teacher-sidebar-nav a:hover,.teacher-sidebar-footer a:hover,.gradebook-nav a:hover,.gradebook-sidebar-footer a:hover,.vocab-sidebar-nav a:hover,.vocab-sidebar-footer a:hover{color:#fff!important;background:#0054cd!important}
.teacher-sidebar-nav a.is-active,.gradebook-nav a.is-active,.vocab-sidebar-nav a.is-active{color:#fff!important;background:#002a67!important;box-shadow:none!important}
.teacher-sidebar-nav a.is-active::before,.gradebook-nav a.is-active::before,.vocab-sidebar-nav a.is-active::before{display:none!important}
.teacher-sidebar-nav i,.teacher-sidebar-footer i,.gradebook-nav i,.gradebook-sidebar-footer i,.vocab-sidebar-nav i,.vocab-sidebar-footer i{background:transparent!important;color:#fff!important}
.teacher-sidebar-nav a.is-active i,.teacher-sidebar-nav a:hover i,.gradebook-nav a.is-active i,.gradebook-nav a:hover i{background:transparent!important;color:#fff!important}
.teacher-sidebar-count,.gradebook-nav b{background:#247dff!important;color:#fff!important;border-radius:999px!important}
.teacher-sidebar-collapse,.gradebook-sidebar-toggle,.vocab-sidebar-toggle{color:#fff!important;border:1px solid rgba(255,255,255,.35)!important;background:rgba(255,255,255,.12)!important}
.teacher-sidebar-collapse:hover,.gradebook-sidebar-toggle:hover,.vocab-sidebar-toggle:hover{color:#0046ab!important;background:#fff!important;border-color:#fff!important}
.teacher-footer-avatar{background:#fff!important;color:#0046ab!important}

/* --- Sidebar học viên (lớp phủ bổ sung; giá trị gốc trong file riêng cũng đã đổi xanh) --- */
.student-dashboard-sidebar,.lesson-student-sidebar{background:#0046ab!important}
.student-dashboard-menu a:hover,.lesson-student-menu a:hover{background:#0054cd!important;color:#fff!important}
.student-dashboard-menu a.is-active,.lesson-student-menu a.is-active{background:#002a67!important;color:#fff!important}
.student-dashboard-menu a b,.lesson-student-menu a b{background:#247dff!important;color:#fff!important}

/* --- Nút: màu chính #0046AB, hover #0054CD; nút phụ hover xanh nhạt --- */
.classroom-btn:not(.secondary):not(.danger){background:#0046ab!important;border-color:#0046ab!important;color:#fff!important}
.classroom-btn:not(.secondary):not(.danger):hover{background:#0054cd!important;border-color:#0054cd!important;color:#fff!important}
.classroom-btn.secondary:hover{background:#e9f1fe!important;border-color:#9ec3f0!important;color:#0046ab!important}
.btn-primary,.button-primary,button[type="submit"]:not(.btn-danger):not(.btn-warning){background:#0046ab!important;border-color:#0046ab!important;color:#fff!important}
.btn-primary:hover,.button-primary:hover,button[type="submit"]:not(.btn-danger):not(.btn-warning):hover{background:#0054cd!important;border-color:#0054cd!important}
.learning-button-primary{background:#0046ab!important;border-color:#0046ab!important;color:#fff!important}
.learning-button-primary:hover{background:#0054cd!important;border-color:#0054cd!important}
.lesson-primary-btn,.lesson-index-primary{background:#0046ab!important;box-shadow:none!important}
.lesson-primary-btn:hover,.lesson-index-primary:hover{background:#0054cd!important}


/* ================= TalentLMS layer v2 2026-07-22: topbar dùng chung + đồng bộ nội dung ================= */
.tlx-topbar{position:sticky;top:0;z-index:90;height:62px;display:flex;align-items:center;gap:12px;padding:0 16px;background:#fff;border-bottom:1px solid rgb(193,197,200);font-family:ui-sans-serif,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif}
.tlx-burger{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;cursor:pointer}
.tlx-burger:hover{background:#e9f1fe}
.tlx-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#232323}
.tlx-brand img{width:32px;height:32px;object-fit:contain;display:block}
.tlx-brand strong{font-size:1.15rem;font-weight:600;color:#232323;letter-spacing:-.01em}
.tlx-topbar-right{margin-left:auto;display:flex;align-items:center;gap:4px}
.tlx-user{display:flex;align-items:center;gap:9px;padding:5px 9px;border-radius:10px;text-decoration:none;color:#232323}
.tlx-user:hover{background:#e9f1fe;color:#232323}
.tlx-user-avatar{width:34px;height:34px;display:grid;place-items:center;overflow:hidden;border-radius:999px;background:#0046ab;color:#fff;font-weight:600;font-size:.8rem;flex:0 0 auto}
.tlx-user-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.tlx-user-meta{display:grid;line-height:1.25;text-align:left}
.tlx-user-meta strong{font-size:.8rem;color:#232323;font-weight:600}
.tlx-user-meta small{font-size:.68rem;color:#9ea5a9}
.tlx-logout{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;color:#5c6468;text-decoration:none;font-size:1rem}
.tlx-logout:hover{background:#e9f1fe;color:#0046ab}
@media(max-width:640px){.tlx-user-meta{display:none}.tlx-brand strong{font-size:1rem}.tlx-topbar{position:relative}}
/* Khi có topbar: sidebar bám dưới topbar, ẩn brand/hồ sơ/footer trong sidebar (đã dời lên topbar) */
body:has(.tlx-topbar) .teacher-sidebar-unified{--teacher-sidebar-sticky-top:74px}
body:has(.tlx-topbar) :is(.teacher-sidebar-head,.teacher-sidebar-profile,.teacher-sidebar-account,.teacher-sidebar-footer,.teacher-sidebar-brand,.gradebook-sidebar-head,.gradebook-profile,.gradebook-sidebar-footer,.vocab-sidebar-head,.vocab-sidebar-profile,.vocab-sidebar-footer,.vocab-sidebar-brand,.student-app-brand,.student-sidebar-foot,.lesson-student-brand,.lesson-student-foot,.learning-desktop-brand,.learning-desktop-sidebar-footer){display:none!important}
/* Đồng bộ shell + khối nội dung theo /classes: nền trắng, viền rgb(193,197,200), bo .3125rem, bỏ bóng */
.teacher-portal-shell,.gradebook-shell,.tdb-shell,.tex-shell{background:#fff!important}
.classroom-card,.teacher-chart-panel,.teacher-class-section,.gradebook-header,.gradebook-workspace,.gradebook-review-queue,.gradebook-metrics>div,.gradebook-toolbar,.gradebook-table-wrap,.learning-section,.teacher-metric-card,.teacher-portal-topbar{border-color:rgb(193,197,200)!important;border-radius:.3125rem!important;box-shadow:none!important}

/* Khi có topbar TalentLMS: ẩn header site cũ tránh 2 thanh */
body:has(.tlx-topbar) .w-menu,body:has(.tlx-topbar) .mm-page>.header,body:has(.tlx-topbar) header.header{display:none!important}

/* Trang tài khoản: nền trắng */
body:has(.student-profile-page){background:#fff!important}
.student-profile-page{background:#fff!important}

/* Topbar bám cố định mép trên viewport */
.tlx-topbar{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:120!important}
body:has(.tlx-topbar){padding-top:62px!important}