/* V1017 - Homepage shell bundle: gom CSS công khai quan trọng để giảm render-blocking requests. */
/* =====================================================
   VAN THE MMO - Style
   Mau nhan dien: cam (Van The MMO) + xanh duong
   ===================================================== */

:root {
  --brand-orange: #ff6b1a;
  --brand-orange-dark: #e85d10;
  --brand-blue:   #1f6feb;
  --brand-blue-dark: #155bca;
  --bg-soft:      #f5f6f8;
  --text-dark:    #1c1f2a;
  --text-muted:   #6c757d;
  --border-soft:  #e6e8ec;
  --card-shadow:  0 2px 12px rgba(15,23,42,.06);
  --card-shadow-hover: 0 6px 24px rgba(15,23,42,.1);
}

body {
  font-family: Roboto, sans-serif;
  background: var(--bg-soft);
  color: var(--text-dark);
  font-size: 15px;
}

/* ============ BRAND ============ */
.brand-orange { color: var(--brand-orange); }
.brand-blue   { color: var(--brand-blue); }

.btn-primary {
  --bs-btn-bg: var(--brand-blue);
  --bs-btn-border-color: var(--brand-blue);
  --bs-btn-hover-bg: var(--brand-blue-dark);
  --bs-btn-hover-border-color: var(--brand-blue-dark);
}
.btn-warning {
  --bs-btn-bg: var(--brand-orange);
  --bs-btn-border-color: var(--brand-orange);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--brand-orange-dark);
  --bs-btn-hover-border-color: var(--brand-orange-dark);
  --bs-btn-hover-color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-blue);
  --bs-btn-border-color: var(--brand-blue);
  --bs-btn-hover-bg: var(--brand-blue);
  --bs-btn-hover-border-color: var(--brand-blue);
}

a { text-decoration: none; }
a.text-light-50 { color: rgba(255,255,255,.7) !important; }
a.text-light-50:hover { color: #fff !important; }

/* ============ AVATAR ============ */
.avatar-circle {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-blue));
  color: #fff; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .9rem;
}

/* ============ HERO ============ */
.hero {
  background: linear-gradient(135deg, #fff 0%, #fff5ee 60%, #eaf2ff 100%);
  padding: 64px 0 48px;
  border-bottom: 1px solid var(--border-soft);
}
.hero h1 {
  font-size: 2.4rem; font-weight: 700; line-height: 1.25;
}
.hero .badge-hero {
  background: rgba(255,107,26,.12); color: var(--brand-orange);
  font-weight: 600; padding: 6px 14px; border-radius: 20px; font-size: .85rem;
}

/* ============ COURSE CARD ============ */
.course-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: all .2s;
  height: 100%;
  display: flex; flex-direction: column;
}
.course-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
}
.course-card .thumbnail {
  aspect-ratio: 16/9;
  background: #eef0f4 center/cover no-repeat;
  position: relative;
}
.course-card .category-tag {
  position: absolute; top: 10px; left: 10px;
  background: rgba(31,111,235,.92); color: #fff;
  padding: 4px 10px; border-radius: 12px;
  font-size: .72rem; font-weight: 600;
}
.course-card .free-badge {
  position: absolute; top: 10px; right: 10px;
  background: #16a34a; color: #fff;
  padding: 4px 10px; border-radius: 12px;
  font-size: .72rem; font-weight: 600;
}
.course-card .body {
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; flex: 1;
}
.course-card h5 {
  font-size: 1rem; font-weight: 600;
  line-height: 1.35; margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}
.course-card .meta {
  font-size: .82rem; color: var(--text-muted);
  margin-bottom: 10px;
}
.course-card .price {
  margin-top: auto;
  font-weight: 700; color: var(--brand-orange); font-size: 1.05rem;
}
.course-card .price-original {
  text-decoration: line-through; color: #aaa; font-weight: 400;
  font-size: .85rem; margin-left: 6px;
}

/* ============ STATS ============ */
.stat-box {
  background: #fff; border-radius: 12px;
  padding: 20px; text-align: center;
  box-shadow: var(--card-shadow);
}
.stat-box .number {
  font-size: 1.8rem; font-weight: 700; color: var(--brand-blue);
}
.stat-box .label {
  font-size: .85rem; color: var(--text-muted); margin-top: 4px;
}

/* ============ AUTH ============ */
.auth-card {
  background: #fff; border-radius: 14px;
  padding: 32px; box-shadow: var(--card-shadow);
  max-width: 440px; margin: 40px auto;
}
.auth-card h2 { font-weight: 700; margin-bottom: 6px; }

/* ============ LEARN LAYOUT ============ */
.learn-layout { display: grid; grid-template-columns: 1fr 340px; gap: 20px; }
@media (max-width: 991px) { .learn-layout { grid-template-columns: 1fr; } }

.video-wrap {
  background: #000; border-radius: 12px; overflow: hidden;
  aspect-ratio: 16/9; position: relative;
}
.video-wrap iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
/* Khoi cam click chuot phai, drag, select */
.video-wrap .no-click-overlay {
  position: absolute; top: 0; left: 0; right: 0; height: 44px;
  z-index: 2; cursor: default;
}

.lesson-list { background: #fff; border-radius: 12px; padding: 12px; box-shadow: var(--card-shadow); }
.lesson-list .section-title {
  padding: 8px 10px; font-weight: 600;
  background: #f3f5f8; border-radius: 8px; margin-bottom: 6px; font-size: .92rem;
}
.lesson-list a.lesson-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--text-dark); font-size: .9rem;
  transition: background .15s;
}
.lesson-list a.lesson-item:hover { background: #f3f5f8; }
.lesson-list a.lesson-item.active {
  background: rgba(31,111,235,.1); color: var(--brand-blue); font-weight: 600;
}
.lesson-list a.lesson-item.completed i.bi-check-circle-fill { color: #16a34a; }

/* ============ ADMIN ============ */
.admin-body { background: #f0f2f5; min-height: 100vh; }
.admin-sidebar {
  width: 240px; background: #1c1f2a; color: #fff;
  min-height: 100vh; position: fixed; top: 0; left: 0;
  padding: 16px 0;
}
.admin-sidebar .logo { padding: 8px 20px 20px; font-weight: 700; font-size: 1.1rem; }
.admin-sidebar a {
  display: block; padding: 10px 20px;
  color: rgba(255,255,255,.75); font-size: .92rem;
  border-left: 3px solid transparent;
}
.admin-sidebar a:hover, .admin-sidebar a.active {
  background: rgba(255,255,255,.05);
  color: #fff; border-left-color: var(--brand-orange);
}
.admin-main { margin-left: 240px; padding: 20px 28px; }
@media (max-width: 991px) {
  .admin-sidebar { width: 100%; min-height: auto; position: static; }
  .admin-main { margin-left: 0; padding: 16px; }
}
.admin-card {
  background: #fff; border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 20px; margin-bottom: 20px;
}
.admin-card .card-header-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.admin-card h5 { font-weight: 600; margin: 0; }

/* ============ TABLE ============ */
.table-clean { font-size: .92rem; }
.table-clean thead th {
  font-weight: 600; font-size: .85rem; text-transform: uppercase;
  color: var(--text-muted); border-bottom: 2px solid var(--border-soft);
  background: #fafbfc;
}
.table-clean td { vertical-align: middle; }

/* ============ STATUS BADGES ============ */
.badge-status {
  font-size: .72rem; padding: 4px 10px; border-radius: 12px; font-weight: 600;
}
.badge-status.draft     { background: #fef3c7; color: #92400e; }
.badge-status.published { background: #dcfce7; color: #166534; }
.badge-status.closed    { background: #fee2e2; color: #991b1b; }
.badge-status.hidden    { background: #f1f5f9; color: #475569; }
.badge-status.active    { background: #dcfce7; color: #166534; }
.badge-status.pending   { background: #fef3c7; color: #92400e; }
.badge-status.paid      { background: #dbeafe; color: #1e40af; }
.badge-status.granted   { background: #dcfce7; color: #166534; }
.badge-status.cancelled { background: #fee2e2; color: #991b1b; }
.badge-status.locked    { background: #fee2e2; color: #991b1b; }

/* ============ MISC ============ */
.section-title-main {
  font-size: 1.5rem; font-weight: 700; margin-bottom: 24px;
}
.progress-thin { height: 6px; }

.text-light-50 { color: rgba(255,255,255,.7) !important; }

.empty-state {
  text-align: center; padding: 60px 20px;
  color: var(--text-muted);
}
.empty-state i { font-size: 3rem; opacity: .4; }

/* Khong cho select text ben canh video */
.video-wrap, .video-wrap * { user-select: none; }

/* ============================================================
   BO SUNG CSS CHO CAC VIEW MOI
   ============================================================ */

/* ----- Course card mở rộng (cho courses/index, my_courses) ----- */
.course-card .course-thumb {
  aspect-ratio: 16/9;
  background: #eef0f4;
  position: relative;
  overflow: hidden;
}
.course-card .course-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.course-card .course-thumb-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ff6b1a22, #1f6feb22);
  color: var(--brand-orange);
  font-size: 3rem;
}
.course-card .course-badge {
  position: absolute; top: 10px; right: 10px;
  padding: 4px 10px; border-radius: 12px;
  font-size: .72rem; font-weight: 600;
}
.course-card .course-title {
  font-size: 1rem; font-weight: 600;
  line-height: 1.35; margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}
.course-card .course-title a:hover { color: var(--brand-orange) !important; }

/* ----- Hero section (về trang chính, about) ----- */
.hero-section {
  background: linear-gradient(135deg, #fff 0%, #fff5ee 60%, #eaf2ff 100%);
  border-bottom: 1px solid var(--border-soft);
}

/* ----- Main content wrapper ----- */
.main-content { min-height: 60vh; }

/* ----- Footer ----- */
footer { background: #1c1f2a; color: #fff; padding: 40px 0 20px; margin-top: 60px; }
footer a { color: rgba(255,255,255,.75); }
footer a:hover { color: #fff; }
footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px; margin-top: 30px; font-size: .85rem; color: rgba(255,255,255,.6); }

/* ----- Learn layout (nâng cấp) ----- */
.learn-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
  min-height: calc(100vh - 60px);
  background: #fff;
}
.learn-sidebar {
  background: #fff;
  border-right: 1px solid var(--border-soft);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  position: sticky;
  top: 60px;
}
.learn-content { background: #f5f6f8; }
.learn-sections { padding: 12px; }
.learn-section-block { margin-bottom: 14px; }
.learn-section-title {
  padding: 8px 10px; font-weight: 600;
  background: #f3f5f8; border-radius: 8px; margin-bottom: 6px;
  font-size: .92rem;
}
.learn-lesson-item {
  display: flex; align-items: center;
  padding: 8px 12px; border-radius: 8px;
  color: var(--text-dark); font-size: .9rem;
  transition: background .15s; text-decoration: none;
}
.learn-lesson-item:hover { background: #f3f5f8; color: var(--text-dark); }
.learn-lesson-item.active {
  background: rgba(255,107,26,.12);
  color: var(--brand-orange); font-weight: 600;
}
@media (max-width: 991px) {
  .learn-layout { grid-template-columns: 1fr; }
  .learn-sidebar { max-height: none; position: static; }
}

/* Video full-width trong learn-content */
.learn-content .video-wrap {
  border-radius: 0; aspect-ratio: 16/9;
  max-height: calc(100vh - 60px);
}

/* ----- ADMIN LAYOUT MOI ----- */
.admin-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
.admin-sidebar {
  /* Override cũ - giữ width 240, position relative trong grid */
  position: relative; width: auto; min-height: auto;
  padding: 0;
}
.admin-brand {
  padding: 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 1.1rem; font-weight: 700;
}
.admin-brand .small { font-size: .75rem; color: rgba(255,255,255,.5); font-weight: 400; margin-top: 4px; }

.admin-menu { list-style: none; padding: 12px 0; margin: 0; }
.admin-menu li a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; color: rgba(255,255,255,.75);
  font-size: .92rem; text-decoration: none;
  border-left: 3px solid transparent;
}
.admin-menu li a:hover, .admin-menu li a.active {
  background: rgba(255,255,255,.05);
  color: #fff; border-left-color: var(--brand-orange);
}
.admin-menu-divider {
  border-top: 1px solid rgba(255,255,255,.08);
  margin: 12px 0;
}

.admin-main {
  /* Override cũ - không margin-left vì đã trong grid */
  margin-left: 0; padding: 0;
  background: #f0f2f5;
  min-width: 0; /* ngăn grid blowout */
}
.admin-topbar {
  background: #fff; padding: 12px 20px;
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.admin-content { padding: 24px; }
.admin-content-padding { padding: 16px 24px 0; }

@media (max-width: 768px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar {
    position: fixed; top: 0; left: -240px; width: 240px;
    height: 100vh; z-index: 1050;
    transition: left .25s;
  }
  .admin-sidebar.show { left: 0; }
}

/* ----- Stat cards (admin dashboard) ----- */
.stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  border-left: 4px solid var(--brand-blue);
}
.stat-card .stat-icon {
  position: absolute; top: 16px; right: 16px;
  font-size: 2.4rem; opacity: .12;
}
.stat-card .stat-label {
  font-size: .82rem; color: var(--text-muted);
  text-transform: uppercase; font-weight: 600; letter-spacing: 0;
}
.stat-card .stat-value {
  font-size: 1.6rem; font-weight: 700; color: var(--text-dark);
  margin-top: 6px;
}
.stat-card.stat-orange { border-left-color: var(--brand-orange); }
.stat-card.stat-orange .stat-icon { color: var(--brand-orange); }
.stat-card.stat-blue { border-left-color: var(--brand-blue); }
.stat-card.stat-blue .stat-icon { color: var(--brand-blue); }
.stat-card.stat-green { border-left-color: #16a34a; }
.stat-card.stat-green .stat-icon { color: #16a34a; }
.stat-card.stat-dark { border-left-color: #1c1f2a; }
.stat-card.stat-dark .stat-icon { color: #1c1f2a; }

/* ----- Course description ----- */
.course-description {
  line-height: 1.7;
  color: var(--text-dark);
}

/* ==========================================================
   NAVBAR ENHANCEMENTS - bold, no-wrap, responsive shrink (PC)
   ========================================================== */
.main-navbar .navbar-brand {
  font-size: 1.25rem;
  font-weight: 800;
  white-space: nowrap;
}
.main-navbar .main-menu .nav-link {
  font-weight: 700;
  color: #1a1a1a !important;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.5rem 0.85rem;
  letter-spacing: 0;
  transition: color .15s;
}
.main-navbar .main-menu .nav-link:hover {
  color: var(--brand-blue) !important;
}
.nav-search { max-width: 260px; }
.nav-cta { font-weight: 700; padding: 6px 14px; white-space: nowrap; }

/* Desktop responsive: shrink labels gradually instead of wrapping */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .main-navbar .main-menu .nav-link {
    font-size: .78rem;
    padding: 0.5rem 0.55rem;
    letter-spacing: 0;
  }
  .main-navbar .navbar-brand { font-size: 1.05rem; }
  .nav-search { max-width: 160px; }
  .nav-search input { font-size: .8rem; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .main-navbar .main-menu .nav-link {
    font-size: .85rem;
    padding: 0.5rem 0.7rem;
  }
  .nav-search { max-width: 200px; }
}
@media (min-width: 1400px) {
  .main-navbar .main-menu .nav-link { font-size: .92rem; }
}

/* ==========================================================
   GLOBAL TYPOGRAPHY
   ========================================================== */
button,
input,
select,
textarea,
.btn,
.form-control,
.form-select {
  font-family: Roboto, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.section-title,
.settings-page-title,
.card-header h5,
.auth-card h2 {
  text-transform: uppercase;
}

/* v264 — Tên khóa học luôn giữ nguyên chữ hoa/thường đúng như admin đã nhập. */
.course-title-exact,
.course-title-exact * {
  text-transform: none !important;
  font-variant: normal !important;
}

/* ==========================================================
   ADMIN LIGHT LAYOUT
   ========================================================== */
.admin-body {
  font-family: Roboto, sans-serif;
  background: #eef3f8;
  color: #1f2937;
  min-height: 100vh;
}

.admin-top-nav {
  background: #fff;
  min-height: 76px;
  border-bottom: 1px solid #e5edf6;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
  z-index: 1020;
}

.admin-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 180px;
  font-size: 1.18rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-logo img {
  max-height: 42px;
  max-width: 180px;
  object-fit: contain;
}

.admin-main-menu {
  gap: 8px;
  align-items: center;
}

.admin-main-menu .nav-link {
  color: #475569;
  font-weight: 700;
  padding: 8px 13px;
  border-radius: 8px;
  white-space: nowrap;
}

.admin-main-menu .nav-link:hover {
  color: var(--brand-blue);
  background: #eef6ff;
}

.admin-main-menu .nav-link.active {
  color: #0f3c77;
  background: #dcebff;
}

.admin-main-menu .nav-link.disabled {
  color: #9aa8b8;
}

.admin-user-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: 150px;
}

.admin-icon-btn,
.admin-avatar-btn {
  border: 0;
  background: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-icon-btn {
  width: 38px;
  height: 38px;
  color: #334155;
  font-size: 1.35rem;
}

.admin-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid #fff;
  position: absolute;
  top: 7px;
  right: 8px;
}

.admin-avatar-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #eef2ff;
  color: #4f46e5;
  font-weight: 900;
}

.admin-shell {
  max-width: 1680px;
  margin: 0 auto;
  padding: 28px 32px 44px;
}

.admin-shell .admin-content {
  padding: 0;
}

.admin-flash-wrap {
  max-width: 1680px;
  margin: 16px auto 0;
  padding: 0 32px;
}

.admin-shell .card,
.admin-shell .stat-card {
  border-radius: 8px;
}

.admin-shell .table-light th {
  background: #dff0ff;
  color: #1f2937;
  font-weight: 700;
}

@media (max-width: 991.98px) {
  .admin-logo {
    min-width: auto;
  }
  .admin-main-menu {
    gap: 2px;
    padding-top: 12px;
  }
  .admin-user-actions {
    justify-content: flex-start;
    padding: 12px 0 4px;
  }
  .admin-shell,
  .admin-flash-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ==========================================================
   ADMIN V2 - giống bố cục mẫu Văn Thế MMO
   ========================================================== */
.admin-v2-body{background:#eef3f8;color:#0f2d52;font-family:Roboto,Arial,sans-serif;font-size:14px}.admin-v2-topbar{background:#fff;box-shadow:0 2px 12px rgba(15,23,42,.12);border-bottom:1px solid #e5edf7;z-index:1030}.admin-v2-nav-inner{max-width:1540px;margin:0 auto;min-height:72px;padding:0 28px;display:flex;align-items:center;gap:24px}.admin-v2-brand{display:flex;align-items:center;gap:5px;min-width:210px;font-size:20px;font-weight:900;white-space:nowrap}.admin-v2-brand img{max-height:43px;max-width:190px;object-fit:contain}.brand-mark{color:#1e74e8;font-size:28px;line-height:1}.admin-v2-menu-toggle{display:none;border:1px solid #d8e5f5;background:#fff;border-radius:10px;width:42px;height:38px;color:#17375f}.admin-v2-collapse{display:flex!important;align-items:center;justify-content:space-between;flex:1}.admin-v2-main-menu{display:flex;align-items:center;gap:10px;list-style:none;margin:0 auto;padding:0}.admin-v2-main-menu .nav-pill{display:inline-flex;align-items:center;gap:5px;padding:9px 13px;border-radius:8px;color:#50647f;font-weight:700;white-space:nowrap}.admin-v2-main-menu .nav-pill:hover,.admin-v2-main-menu .nav-pill.active{background:#dcebff;color:#10396b}.admin-v2-main-menu .disabled{color:#97a6ba;pointer-events:none}.admin-v2-actions{display:flex;align-items:center;gap:20px;min-width:120px;justify-content:flex-end}.admin-v2-icon-btn{border:0;background:transparent;color:#253c5c;font-size:22px}.admin-v2-avatar{border:0;width:42px;height:42px;border-radius:50%;background:#eef0ff;color:#4f46e5;font-weight:900;box-shadow:inset 0 0 0 4px #f7f7ff}.admin-v2-user-menu{width:260px;border:0;box-shadow:0 12px 34px rgba(15,23,42,.16);border-radius:8px;padding:0;overflow:hidden}.user-menu-head{padding:16px 18px;border-bottom:1px solid #edf2f7;display:flex;flex-direction:column;gap:4px}.user-menu-head strong{color:#334155}.user-menu-head span{font-size:12px;color:#2563eb;font-weight:800;text-transform:uppercase}.user-menu-profile{padding:14px 18px;display:flex;gap:12px;border-bottom:1px solid #edf2f7}.mini-avatar,.student-avatar-mini{width:42px;height:42px;border-radius:50%;background:#f0f4fa;color:#64748b;display:flex;align-items:center;justify-content:center;font-weight:800}.user-menu-profile div:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}.user-menu-profile strong{color:#334155}.user-menu-profile span{font-size:12px;color:#8a9ab0;overflow:hidden;text-overflow:ellipsis}.admin-v2-user-menu .dropdown-item{padding:11px 18px;color:#607087;font-weight:500}.admin-v2-user-menu .dropdown-item i{width:22px;color:#94a3b8}.admin-v2-shell{max-width:1510px;margin:0 auto;padding:34px 28px 54px}.admin-v2-content{padding:0}.admin-v2-flash-wrap{max-width:1510px;margin:18px auto 0;padding:0 28px}.admin-v2-report-layout{display:grid;grid-template-columns:190px 1fr;gap:18px;align-items:start}.admin-v2-side-card{background:#fff;border-radius:8px;padding:14px;box-shadow:0 1px 0 rgba(15,23,42,.03);position:sticky;top:96px}.side-link{display:flex;align-items:center;gap:9px;padding:12px 14px;border-radius:7px;color:#111827;font-weight:800}.side-link:hover,.side-link.active{background:#dcebff;color:#0f3767}.admin-breadcrumb{display:flex;align-items:center;gap:12px;color:#1f6feb;margin:6px 0 22px;font-weight:600}.admin-breadcrumb i{color:#64748b}.admin-v2-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}.admin-v2-stat-box{background:#fff;border-radius:8px;min-height:70px;padding:14px 18px;display:grid;grid-template-columns:48px 1fr;grid-template-rows:1fr auto;gap:0 14px;align-items:center}.stat-square{width:42px;height:42px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:24px;grid-row:1/3}.stat-blue{background:#dff1ff;color:#086ca8}.stat-teal{background:#d7fbf3;color:#0e9482}.stat-pink{background:#fee3ef;color:#c0266a}.stat-orange{background:#ffe9d2;color:#e86b12}.admin-v2-stat-box .stat-number{font-size:24px;font-weight:900;color:#0645c7;text-align:right;line-height:1}.admin-v2-stat-box .stat-number.money{font-size:22px}.admin-v2-stat-box .stat-label{text-align:right;font-size:11px;color:#41536e;font-weight:700}.admin-v2-chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.admin-v2-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.admin-v2-panel-card{background:#fff;border-radius:8px;padding:18px;box-shadow:0 1px 0 rgba(15,23,42,.03);min-width:0}.admin-v2-panel-card h3{font-size:18px;font-weight:800;text-align:center;text-transform:none;color:#19233c;margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid #cdd7e5}.chart-wrap{height:270px}.top-course-list{display:flex;flex-direction:column;gap:12px}.top-course-row{display:grid;grid-template-columns:25px 48px 1fr auto;gap:12px;align-items:center}.rank{font-weight:900;color:#6b7280;text-align:center}.rank-1{color:#f59e0b}.rank-2{color:#9ca3af}.rank-3{color:#f97316}.course-thumb-mini{width:48px;height:38px;border-radius:4px;overflow:hidden;background:#e8eef6;display:flex;align-items:center;justify-content:center;color:#94a3b8}.course-thumb-mini img{width:100%;height:100%;object-fit:cover}.course-info-mini{min-width:0}.course-info-mini strong{display:block;color:#111827;font-size:13px;line-height:1.35}.course-info-mini span{display:block;color:#8190a5;font-size:12px;margin-top:4px}.course-count-mini{font-size:12px;color:#64748b;white-space:nowrap}.course-count-mini strong{color:#111827}.empty-mini{text-align:center;color:#94a3b8;padding:25px 12px}.student-active-row{grid-template-columns:25px 42px 1fr auto}.admin-v2-page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:16px}.admin-v2-page-head.compact{margin-bottom:14px}.admin-v2-page-head h1{font-size:22px;color:#123761;font-weight:900;margin:0;letter-spacing:.02em}.admin-v2-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}.toolbar-search{height:36px;display:flex;background:#fff;border:1px solid #c7d6e8;border-radius:5px;overflow:hidden}.toolbar-search input{border:0;outline:0;width:190px;padding:0 12px;color:#475569}.toolbar-search.wide input{width:250px}.order-search input{width:360px}.toolbar-search button{border:0;background:#fff;color:#64748b;width:38px}.toolbar-filter-select select{height:36px;border:1px solid #c7d6e8;border-radius:5px;background:#fff;color:#334155;padding:0 12px;min-width:180px}.btn-filter,.btn-add,.btn-more{height:36px;border-radius:5px;border:1px solid #c7d6e8;background:#fff;color:#243b5a;font-weight:700;padding:0 14px;display:inline-flex;align-items:center;gap:7px}.btn-add{background:#2776f6;color:#fff;border-color:#2776f6}.btn-more{width:38px;justify-content:center;padding:0}.admin-v2-table-card{background:#fff;border-radius:4px;overflow:hidden;box-shadow:0 1px 0 rgba(15,23,42,.03)}.admin-v2-table{color:#26354d}.admin-v2-table thead th{background:#dff1ff!important;border:0;color:#111827;font-weight:900;padding:17px 18px;white-space:nowrap;text-transform:none}.admin-v2-table tbody td{border-color:#e8eef6;padding:14px 18px;vertical-align:middle}.course-main-cell{display:flex;align-items:center;gap:14px;min-width:430px}.course-thumb-table{width:96px;height:54px;border-radius:4px;overflow:hidden;background:#e8eef6;display:flex;align-items:center;justify-content:center;color:#94a3b8;flex:0 0 auto}.course-thumb-table img{width:100%;height:100%;object-fit:cover}.course-main-cell strong{display:block;color:#14223a;line-height:1.35}.course-main-cell span,.course-main-cell small{display:block;font-size:12px;color:#6f8198;margin-top:3px}.round-play{width:25px;height:25px;border:2px solid #00aaff;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#00aaff;font-size:13px}.small-counter{display:inline-flex;min-width:28px;height:28px;border:1px solid #cbd9ea;border-radius:6px;align-items:center;justify-content:center;color:#47617f;background:#fff}.fee-cell strong{display:block;font-size:16px;color:#050505}.fee-cell del{display:block;color:#8a9ab0;font-size:13px;margin-top:4px}.status-pill{display:inline-flex;padding:8px 14px;border-radius:6px;font-weight:700;white-space:nowrap}.status-pill.open{background:#bffbd0;color:#167a34}.status-pill.closed{background:#ffd1d6;color:#8f2330}.updated-cell strong{display:block;color:#53677f}.updated-cell span{display:block;color:#7e8fa5;font-size:13px;margin-top:3px}.dot-menu{border:0;background:transparent;color:#1f426b;font-size:20px}.contact-cell{font-size:13px;color:#334155}.contact-cell div+div{margin-top:4px}.contact-cell .ok{color:#1ad471;font-size:12px}.student-table tbody tr:nth-child(even){background:#f8fbff}.pager-fake{display:flex;align-items:center;justify-content:center;gap:7px;margin:16px 0 0}.pager-fake span,.pager-fake strong{min-width:30px;height:30px;border:1px solid #c9d7e8;border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;color:#315173}.pager-fake strong{background:#2e7bf6;color:#fff;border-color:#2e7bf6}.muted-product{color:#607086;max-width:330px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.order-code{color:#526984}.order-status{display:inline-block;padding:5px 10px;border-radius:12px;color:#fff;font-weight:800;font-size:12px}.order-status.new{background:#f59e0b}.order-status.deleted{background:#9ca3af}.order-table em{display:block;font-size:12px;color:#8a9ab0;margin-top:5px}.payment-cell strong{display:block;color:#030712;font-size:16px}.payment-cell span{display:block;font-size:12px;margin-top:5px}.payment-cell .paid{color:#00a651;font-weight:800}.payment-cell .unpaid{color:#6b7280}.invoice-mini{display:inline-flex;width:22px;height:22px;border:1px solid #c7d6e8;border-radius:5px;align-items:center;justify-content:center;color:#64748b;background:#f8fafc}.settings-page-title,.admin-settings-page h2,.admin-settings-page h1{color:#123761!important;font-weight:900!important}.settings-layout,.admin-settings-layout{background:#fff;border-radius:8px}.settings-sidebar,.admin-settings-sidebar{background:#fff;border-radius:8px}.admin-v2-body .settings-nav a,.admin-v2-body .settings-sidebar a{border-radius:7px;font-weight:800;color:#111827}.admin-v2-body .settings-nav a.active,.admin-v2-body .settings-sidebar a.active{background:#dcebff;color:#0f3767}.admin-v2-body .form-control,.admin-v2-body .form-select{border-color:#c7d6e8}.admin-v2-body .btn-primary{background:#2776f6;border-color:#2776f6;font-weight:800}

@media (max-width:1199.98px){.admin-v2-nav-inner{padding:0 16px;gap:12px}.admin-v2-brand{min-width:170px;font-size:17px}.admin-v2-main-menu{gap:4px}.admin-v2-main-menu .nav-pill{padding:8px 9px;font-size:13px}.admin-v2-shell{padding:24px 16px 44px}.admin-v2-stat-grid{grid-template-columns:repeat(2,1fr)}.admin-v2-report-layout{grid-template-columns:160px 1fr}.order-search input{width:230px}}@media (max-width:991.98px){.admin-v2-nav-inner{min-height:64px;flex-wrap:wrap}.admin-v2-menu-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto}.admin-v2-collapse{display:none!important;flex-basis:100%;width:100%;padding:8px 0 14px}.admin-v2-collapse.show{display:block!important}.admin-v2-main-menu{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}.admin-v2-main-menu .nav-pill{background:#f6f9fd;justify-content:center}.admin-v2-actions{justify-content:space-between;border-top:1px solid #edf2f7;padding-top:12px;width:100%}.admin-v2-report-layout{grid-template-columns:1fr}.admin-v2-side-card{position:static;display:flex;gap:8px;overflow-x:auto}.side-link{white-space:nowrap}.admin-v2-chart-grid,.admin-v2-bottom-grid{grid-template-columns:1fr}.admin-v2-page-head{align-items:flex-start;flex-direction:column}.admin-v2-toolbar{justify-content:flex-start;width:100%}.toolbar-search,.toolbar-search input,.toolbar-search.wide input,.order-search input,.toolbar-filter-select select{width:100%}.toolbar-search{flex:1;min-width:190px}.admin-v2-table-card{border-radius:8px}.admin-v2-table thead{display:none}.admin-v2-table tbody tr{display:block;border-bottom:10px solid #eef3f8;padding:10px 0;background:#fff!important}.admin-v2-table tbody td{display:flex;justify-content:space-between;gap:15px;padding:9px 14px;border:0}.admin-v2-table tbody td:before{content:attr(data-label);font-weight:800;color:#5d708a}.course-main-cell{min-width:0;align-items:flex-start}.course-main-cell:before{display:none}.course-thumb-table{width:86px;height:48px}.updated-cell,.fee-cell,.payment-cell{text-align:right}.top-course-row{grid-template-columns:24px 44px 1fr}.course-count-mini{grid-column:3}.student-active-row{grid-template-columns:24px 40px 1fr}.admin-v2-stat-box .stat-number{font-size:20px}.chart-wrap{height:235px}}@media (max-width:575.98px){.admin-v2-brand{font-size:15px;min-width:0}.admin-v2-brand img{max-width:150px}.admin-v2-stat-grid{grid-template-columns:1fr}.admin-v2-stat-box{min-height:66px}.admin-v2-shell{padding:18px 10px 36px}.admin-v2-panel-card{padding:14px}.admin-v2-page-head h1{font-size:19px}.btn-filter,.btn-add{flex:1;justify-content:center}.top-course-row{gap:9px}.course-info-mini strong{font-size:12px}.admin-v2-main-menu{grid-template-columns:1fr}.admin-v2-table tbody td{font-size:13px}.course-main-cell{gap:10px}.pager-fake{overflow-x:auto;justify-content:flex-start;padding-bottom:4px}}

/* V9 public course preview video */
.public-preview-btn{white-space:nowrap;font-weight:700;border-radius:8px;}
.public-video-preview-modal .modal-content{border:0;border-radius:14px;overflow:hidden;}
.public-video-preview-modal .modal-header{background:#f8fbff;border-bottom:1px solid #e2e8f0;}
@media (max-width:768px){.public-preview-btn{padding:4px 8px;font-size:12px}.list-group-item .d-flex.align-items-center.gap-2{flex-wrap:wrap;justify-content:flex-end}}

/* V20 auth */
.auth-code-input{letter-spacing:8px;font-weight:900;font-size:1.35rem}.auth-icon{width:58px;height:58px;margin:0 auto 12px;border-radius:18px;background:linear-gradient(135deg,#dbeafe,#fff7ed);display:flex;align-items:center;justify-content:center;font-size:28px;color:#2563eb}
@media(max-width:576px){.auth-card{margin:18px auto;padding:22px!important}.auth-card h2{font-size:24px}.auth-code-input{letter-spacing:5px}}

/* v65 - nut len dau trang web + mobile */
.vt-scroll-top-btn{
  position:fixed;
  right:22px;
  bottom:24px;
  width:48px;
  height:48px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#ff8a18 0%,#2f80ed 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  box-shadow:0 16px 34px rgba(24,72,140,.24);
  z-index:1090;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px) scale(.96);
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
}
.vt-scroll-top-btn.show{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.vt-scroll-top-btn:hover{filter:brightness(1.04);transform:translateY(-2px) scale(1.03)}
@media (max-width:575.98px){.vt-scroll-top-btn{right:14px;bottom:16px;width:44px;height:44px;font-size:20px}}

/* ===== v68: popup thong bao/xac nhan giua trang, khong dung alert native ===== */
.vt-dialog-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(15,23,42,.48);
  backdrop-filter:blur(3px);
}
.vt-dialog-overlay.show{display:flex;}
body.vt-dialog-open{overflow:hidden;}
.vt-dialog-card{
  position:relative;
  width:min(470px, calc(100vw - 32px));
  background:#fff;
  border-radius:24px;
  padding:30px 30px 24px;
  box-shadow:0 30px 90px rgba(15,23,42,.28);
  border:1px solid rgba(226,232,240,.9);
  text-align:center;
  animation:vtDialogIn .18s ease-out;
}
@keyframes vtDialogIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.vt-dialog-close{
  position:absolute;
  top:14px;
  right:14px;
  width:36px;
  height:36px;
  border:0;
  border-radius:999px;
  background:#f1f5f9;
  color:#64748b;
  display:flex;
  align-items:center;
  justify-content:center;
}
.vt-dialog-close:hover{background:#e2e8f0;color:#0f172a;}
.vt-dialog-icon{
  width:70px;
  height:70px;
  border-radius:22px;
  margin:0 auto 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#dbeafe,#eff6ff);
  color:#2563eb;
  font-size:34px;
  box-shadow:0 14px 32px rgba(37,99,235,.16);
}
.vt-dialog-card.is-warning .vt-dialog-icon{background:linear-gradient(135deg,#fff7ed,#ffedd5);color:#f97316;box-shadow:0 14px 32px rgba(249,115,22,.18);}
.vt-dialog-card.is-danger .vt-dialog-icon{background:linear-gradient(135deg,#fee2e2,#fff1f2);color:#ef4444;box-shadow:0 14px 32px rgba(239,68,68,.16);}
.vt-dialog-card.is-success .vt-dialog-icon{background:linear-gradient(135deg,#dcfce7,#ecfdf5);color:#16a34a;box-shadow:0 14px 32px rgba(22,163,74,.16);}
.vt-dialog-title{
  margin:0 0 10px;
  color:#0f2d55;
  font-size:24px;
  font-weight:900;
  letter-spacing:-.02em;
}
.vt-dialog-message{
  color:#334155;
  font-size:17px;
  line-height:1.55;
  white-space:pre-line;
  margin:0 auto 22px;
  max-width:390px;
}
.vt-dialog-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.vt-dialog-btn{
  min-width:120px;
  height:48px;
  border-radius:15px;
  border:0;
  padding:0 22px;
  font-size:16px;
  font-weight:800;
}
.vt-dialog-ok{
  background:linear-gradient(135deg,#2f80ed,#6aa7ff);
  color:#fff;
  box-shadow:0 12px 24px rgba(47,128,237,.22);
}
.vt-dialog-ok:hover{filter:brightness(.98);transform:translateY(-1px);}
.vt-dialog-cancel{background:#eef4ff;color:#1e3a5f;}
.vt-dialog-cancel:hover{background:#dbeafe;}
@media(max-width:576px){
  .vt-dialog-overlay{padding:16px;}
  .vt-dialog-card{padding:26px 20px 20px;border-radius:20px;}
  .vt-dialog-title{font-size:21px;}
  .vt-dialog-message{font-size:15px;}
  .vt-dialog-btn{height:45px;min-width:112px;}
}


/* v70: thông báo flash luôn nằm dưới màn hình, dễ nhìn và không che form */
.site-flash-wrap,
.admin-v2-flash-wrap{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:22px!important;
  top:auto!important;
  transform:translateX(-50%)!important;
  z-index:3000!important;
  width:min(760px, calc(100vw - 28px))!important;
  pointer-events:none;
}
.site-flash-wrap .alert,
.admin-v2-flash-wrap .alert{
  pointer-events:auto;
  margin:0 0 10px!important;
  border-radius:18px!important;
  box-shadow:0 18px 48px rgba(15,23,42,.18)!important;
  font-weight:700;
  padding:16px 46px 16px 18px!important;
}
@media (max-width: 640px){
  .site-flash-wrap,
  .admin-v2-flash-wrap{bottom:14px!important;width:calc(100vw - 20px)!important;}
  .site-flash-wrap .alert,
  .admin-v2-flash-wrap .alert{font-size:14px;padding:13px 42px 13px 14px!important;}
}

/* V110: nút giỏ hàng ở thanh trên cùng */
.nav-cart-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #dfe5ee;
  background: #fff;
  color: #1f3556;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  transition: .18s ease;
}
.nav-cart-btn:hover { color: #2563eb; border-color: #bfdbfe; background: #f3f7ff; }
.nav-cart-btn > i { font-size: 20px; }
.nav-cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  line-height: 19px;
  font-weight: 800;
  text-align: center;
  border: 2px solid #fff;
}
.nav-cart-count.is-empty { display: none; }
.cd47-cart-btn.added,
[data-cart-add].added { background: #eaf7ee!important; color: #16a34a!important; border-color: #bbf7d0!important; }

/* v122: icon ảnh tùy chỉnh từ Quản lý Trang chủ */
.homepage-custom-icon {
  width: 1.05em;
  height: 1.05em;
  max-width: 24px;
  max-height: 24px;
  object-fit: contain;
  display: inline-block;
  vertical-align: -0.14em;
  flex: 0 0 auto;
}
.nav-cart-btn .homepage-custom-icon { width: 21px; height: 21px; }
.nav-search .homepage-custom-icon { width: 16px; height: 16px; }
.nav-cta .homepage-custom-icon { width: 16px; height: 16px; margin-right: 3px; }
.vt-footer-social .homepage-custom-icon,
.contact-social-links .homepage-custom-icon { width: 18px; height: 18px; }
.contact-icon .homepage-custom-icon { width: 20px; height: 20px; }


/* ============================================================================
   v173 — Sắp xếp lại bảng học viên trên mobile cho gọn, không lộn xộn
   Áp dụng riêng /admin/students và /admin/courses/{id}/students.
   ============================================================================ */
@media (max-width:991.98px){
  .student-admin-layout{display:block!important;}
  .student-admin-main.card-like{padding:12px!important;border-radius:14px!important;}
  .student-head-row{gap:12px!important;}
  .student-head-row h1{width:100%;text-align:center;font-size:22px!important;line-height:1.2;}
  .student-toolbar{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important;width:100%;}
  .student-toolbar .toolbar-search{grid-column:1 / -1;height:44px!important;min-width:0!important;}
  .student-toolbar .toolbar-search input{height:44px!important;font-size:15px;}
  .student-toolbar .toolbar-search button{height:44px!important;}
  .student-toolbar .btn-filter,
  .student-toolbar .btn-add,
  .student-toolbar .bulk-delete-btn{width:100%;height:44px!important;justify-content:center;border-radius:8px!important;font-size:15px;}

  /* Danh sách học viên tổng */
  .student-table-card{background:transparent!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important;}
  .student-table-card .table-responsive{overflow:visible!important;}
  .student-table-card .student-table{border-collapse:separate!important;border-spacing:0 12px!important;margin:0!important;}
  .student-table-card .student-table tbody tr{
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr) 48px;
    gap:8px 12px;
    padding:14px!important;
    border:1px solid #e4edf8!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 8px 22px rgba(15,35,65,.06);
  }
  .student-table-card .student-table tbody td{
    display:block!important;
    padding:0!important;
    border:0!important;
    min-width:0!important;
    font-size:14px!important;
    line-height:1.35;
  }
  .student-table-card .student-table tbody td:before{display:none!important;content:none!important;}
  .student-table-card .student-table td.select-col{grid-column:1;grid-row:1;align-self:center;text-align:left!important;}
  .student-table-card .student-table td[data-col="avatar"]{grid-column:3;grid-row:1;justify-self:end;align-self:start;}
  .student-table-card .student-table td[data-label="Họ tên"]{grid-column:2;grid-row:1;align-self:center;}
  .student-table-card .student-table .student-name-link{font-weight:900;font-size:15px;color:#07111f;line-height:1.25;}
  .student-table-card .student-table td[data-col="contact"]{grid-column:1 / -1;grid-row:2;display:grid!important;grid-template-columns:1fr 120px;gap:7px 12px;color:#334155;}
  .student-table-card .student-table td[data-col="contact"] div{margin:0!important;word-break:break-word;}
  .student-table-card .student-table td[data-col="created"]{grid-column:1 / 3;grid-row:3;color:#5d708a;}
  .student-table-card .student-table td[data-col="created"]:before{display:inline!important;content:'Ngày tạo: '!important;font-weight:800;color:#5d708a;margin-right:6px;}
  .student-table-card .student-table td[data-col="last_login"]{grid-column:1 / 3;grid-row:4;color:#5d708a;}
  .student-table-card .student-table td[data-col="last_login"]:before{display:inline!important;content:'Đăng nhập cuối: '!important;font-weight:800;color:#5d708a;margin-right:6px;}
  .student-table-card .student-table td[data-col="status"]{grid-column:2 / 4;grid-row:3 / 5;justify-self:end;align-self:center;}
  .student-table-card .student-table td.action-col{grid-column:1 / -1;grid-row:5;text-align:left!important;justify-self:start;}
  .student-table-card .student-table .dot-menu{width:40px;height:40px;border-radius:10px;background:#f3f7fc;display:inline-flex;align-items:center;justify-content:center;}
  .student-footer-row{display:flex;flex-direction:column;gap:10px;align-items:stretch!important;}
  .student-footer-row .small{text-align:center;}
  .student-footer-row .pager-fake{justify-content:center!important;}

  /* Danh sách học viên trong khóa học */
  #csStudentTable{border-collapse:separate!important;border-spacing:0 12px!important;margin:0!important;}
  #csStudentTable tbody tr{
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr) auto;
    gap:8px 12px;
    padding:14px!important;
    border:1px solid #e4edf8!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 8px 22px rgba(15,35,65,.06);
  }
  #csStudentTable tbody td{
    display:block!important;
    padding:0!important;
    border:0!important;
    min-width:0!important;
    font-size:14px!important;
    line-height:1.35;
  }
  #csStudentTable tbody td:before{display:none!important;content:none!important;}
  #csStudentTable .cs-select-col{grid-column:1;grid-row:1;text-align:left!important;align-self:start;}
  #csStudentTable tbody td:nth-child(2){grid-column:2;grid-row:1 / span 2;align-self:start;}
  #csStudentTable tbody td:nth-child(2) strong{font-size:15px;color:#07111f;line-height:1.25;}
  #csStudentTable tbody td:nth-child(2) small{display:block;margin-top:5px;color:#62748d!important;word-break:break-word;}
  #csStudentTable tbody td:nth-child(3){grid-column:3;grid-row:1;justify-self:end;align-self:start;}
  #csStudentTable tbody td:nth-child(4){grid-column:2 / 4;grid-row:3;color:#5d708a;}
  #csStudentTable tbody td:nth-child(4):before{display:inline!important;content:'Tham gia: '!important;font-weight:800;margin-right:6px;color:#5d708a;}
  #csStudentTable tbody td:nth-child(5){grid-column:2 / 4;grid-row:4;color:#111827;font-weight:700;}
  #csStudentTable tbody td:nth-child(5):before{display:inline!important;content:'Thời hạn: '!important;font-weight:800;margin-right:6px;color:#5d708a;}
  #csStudentTable tbody td:nth-child(6){grid-column:1 / -1;grid-row:5;text-align:left!important;justify-self:start;}
  #csStudentTable .cs-dot-menu{width:40px;height:40px;border-radius:10px;background:#f3f7fc;display:inline-flex;align-items:center;justify-content:center;}
  .cs-student-footer{display:flex!important;flex-direction:column;gap:10px;align-items:stretch!important;}
  .cs-student-footer #csPagerInfo{text-align:center;}
  .cs-student-footer .cs-pager{justify-content:center!important;}
}
@media (max-width:575.98px){
  .student-toolbar{grid-template-columns:1fr 1fr;}
  .student-table-card .student-table tbody tr,
  #csStudentTable tbody tr{padding:12px!important;}
  .student-table-card .student-table td[data-col="contact"]{grid-template-columns:1fr;}
}

/* V470 - Nút liên hệ nổi góc trái và bảng liên hệ nhanh */
.vt-contact-widget{
  position:fixed;
  left:24px;
  bottom:24px;
  z-index:1090;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  font-family:Roboto,sans-serif;
}
.vt-contact-panel{
  position:relative;
  width:310px;
  padding:15px;
  border:1px solid #e1eaf4;
  border-radius:18px;
  background:#fff;
  box-shadow:0 16px 38px rgba(15,59,102,.22);
  transform-origin:left bottom;
  animation:vtContactPanelIn .18s ease-out;
}
.vt-contact-panel[hidden]{display:none!important;}
.vt-contact-panel::after{
  content:"";
  position:absolute;
  left:34px;
  bottom:-10px;
  width:20px;
  height:20px;
  background:#fff;
  border-right:1px solid #e1eaf4;
  border-bottom:1px solid #e1eaf4;
  transform:rotate(45deg);
}
.vt-contact-item{
  display:flex;
  align-items:center;
  gap:13px;
  min-height:62px;
  padding:7px 8px;
  border-radius:13px;
  color:#111827;
  text-decoration:none;
  transition:background-color .16s ease,transform .16s ease;
}
.vt-contact-item:hover{background:#f4f8fd;transform:translateX(2px);color:#111827;}
.vt-contact-item-icon{
  flex:0 0 48px;
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:#083b8f;
  font-size:23px;
  line-height:1;
}
.vt-contact-item-zalo .vt-contact-item-icon{background:#fff;overflow:hidden;}
.vt-contact-item-messenger .vt-contact-item-icon{background:linear-gradient(145deg,#287bff,#b02fff,#ff3f87);}
.vt-contact-item-email .vt-contact-item-icon{background:#083b8f;}
.vt-contact-zalo-mark{font-size:14px;font-weight:700;letter-spacing:-.4px;color:#0068ff;}
.vt-contact-item-copy{min-width:0;display:flex;flex-direction:column;gap:2px;}
.vt-contact-item-copy strong{font-size:16px;font-weight:700;line-height:1.25;color:#0b172a;}
.vt-contact-item-copy small{font-size:14px;font-weight:400;line-height:1.35;color:#5f6d7e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vt-contact-toggle{
  position:relative;
  width:72px;
  height:72px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#083b8f;
  box-shadow:0 11px 26px rgba(8,59,143,.34);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease;
}
.vt-contact-toggle:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(8,59,143,.4);}
.vt-contact-toggle:focus-visible{outline:3px solid rgba(38,123,255,.3);outline-offset:3px;}
.vt-contact-toggle-ring{
  position:relative;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.vt-contact-cycle,.vt-contact-close{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#083b8f;
  font-size:23px;
  line-height:1;
  opacity:0;
  transform:scale(.65) rotate(-12deg);
  transition:opacity .22s ease,transform .22s ease;
}
.vt-contact-cycle[data-contact-cycle="zalo"]{font-size:13px;font-weight:800;letter-spacing:-.5px;}
.vt-contact-cycle.is-active{opacity:1;transform:scale(1) rotate(0);}
.vt-contact-close{font-size:21px;}
.vt-contact-widget.is-open .vt-contact-cycle{opacity:0;transform:scale(.65) rotate(12deg);}
.vt-contact-widget.is-open .vt-contact-close{opacity:1;transform:scale(1) rotate(0);}
@keyframes vtContactPanelIn{
  from{opacity:0;transform:translateY(7px) scale(.97);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@media (max-width:767.98px){
  .vt-contact-widget{left:14px;bottom:16px;gap:10px;}
  .vt-contact-panel{width:min(300px,calc(100vw - 28px));padding:12px;border-radius:16px;}
  .vt-contact-panel::after{left:27px;}
  .vt-contact-item{min-height:56px;padding:5px 7px;gap:11px;}
  .vt-contact-item-icon{flex-basis:44px;width:44px;height:44px;font-size:21px;}
  .vt-contact-item-copy strong{font-size:15px;}
  .vt-contact-item-copy small{font-size:13px;}
  .vt-contact-toggle{width:62px;height:62px;}
  .vt-contact-toggle-ring{width:42px;height:42px;}
  .vt-contact-cycle,.vt-contact-close{font-size:21px;}
  .vt-contact-cycle[data-contact-cycle="zalo"]{font-size:12px;}
}
@media (prefers-reduced-motion:reduce){
  .vt-contact-panel,.vt-contact-item,.vt-contact-toggle,.vt-contact-cycle,.vt-contact-close{animation:none!important;transition:none!important;}
}


/* V471 - Desktop: nút liên hệ nổi nhỏ bằng nút lên đầu trang */
@media (min-width:768px){
  .vt-contact-widget{left:22px;bottom:24px;}
  .vt-contact-toggle{
    width:48px;
    height:48px;
    box-shadow:0 16px 34px rgba(24,72,140,.24);
  }
  .vt-contact-toggle-ring{
    width:32px;
    height:32px;
  }
  .vt-contact-cycle,.vt-contact-close{font-size:17px;}
  .vt-contact-cycle[data-contact-cycle="zalo"]{font-size:10px;}
}


/* V472 - Mobile: nút liên hệ nằm trên nút lên đầu trang, cùng kích thước */
@media (max-width:767.98px){
  .vt-contact-widget{
    left:auto;
    right:14px;
    bottom:70px;
    align-items:flex-end;
    gap:10px;
  }
  .vt-contact-toggle{
    width:44px;
    height:44px;
    flex:0 0 44px;
    box-shadow:0 16px 34px rgba(24,72,140,.24);
  }
  .vt-contact-toggle-ring{
    width:30px;
    height:30px;
  }
  .vt-contact-cycle,.vt-contact-close{
    font-size:17px;
  }
  .vt-contact-cycle[data-contact-cycle="zalo"]{
    font-size:9px;
  }
  .vt-contact-panel{
    width:min(300px,calc(100vw - 28px));
    transform-origin:right bottom;
  }
  .vt-contact-panel::after{
    left:auto;
    right:12px;
  }
}


/* V473 - Dùng đúng biểu tượng Zalo từ liên kết chính thức người dùng cung cấp */
.vt-contact-zalo-mark img,
.vt-contact-cycle[data-contact-cycle="zalo"] img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.vt-contact-zalo-mark{
  padding:0;
}
.vt-contact-cycle[data-contact-cycle="zalo"]{
  padding:3px;
}
@media (min-width:768px){
  .vt-contact-cycle[data-contact-cycle="zalo"]{padding:2px;}
}
@media (max-width:767.98px){
  .vt-contact-cycle[data-contact-cycle="zalo"]{padding:2px;}
}


/* V474 - Giữ icon Zalo ngoài theo kiểu cũ và thêm vòng sóng động */
.vt-contact-toggle{
  isolation:isolate;
  overflow:visible;
}
.vt-contact-toggle-ring{
  z-index:1;
}
.vt-contact-toggle::before,
.vt-contact-toggle::after{
  content:"";
  position:absolute;
  inset:-5px;
  border:2px solid rgba(8,59,143,.42);
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
  animation:vtContactPulseV474 2.2s ease-out infinite;
}
.vt-contact-toggle::after{
  animation-delay:1.1s;
}
.vt-contact-widget.is-open .vt-contact-toggle::before,
.vt-contact-widget.is-open .vt-contact-toggle::after{
  animation-play-state:paused;
  opacity:0;
}
.vt-contact-cycle[data-contact-cycle="zalo"]{
  padding:0!important;
  font-weight:800;
  letter-spacing:-.5px;
}
@keyframes vtContactPulseV474{
  0%{transform:scale(.88);opacity:.75;}
  70%{opacity:.18;}
  100%{transform:scale(1.42);opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .vt-contact-toggle::before,
  .vt-contact-toggle::after{animation:none!important;opacity:0!important;}
}

/* V768 - font chữ ô đăng nhập gọn và đồng bộ */
.auth-card input.form-control,
.auth-card .input-group-lg > .form-control,
.auth-card .form-control-lg {
  font-size: 16px !important;
  line-height: 1.45;
}
@media (max-width: 575.98px) {
  .auth-card input.form-control,
  .auth-card .input-group-lg > .form-control,
  .auth-card .form-control-lg {
    font-size: 15px !important;
  }
}


/* V938 - Mobile: AI / Zalo / Lên đầu trang cùng kích thước 44px, không có vòng sóng làm lệch thị giác. */
@media (max-width:767.98px){
  .vt-scroll-top-btn,
  .vt-contact-toggle{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;box-sizing:border-box!important;}
  .vt-contact-toggle::before,
  .vt-contact-toggle::after{display:none!important;animation:none!important;}
  .vt-contact-toggle-ring{width:34px!important;height:34px!important;}
  .vt-contact-widget{right:14px!important;bottom:70px!important;}
}


/* home-v2.css */
/* =====================================================
   HOMEPAGE - giong vanthemmo.com
   Font Roboto Vietnamese, mau cam chu dao
   ===================================================== */

/* ===== SECTION TITLES (dùng chung) ===== */
.vt-section-title {
  text-align: center;
  font-weight: 800;
  font-size: 1.85rem;
  color: #ff6b1a;
  margin-bottom: 40px;
  position: relative;
  padding-bottom: 14px;
}
.vt-section-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: #ff6b1a;
  border-radius: 2px;
}
.vt-section-title.text-start {
  color: #ff6b1a;
  font-size: 1.6rem;
}
.vt-section-title.text-start::after { left: 0; transform: none; }

/* ===== HERO: VAN THE LA AI ===== */
.vt-hero-about {
  padding: 50px 0;
  background: #fff;
}

.vt-coaching-card {
  background: linear-gradient(180deg, #f7f7f7 0%, #ecebe9 100%);
  border-radius: 24px;
  padding: 28px 26px;
  text-align: center;
  box-shadow: 0 6px 28px rgba(15, 23, 42, .08);
}
.vt-coaching-header {
  font-size: 1.6rem;
  font-weight: 900;
  color: #0a1f44;
  letter-spacing: 3px;
  margin-bottom: 22px;
}
.vt-coaching-avatar {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  margin: 0 auto 18px;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  background: #fff;
}
.vt-coaching-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.vt-coaching-name {
  font-size: 1.4rem;
  font-weight: 800;
  color: #0a1f44;
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.vt-coaching-tag {
  background: #1f6feb;
  color: #fff;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: .88rem;
  line-height: 1.5;
  margin: 0 0 20px;
}
.vt-coaching-btn {
  display: inline-block;
  background: #0a1f44;
  color: #fff;
  text-decoration: none;
  padding: 12px 26px;
  border-radius: 28px;
  font-weight: 700;
  font-size: .9rem;
  transition: all .15s;
}
.vt-coaching-btn:hover {
  background: #ff6b1a;
  color: #fff;
  transform: translateY(-2px);
}

.vt-about-text p {
  color: #1a1a1a;
  line-height: 1.75;
  margin-bottom: 14px;
  font-size: .95rem;
}
.vt-arrow-btn {
  display: inline-flex;
  margin-top: 10px;
  width: 44px; height: 44px;
  background: #ff6b1a;
  color: #fff;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  float: right;
  transition: all .15s;
}
.vt-arrow-btn:hover { background: #e85d10; transform: translateX(4px); color: #fff; }

/* ===== KHOA HOC CUA VAN THE ===== */
.vt-courses-section {
  padding: 60px 0;
  background: #fafbfc;
}

.vt-course-card {
  display: block;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .07);
  transition: all .2s;
  height: 100%;
}
.vt-course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .15);
  color: inherit;
}

.vt-course-thumb {
  position: relative;
  aspect-ratio: 5/3;
  overflow: hidden;
  background: #eef0f4;
}
.vt-course-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.vt-no-thumb {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: #94a3b8; font-size: 3rem;
}

.vt-discount-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: #ef4444;
  color: #fff;
  font-weight: 800;
  font-size: .82rem;
  padding: 4px 10px;
  border-radius: 6px;
  z-index: 2;
}

.vt-course-body {
  padding: 16px 18px 18px;
}
.vt-course-title {
  font-weight: 700;
  color: #1a1a1a;
  font-size: .98rem;
  line-height: 1.4;
  margin-bottom: 8px;
  min-height: 48px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vt-course-instructor {
  color: #ff6b1a;
  font-size: .85rem;
  font-weight: 500;
  margin-bottom: 6px;
}
.vt-course-rating {
  color: #fbbf24;
  font-size: .85rem;
  margin-bottom: 10px;
}
.vt-course-rating span {
  color: #94a3b8;
  font-size: .78rem;
  margin-left: 5px;
}
.vt-course-price .vt-price-main {
  color: #1f6feb;
  font-weight: 800;
  font-size: 1.1rem;
}
.vt-course-price .vt-price-old {
  color: #94a3b8;
  text-decoration: line-through;
  font-size: .9rem;
  margin-left: 8px;
}

.vt-cta-btn {
  display: inline-block;
  background: #ff6b1a;
  color: #fff;
  text-decoration: none;
  padding: 14px 36px;
  border-radius: 28px;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: 1px;
  transition: all .15s;
}
.vt-cta-btn:hover { background: #e85d10; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(255,107,26,.3); }

/* ===== CHIA SE HUU ICH ===== */
.vt-share-section {
  padding: 60px 0;
  background: #eef4f7;
}
.vt-video-card {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(15, 23, 42, .12);
  background: #000;
}
.vt-video-card iframe {
  width: 100%; height: 100%; border: 0;
}
.vt-video-title {
  margin-top: 12px;
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
  font-size: .92rem;
}

/* ===== TESTIMONIALS ===== */
.vt-testimonial-section {
  padding: 60px 0 80px;
  background: #fff;
}
.vt-testimonial-card {
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 14px;
  padding: 26px 22px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .04);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.vt-quote-icon {
  font-size: 1.8rem;
  color: #ff6b1a;
  line-height: 1;
  margin-bottom: 12px;
}
.vt-testimonial-text {
  color: #334155;
  line-height: 1.7;
  font-size: .92rem;
  flex: 1;
  margin-bottom: 18px;
}
.vt-testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid #eef0f4;
}
.vt-testimonial-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b1a, #1f6feb);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.vt-testimonial-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.vt-testimonial-info strong {
  display: block;
  color: #1a1a1a;
  font-size: .95rem;
}
.vt-testimonial-info small {
  color: #ff6b1a;
  font-size: .8rem;
}

/* ===== FOOTER DARK ===== */
.vt-footer {
  background: #0a1f44;
  color: #cbd5e1;
  padding: 50px 0 20px;
  margin-top: 0;
}
.vt-footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.vt-footer-brand img {
  width: 40px; height: 40px;
  border-radius: 8px;
}
.vt-footer-brand h5 {
  color: #fff;
  font-weight: 800;
  margin: 0;
  font-size: 1.1rem;
}
.vt-footer h6 {
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.vt-footer-text {
  color: #94a3b8;
  font-size: .88rem;
  line-height: 1.7;
  margin-bottom: 18px;
}
.vt-footer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: #cbd5e1;
  text-decoration: none;
  font-size: .9rem;
}
.vt-footer-item:hover { color: #ff6b1a; }
.vt-footer-item i {
  width: 28px; height: 28px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #cbd5e1;
  flex-shrink: 0;
}

.vt-footer-social {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.vt-footer-social a {
  width: 38px; height: 38px;
  background: #1f6feb;
  color: #fff;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: all .15s;
}
.vt-footer-social a:hover { background: #ff6b1a; transform: translateY(-2px); }
.vt-footer-social a.fb { background: #1877f2; }
.vt-footer-social a.yt { background: #ff0000; }
.vt-footer-social a.tt { background: #111827; }

.vt-footer-yt-card {
  background: linear-gradient(135deg, #1e3a8a, #1e1b4b);
  border-radius: 12px;
  padding: 14px;
  overflow: hidden;
}
.vt-footer-yt-card img {
  width: 100%;
  border-radius: 8px;
}

.vt-footer-copy {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.08);
  text-align: center;
  color: #64748b;
  font-size: .85rem;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .vt-section-title { font-size: 1.4rem; margin-bottom: 30px; }
  .vt-coaching-avatar { width: 160px; height: 160px; }
  .vt-coaching-header { font-size: 1.3rem; }
  .vt-coaching-name { font-size: 1.15rem; }
}

/* =====================================================
   V14 HOME FIX - khoi phuc giao dien trang chu giong mau anh
   ===================================================== */
body:not(.admin-body) {
  background: #eef3f6;
}
.main-content {
  background: #eef3f6;
}
.vt-hero-about,
.vt-courses-section,
.vt-share-section,
.vt-testimonial-section {
  background: #eef3f6;
}
.vt-hero-about {
  padding: 54px 0 34px;
}
.vt-hero-about .container,
.vt-courses-section .container,
.vt-share-section .container,
.vt-testimonial-section .container,
.vt-footer .container {
  max-width: 1180px;
}
.vt-coaching-card {
  max-width: 370px;
  margin: 0 auto;
  background: #072947;
  border-radius: 10px;
  padding: 16px 16px 22px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .18);
}
.vt-coaching-header {
  background: #f8fafc;
  border-radius: 8px 8px 0 0;
  padding: 18px 10px 8px;
  margin: 0;
  color: #0f3b6d;
  font-size: 1.55rem;
  letter-spacing: 1.5px;
}
.vt-coaching-avatar {
  width: 205px;
  height: 205px;
  margin: 10px auto 12px;
  border: 3px solid #1f2937;
  box-shadow: none;
}
.vt-coaching-name {
  background: #f8fafc;
  display: inline-block;
  padding: 7px 28px;
  border-radius: 999px;
  color: #0f3b6d;
  margin-bottom: 10px;
}
.vt-coaching-tag {
  border-radius: 3px;
  background: #0b5ec8;
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: 18px;
}
.vt-coaching-btn {
  background: #2878ea;
  border-radius: 6px;
  font-weight: 800;
  padding: 11px 22px;
}
.vt-about-text p {
  font-size: 1.03rem;
  line-height: 1.72;
  margin-bottom: 16px;
  text-align: justify;
}
.vt-section-title.text-start {
  font-size: 1.8rem;
  margin-bottom: 18px;
  padding-bottom: 0;
}
.vt-section-title.text-start::after {
  display: none;
}
.vt-courses-section {
  padding: 46px 0 28px;
}
.vt-section-title {
  margin-bottom: 34px;
}
.vt-course-card {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.vt-course-card:hover {
  box-shadow: none;
}
.vt-course-thumb {
  border-radius: 8px;
  aspect-ratio: 16 / 9;
  box-shadow: 0 2px 8px rgba(15,23,42,.10);
}
.vt-course-body {
  padding: 12px 0 8px;
}
.vt-course-title {
  min-height: 42px;
  font-size: .96rem;
  font-weight: 800;
  margin-bottom: 12px;
}
.vt-course-instructor {
  color: #51729b;
  font-size: .86rem;
}
.vt-course-price .vt-price-main {
  color: #1f6feb;
  font-size: 1.05rem;
}
.vt-share-section {
  padding: 32px 0 44px;
}
.vt-video-card {
  border-radius: 6px;
}
.vt-testimonial-section {
  padding: 34px 0 60px;
}
.vt-testimonial-card {
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(15,23,42,.06);
}
.vt-footer {
  background: #062946;
}

@media (max-width: 991.98px) {
  .vt-hero-about { padding: 28px 0; }
  .vt-hero-about .row { gap: 24px; }
  .vt-coaching-card { max-width: 330px; }
  .vt-about-text p { font-size: .96rem; text-align: left; }
  .vt-section-title.text-start { text-align: center !important; font-size: 1.45rem; }
  .vt-arrow-btn { float: none; margin: 12px auto 0; }
  .vt-courses-section, .vt-share-section, .vt-testimonial-section { padding: 34px 0; }
}
@media (max-width: 575.98px) {
  .vt-coaching-card { max-width: 100%; padding: 14px; }
  .vt-coaching-header { font-size: 1.25rem; }
  .vt-coaching-avatar { width: 165px; height: 165px; }
  .vt-coaching-tag { font-size: .9rem; }
  .vt-course-title { min-height: auto; }
}


/* V27: footer gon lai, bo card YouTube de khong chiem dien tich */
.vt-footer {
  padding: 30px 0 14px;
}
.vt-footer .container {
  max-width: 980px;
}
.vt-footer .row {
  align-items: flex-start;
}
.vt-footer-text {
  font-size: .84rem;
  line-height: 1.65;
  margin-bottom: 0;
}
.vt-footer h6 {
  margin-bottom: 12px;
}
.vt-footer-item {
  margin-bottom: 9px;
}
.vt-footer-social {
  margin-top: 10px;
}
.vt-footer-copy {
  margin-top: 20px;
  padding-top: 14px;
}
@media (max-width: 767.98px) {
  .vt-footer { padding: 24px 0 12px; }
}


/* ===== V62: card giới thiệu gọn, bỏ khung text và bỏ nút trong card ===== */
.vt-coaching-card .vt-coaching-tag {
  background: transparent !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 4px 8px 0 !important;
  margin: 0 auto !important;
  max-width: none !important;
  width: 100% !important;
  font-size: clamp(.78rem, 1.05vw, .9rem) !important;
  line-height: 1.45 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  letter-spacing: -.15px !important;
}
.vt-coaching-card {
  padding-bottom: 24px !important;
}
.vt-guide-empty {
  min-height: 360px;
  display: flex;
  align-items: flex-start;
  padding-top: 64px !important;
}


/* V80: footer brand icon always uses square favicon proportion */
.vt-footer-brand img{
  width:42px!important;
  height:42px!important;
  aspect-ratio:1/1!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:12px!important;
  background:#fff;
}


/* ============================================================================
   v154 — Mobile: nút VÀO HỌC luôn hiển thị ngay dưới khung Coaching
   - Chỉ áp dụng trên điện thoại.
   - Dùng cùng nội dung, icon và đường dẫn đã cấu hình trong Quản lý Trang chủ.
   ============================================================================ */
.vt-mobile-learn-btn{
  display:none;
}
@media (max-width:767.98px){
  .vt-mobile-learn-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    width:100%;
    max-width:100%;
    margin:14px auto 0;
    min-height:50px;
    padding:12px 20px;
    border:0;
    border-radius:10px;
    background:linear-gradient(135deg,#ff8a3d 0%,#ff6b1a 48%,#2f80ed 100%);
    color:#fff;
    font-size:1rem;
    font-weight:900;
    line-height:1.2;
    text-transform:uppercase;
    letter-spacing:.25px;
    text-decoration:none;
    box-shadow:0 10px 22px rgba(47,128,237,.16),0 8px 18px rgba(255,107,26,.2);
    -webkit-tap-highlight-color:transparent;
  }
  .vt-mobile-learn-btn i,
  .vt-mobile-learn-btn .homepage-icon-image{
    flex:0 0 auto;
  }
  .vt-mobile-learn-btn:hover,
  .vt-mobile-learn-btn:focus,
  .vt-mobile-learn-btn:active{
    color:#fff;
    text-decoration:none;
    filter:brightness(1.04);
  }
}

/* v264 */
.vt-course-title{ text-transform:none!important; font-variant:normal!important; }

/* v304: ribbon gon dung vao goc phai duoi anh khoa hoc */
.vt-course-thumb .vt-discount-badge{
  top:auto!important;
  left:auto!important;
  right:-29px!important;
  bottom:15px!important;
  width:105px!important;
  height:26px!important;
  min-width:0!important;
  padding:0 6px!important;
  border:0!important;
  border-radius:0!important;
  clip-path:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#fff!important;
  font-size:.68rem!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.3px!important;
  text-align:center!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  transform:rotate(45deg)!important;
  transform-origin:center!important;
  box-shadow:0 4px 10px rgba(15,23,42,.22)!important;
  z-index:5!important;
  pointer-events:none!important;
}
.vt-course-thumb .vt-discount-badge.is-discount{
  background:linear-gradient(90deg,#ff5a5f 0%,#ef4444 55%,#dc2626 100%)!important;
}
.vt-course-thumb .vt-discount-badge.is-free{
  background:linear-gradient(90deg,#22c55e 0%,#16a34a 58%,#0f8a3c 100%)!important;
}
@media(max-width:575.98px){
  .vt-course-thumb .vt-discount-badge{
    right:-25px!important;
    bottom:12px!important;
    width:92px!important;
    height:24px!important;
    padding:0 4px!important;
    font-size:.6rem!important;
  }
}

/* v305: ribbon cheo tu duoi len tren, bam dung goc phai duoi */
.vt-course-thumb{overflow:hidden!important;}
.vt-course-thumb .vt-discount-badge{
  top:auto!important;
  left:auto!important;
  right:-34px!important;
  bottom:18px!important;
  width:118px!important;
  height:30px!important;
  min-width:0!important;
  padding:0 8px!important;
  border:0!important;
  border-radius:0!important;
  clip-path:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:.72rem!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.35px!important;
  text-align:center!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  transform:rotate(-45deg)!important;
  transform-origin:center!important;
  box-shadow:0 5px 12px rgba(15,23,42,.22)!important;
  z-index:6!important;
  pointer-events:none!important;
}
.vt-course-thumb .vt-discount-badge.is-discount{
  color:#3b2a00!important;
  background:linear-gradient(90deg,#d7a927 0%,#f4cf59 48%,#e0b437 100%)!important;
}
.vt-course-thumb .vt-discount-badge.is-free{
  color:#ffffff!important;
  background:linear-gradient(90deg,#16a34a 0%,#22c55e 50%,#0f9f45 100%)!important;
}
@media(max-width:575.98px){
  .vt-course-thumb .vt-discount-badge{
    right:-31px!important;
    bottom:15px!important;
    width:106px!important;
    height:27px!important;
    padding:0 6px!important;
    font-size:.64rem!important;
  }
}

/* v307: nhan cheo gon sat goc phai duoi, khong che noi dung thumbnail */
.vt-course-thumb{position:relative!important;overflow:hidden!important;}
.vt-course-thumb .vt-discount-badge{
  top:auto!important;
  left:auto!important;
  right:-28px!important;
  bottom:9px!important;
  width:96px!important;
  height:24px!important;
  min-width:0!important;
  padding:0 4px!important;
  border:0!important;
  border-radius:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  transform:rotate(-45deg)!important;
  transform-origin:center!important;
  font-size:.64rem!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.25px!important;
  white-space:nowrap!important;
  text-transform:uppercase!important;
  box-shadow:0 3px 8px rgba(15,23,42,.18)!important;
  z-index:8!important;
  pointer-events:none!important;
}
.vt-course-thumb .vt-discount-badge.is-discount{
  color:#4a3500!important;
  background:linear-gradient(90deg,#c9971e 0%,#f4cf59 48%,#e0b437 100%)!important;
}
.vt-course-thumb .vt-discount-badge.is-free{
  color:#ffffff!important;
  background:linear-gradient(90deg,#159d3f 0%,#2bd45f 52%,#0d8c37 100%)!important;
}
@media(max-width:575.98px){
  .vt-course-thumb .vt-discount-badge{
    right:-25px!important;
    bottom:8px!important;
    width:86px!important;
    height:22px!important;
    font-size:.58rem!important;
    letter-spacing:.15px!important;
  }
}


/* ============================================================================
   v373 — Mobile homepage spacing + nút Xem thêm có chữ
   ============================================================================ */
.vt-arrow-btn-text{
  display:none;
}
.vt-arrow-btn-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

@media (max-width: 767.98px){
  /* Gỡ khoảng trống lớn do gutter dọc g-5 giữa khối Coaching và phần giới thiệu. */
  .vt-hero-about{
    padding:22px 0 24px;
  }
  .vt-hero-about .row.g-5{
    --bs-gutter-y:0;
    row-gap:0;
  }
  .vt-hero-about .row.g-5 > .col-lg-7{
    margin-top:20px;
  }
  .vt-section-title.text-start{
    margin-top:0;
    margin-bottom:14px;
  }

  /* Mobile: hiển thị nút Xem thêm dạng pill, canh giữa thay vì chỉ có icon tròn. */
  .vt-arrow-btn{
    display:flex;
    float:none;
    width:max-content;
    min-width:126px;
    height:42px;
    margin:10px auto 0;
    padding:0 18px;
    border-radius:999px;
    gap:8px;
    font-size:.92rem;
    font-weight:800;
    white-space:nowrap;
    box-shadow:0 8px 18px rgba(255,107,26,.18);
  }
  .vt-arrow-btn-text{
    display:inline;
  }
  .vt-arrow-btn:hover,
  .vt-arrow-btn:focus,
  .vt-arrow-btn:active{
    transform:none;
  }
}


/* v377 — Mobile trang chủ: tăng khoảng đệm phần đầu để tiêu đề khung không bị thanh header che khi lướt */
@media (max-width:767.98px){
  .vt-hero-about{
    padding-top:30px!important;
    scroll-margin-top:88px!important;
  }
  .vt-coaching-card{
    margin-top:4px!important;
  }
}


/* v378 — Nội dung trong khung Coaching tự xuống dòng và căn giữa, không tràn khỏi khung */
.vt-coaching-card,
.vt-coaching-card .vt-coaching-header,
.vt-coaching-card .vt-coaching-name,
.vt-coaching-card .vt-coaching-tag{
  text-align:center!important;
}
.vt-coaching-card .vt-coaching-header,
.vt-coaching-card .vt-coaching-name,
.vt-coaching-card .vt-coaching-tag{
  max-width:100%!important;
  box-sizing:border-box!important;
  white-space:normal!important;
  overflow:visible!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  hyphens:auto;
}
.vt-coaching-card .vt-coaching-tag{
  display:block!important;
  width:100%!important;
  padding-left:12px!important;
  padding-right:12px!important;
  line-height:1.45!important;
}
@media(max-width:575.98px){
  .vt-coaching-card .vt-coaching-tag{
    font-size:.88rem!important;
    line-height:1.5!important;
  }
}


/* ============================================================================
   v387 — Mobile: thu gọn khoảng cách dọc giữa tiêu đề, nút và các section
   ============================================================================ */
@media (max-width: 767.98px){
  /* Phần giới thiệu kết thúc gọn để nút Xem thêm không cách quá xa Khóa học. */
  .vt-hero-about{
    padding-top:22px!important;
    padding-bottom:12px!important;
  }
  .vt-hero-about .row.g-5 > .col-lg-7{
    margin-top:14px!important;
  }
  .vt-section-title.text-start{
    margin-bottom:10px!important;
    padding-bottom:8px!important;
    line-height:1.2!important;
  }
  .vt-about-text p{
    margin-bottom:10px!important;
  }
  .vt-arrow-btn{
    margin-top:6px!important;
    margin-bottom:0!important;
  }

  /* Các khu vực Khóa học, Chia sẻ, Học viên nói gì không cộng dồn khoảng trắng. */
  .vt-courses-section{
    padding:16px 0 18px!important;
  }
  .vt-share-section{
    padding:16px 0 20px!important;
  }
  .vt-testimonial-section{
    padding:16px 0 28px!important;
  }
  .vt-courses-section .vt-section-title,
  .vt-share-section .vt-section-title,
  .vt-testimonial-section .vt-section-title{
    margin-top:0!important;
    margin-bottom:20px!important;
    padding-bottom:10px!important;
    line-height:1.2!important;
  }
  .vt-courses-section .text-center.mt-5{
    margin-top:20px!important;
  }
  .vt-cta-btn{
    padding:12px 28px!important;
  }
  .vt-video-title{
    margin-top:8px!important;
  }
}

/* ===== V416: giữ footer giới thiệu luôn sát đáy trang ===== */
html {
  min-height: 100%;
}

body:not(.admin-body) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body:not(.admin-body) > .main-navbar,
body:not(.admin-body) > .site-flash-wrap {
  flex: 0 0 auto;
}

body:not(.admin-body) > .main-content {
  flex: 1 0 auto;
  width: 100%;
}

body:not(.admin-body) > .vt-footer {
  flex: 0 0 auto;
  width: 100%;
  margin-top: auto;
}

/* V1017 - Trang chủ nhẹ hơn: YouTube facade + giảm chi phí render phần dưới màn hình. */
.vt-lite-youtube-v1017{position:relative;background:#0b0b0b}
.vt-lite-youtube-button-v1017{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer;display:block}
.vt-lite-youtube-button-v1017 img{display:block;width:100%;height:100%;object-fit:cover}
.vt-lite-youtube-play-v1017{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:46px;border-radius:13px;display:grid;place-items:center;background:#ff0033;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.28);transition:transform .16s ease,background .16s ease}
.vt-lite-youtube-play-v1017 i{font-size:30px;line-height:1;margin-left:2px}
.vt-lite-youtube-button-v1017:hover .vt-lite-youtube-play-v1017,.vt-lite-youtube-button-v1017:focus-visible .vt-lite-youtube-play-v1017{transform:translate(-50%,-50%) scale(1.06);background:#e00028}
.vt-lite-youtube-v1017 iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:767.98px){.vt-lite-youtube-play-v1017{width:58px;height:42px;border-radius:11px}.vt-lite-youtube-play-v1017 i{font-size:27px}}
@supports(content-visibility:auto){
  .vt-courses-section,.vt-share-section,.vt-testimonial-section,.vt-footer{content-visibility:auto;contain-intrinsic-size:1px 900px}
}


/* mobile.css */
@media (max-width: 991.98px){
/* =====================================================
   MOBILE-ONLY STYLES
   Load via: <link media="(max-width: 991.98px)">
   ===================================================== */

/* Navbar mobile */
.main-navbar .navbar-brand { font-size: 1.05rem; }
.main-navbar .navbar-collapse {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid #eef0f4;
}
.main-navbar .main-menu .nav-link {
  font-size: .92rem !important;
  padding: 10px 0 !important;
  text-transform: uppercase;
  font-weight: 700;
  color: #1a1a1a !important;
  border-bottom: 1px solid #f3f4f6;
}
.main-navbar .main-menu .nav-link:last-child {
  border-bottom: none;
}
.nav-search {
  max-width: 100% !important;
  margin-top: 10px;
  margin-bottom: 10px;
}
.nav-cta {
  display: block !important;
  text-align: center;
  margin-bottom: 10px !important;
}

/* Container padding nho hon mobile */
.container, .container-fluid {
  padding-left: 12px;
  padding-right: 12px;
}

/* Hero section mobile */
.hero-section h1, .hero-section h2 { font-size: 1.5rem !important; }
.hero-section p { font-size: .92rem !important; }

/* Card su dung 1 cot */
.course-card-v2 .course-title-v2 { font-size: .92rem; min-height: auto; }
.course-card-v2 .course-body-v2 { padding: 12px; }

/* About stats - 2 cot mobile */
.about-stats-band .about-stat-number { font-size: 2.25rem; }
.about-stats-band .about-stat-label  { font-size: .82rem; }

/* Contact - 1 cot, form padding nho */
.contact-form-card { padding: 20px 16px; }

/* Profile sidebar - hien thi nhu menu doc dau trang */
.profile-sidebar {
  margin-bottom: 16px;
}

/* My courses - card stack vertical */
.mc-card {
  flex-direction: column !important;
  gap: 12px !important;
  padding: 12px !important;
}
.mc-thumb { flex: 0 0 auto !important; width: 100% !important; }
.mc-content { width: 100%; }
.mc-actions {
  flex-direction: row !important;
  min-width: 0 !important;
  width: 100%;
}
.mc-btn { flex: 1; }
.mc-meta { font-size: .75rem; gap: 8px; }

/* Form input lon hon mobile */
.form-control, .form-select { font-size: 16px; } /* prevent iOS zoom */

/* Buttons full-width mobile */
.btn-block-mobile { width: 100%; }

/* Footer - stack columns */
.footer-mobile-stack > * { margin-bottom: 16px; }

/* Tables - scroll horizontal */
.table-responsive-mobile {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================================
   v207 — Khách chưa đăng nhập: tìm kiếm + Đăng nhập/Đăng ký luôn hiện trên mobile
   - Luôn nằm ngay dưới hàng logo/giỏ/menu và phía trên nội dung trang (Coaching).
   - Ẩn bản sao nằm trong menu xổ xuống để không hiển thị trùng.
   ============================================================================ */
@media (max-width: 991.98px){
  .main-navbar .container{
    align-items:center;
  }
  .mobile-guest-tools{
    order:3;
    width:100%;
    flex:0 0 100%;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    padding:10px 0 2px;
    border-top:1px solid #edf2f7;
  }
  .mobile-guest-search{
    min-width:0;
    height:42px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 48px;
    border:1px solid #bdd4fb;
    border-radius:13px;
    overflow:hidden;
    background:linear-gradient(135deg,#f4f9ff 0%,#fff8f2 100%);
    box-shadow:0 5px 16px rgba(37,99,235,.08);
  }
  .mobile-guest-search input{
    width:100%;
    min-width:0;
    height:40px;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    background:transparent!important;
    padding:0 13px;
    font-size:16px;
    color:#183b68;
  }
  .mobile-guest-search button{
    width:48px;
    height:42px;
    border:0;
    border-left:1px solid rgba(37,99,235,.14);
    background:linear-gradient(135deg,#eaf4ff 0%,#fff0e5 100%);
    color:#1455aa;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:1.15rem;
  }
  .mobile-guest-auth{
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
  }
  .mobile-guest-login,
  .mobile-guest-register{
    height:42px;
    padding:0 14px;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-weight:800;
    font-size:.9rem;
  }
  .mobile-guest-login{
    color:#1455aa;
    border:1px solid #9dc0f7;
    background:linear-gradient(135deg,#f5f9ff 0%,#fff 100%);
  }
  .mobile-guest-register{
    color:#a6480d;
    border:1px solid #ffc18f;
    background:linear-gradient(135deg,#fff7ef 0%,#ffe9d8 100%);
  }
  .guest-collapse-search,
  .guest-collapse-auth{
    display:none!important;
  }
  .main-navbar .navbar-collapse{
    order:4;
    flex-basis:100%;
  }
}

@media (max-width: 575.98px){
  .mobile-guest-tools{
    grid-template-columns:1fr;
    gap:8px;
    padding-top:9px;
  }
  .mobile-guest-auth{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
  }
  .mobile-guest-login,
  .mobile-guest-register{
    width:100%;
  }
}

/* v209 — chặn tuyệt đối bản đăng nhập/đăng ký trùng trong menu mobile */
@media (max-width:991.98px){
  #mainNav .guest-collapse-search,
  #mainNav .guest-collapse-auth,
  #mainNav .nav-login-btn,
  #mainNav .nav-register-btn{
    display:none!important;
  }
}


/* ============================================================================
   v221 — Mobile khách chưa đăng nhập
   - Không hiện sẵn thanh tìm kiếm.
   - Icon tìm kiếm nằm cạnh icon giỏ hàng; bấm mới mở ô tìm kiếm.
   - Giữ cụm Đăng nhập / Đăng ký phía trên nội dung.
   ============================================================================ */
@media (max-width: 991.98px){
  .nav-mobile-search-btn{
    width:42px;
    height:42px;
    padding:0;
    border:1px solid #bfd5f5;
    border-radius:50%;
    color:#174ea6;
    background:linear-gradient(135deg,#e9f2ff 0%,#dbeafe 58%,#ffe9d8 100%);
    box-shadow:0 5px 14px rgba(37,99,235,.10),0 4px 12px rgba(255,122,26,.07);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:1.1rem;
    flex:0 0 42px;
  }
  .nav-mobile-search-btn:hover,
  .nav-mobile-search-btn:focus{
    color:#0f4ea5;
    filter:brightness(1.02);
    box-shadow:0 0 0 3px rgba(37,99,235,.10),0 5px 14px rgba(37,99,235,.10);
  }
  .mobile-guest-search-panel{
    order:3;
    width:100%;
    flex:0 0 100%;
    padding:9px 0 0;
  }
  .mobile-guest-search-panel .mobile-guest-search{
    width:100%;
    margin:0;
  }
  .mobile-guest-tools{
    order:4;
    width:100%;
    flex:0 0 100%;
    display:block!important;
    padding:9px 0 2px;
    border-top:0;
  }
  .mobile-guest-auth{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    width:100%;
  }
  .mobile-guest-login,
  .mobile-guest-register{
    width:100%;
  }
  .main-navbar .navbar-collapse{
    order:5;
  }
}

}

/* navbar-fix.css */
/* =====================================================
   NAVBAR FIX: Topbar UPPERCASE + Public dropdown đẹp
   Áp dụng cho cả Web + Mobile, Public + Admin
   ===================================================== */

/* ============ ADMIN TOPBAR: CHỮ HOA, ĐEN ĐẬM ============ */
.admin-v2-main-menu .nav-pill {
  text-transform: uppercase !important;
  color: #1a1a1a !important;
  font-weight: 800 !important;
  letter-spacing: .3px;
}
.admin-v2-main-menu .nav-pill:hover,
.admin-v2-main-menu .nav-pill.active {
  background: #dcebff !important;
  color: #0a3a78 !important;
}

/* Admin user dropdown: tăng cường chữ đen đậm */
.admin-v2-user-menu .user-menu-head strong { color: #0a1a2e !important; font-weight: 800 !important; }
.admin-v2-user-menu .user-menu-head span { color: #1f6feb !important; font-weight: 800 !important; }
.admin-v2-user-menu .user-menu-profile strong { color: #0a1a2e !important; font-weight: 700 !important; }
.admin-v2-user-menu .user-menu-profile span { color: #475569 !important; }
.admin-v2-user-menu .dropdown-item {
  color: #1a1a1a !important;
  font-weight: 600 !important;
}
.admin-v2-user-menu .dropdown-item i { color: #1a1a1a !important; }
.admin-v2-user-menu .dropdown-item.text-danger,
.admin-v2-user-menu .dropdown-item.text-danger i { color: #dc2626 !important; }

/* ============ PUBLIC NAVBAR: CHỮ HOA, ĐEN ĐẬM ============ */
.main-navbar .main-menu .nav-link {
  text-transform: uppercase !important;
  color: #1a1a1a !important;
  font-weight: 800 !important;
  letter-spacing: .3px;
  padding: 10px 14px !important;
  border-radius: 8px;
  transition: all .15s;
}
.main-navbar .main-menu .nav-link:hover,
.main-navbar .main-menu .nav-link.active {
  background: #dcebff !important;
  color: #0a3a78 !important;
}

/* ============ PUBLIC USER DROPDOWN (giống admin) ============ */
.public-user-dropdown { position: relative; }

.public-avatar-btn {
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  color: #1a1a1a;
  transition: background .15s;
}
.public-avatar-btn:hover { background: #f1f5f9; }
.public-avatar-btn::after { display: none; }

.public-avatar-circle {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b1a, #1f6feb);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .98rem;
  flex-shrink: 0;
}
.public-avatar-name { color: #1a1a1a; font-weight: 700; font-size: .95rem; }
.public-avatar-btn i.bi-caret-down-fill { color: #64748b; font-size: .7rem; }

/* Dropdown menu chính */
.public-user-menu {
  width: 280px;
  border: 0;
  box-shadow: 0 12px 34px rgba(15,23,42,.16);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  margin-top: 8px;
}

.pu-menu-head {
  padding: 16px 18px;
  border-bottom: 1px solid #edf2f7;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pu-menu-head strong {
  color: #0a1a2e;
  font-weight: 800;
  font-size: 1rem;
}
.pu-menu-head span {
  font-size: .72rem;
  color: #1f6feb;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pu-menu-profile {
  padding: 14px 18px;
  display: flex;
  gap: 12px;
  border-bottom: 1px solid #edf2f7;
  align-items: center;
}
.pu-mini-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #f0f4fa;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
}
.pu-mini-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.pu-mini-info strong {
  color: #0a1a2e;
  font-weight: 700;
  font-size: .92rem;
}
.pu-mini-info span {
  font-size: .78rem;
  color: #475569;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-user-menu .dropdown-item {
  padding: 11px 18px;
  color: #1a1a1a !important;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .92rem;
}
.public-user-menu .dropdown-item i {
  width: 22px;
  color: #1a1a1a;
  font-size: 1.05rem;
}
.public-user-menu .dropdown-item:hover {
  background: #f5f7fa;
  color: #0a3a78 !important;
}

/* Link Quản Lý / Trung tâm quản lý: xanh dương đậm */
.public-user-menu .pu-admin-link {
  color: #1f6feb !important;
  font-weight: 800 !important;
}
.public-user-menu .pu-admin-link i {
  color: #1f6feb !important;
}
.public-user-menu .pu-admin-link:hover {
  background: #dcebff !important;
  color: #0a3a78 !important;
}

.public-user-menu .dropdown-item.text-danger {
  color: #dc2626 !important;
  font-weight: 700;
}
.public-user-menu .dropdown-item.text-danger i { color: #dc2626 !important; }

.public-user-menu .dropdown-divider {
  margin: 6px 0;
  border-color: #edf2f7;
}

/* ============ MOBILE RESPONSIVE ============ */
@media (max-width: 991.98px) {
  .main-navbar .main-menu .nav-link {
    padding: 12px 14px !important;
    font-size: .92rem;
  }
  .public-avatar-name { display: none !important; }
  .public-user-menu {
    width: 260px;
    margin-right: 8px;
  }
  .admin-v2-main-menu .nav-pill {
    font-size: 12px !important;
    padding: 7px 8px !important;
  }
}

@media (max-width: 575.98px) {
  .public-user-menu {
    width: calc(100vw - 24px);
    max-width: 320px;
  }
  .main-navbar .main-menu .nav-link { font-size: .88rem; }
}


/* v46: đồng bộ avatar đã upload lên menu user */
.public-avatar-circle img,.pu-mini-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* v48: khóa kích thước avatar menu user */
.public-avatar-circle{width:38px!important;height:38px!important;max-width:38px!important;max-height:38px!important;min-width:38px!important;min-height:38px!important;overflow:hidden!important;border-radius:50%!important;flex:0 0 38px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;}
.public-avatar-circle img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:cover!important;border-radius:50%!important;display:block!important;}
.pu-mini-avatar{width:42px!important;height:42px!important;max-width:42px!important;max-height:42px!important;min-width:42px!important;min-height:42px!important;overflow:hidden!important;border-radius:50%!important;flex:0 0 42px!important;}
.pu-mini-avatar img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:cover!important;border-radius:50%!important;display:block!important;}


/* ===== V62: nút VÀO HỌC màu loang nhạt ===== */
.main-navbar .nav-cta,
.main-navbar .btn.nav-cta {
  background: linear-gradient(135deg, #ff8a3d 0%, #ff6b1a 45%, #2f80ed 100%) !important;
  border: 0 !important;
  color: #fff !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .2px !important;
  border-radius: 8px !important;
  padding: 7px 14px !important;
  box-shadow: 0 7px 16px rgba(47,128,237,.14), 0 6px 14px rgba(255,107,26,.16) !important;
}
.main-navbar .nav-cta:hover,
.main-navbar .btn.nav-cta:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  color: #fff !important;
}


/* ============================================================================
   v156 — Mobile: avatar người dùng nằm cạnh giỏ hàng, bỏ nút VÀO HỌC trong menu
   ============================================================================ */
@media (max-width:991.98px){
  .main-navbar .navbar-collapse .nav-cta{display:none!important;}
  .public-user-dropdown-mobile{display:block!important;position:relative;}
  .nav-learn-mobile{
    width:42px;
    height:42px;
    min-width:42px;
    border-radius:50%;
    border:1px solid #bfd5f5;
    background:linear-gradient(135deg,#ffffff 0%,#edf5ff 65%,#fff2e6 100%);
    color:#174ea6;
    box-shadow:0 5px 14px rgba(37,99,235,.08),0 4px 10px rgba(255,122,26,.06);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    flex:0 0 42px;
    padding:0;
  }
  .nav-learn-mobile:hover,
  .nav-learn-mobile:focus{
    color:#0f3f8f;
    background:linear-gradient(135deg,#eef6ff 0%,#e2efff 65%,#ffe9d7 100%);
    border-color:#8bb8f3;
  }
  .nav-learn-mobile-text{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    line-height:1.02;
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.1px;
  }
  .nav-learn-mobile-text span{display:block;}
  .public-user-dropdown-mobile .public-avatar-btn{
    width:40px;height:40px;padding:1px;border:1px solid #dfe5ee;background:#fff;
    border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  }
  .public-user-dropdown-mobile .public-avatar-btn:hover,
  .public-user-dropdown-mobile .public-avatar-btn:focus{
    background:#f3f7ff;border-color:#bfdbfe;box-shadow:0 0 0 3px rgba(37,99,235,.10);
  }
  .public-user-dropdown-mobile .public-avatar-circle{
    width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;
    max-width:34px!important;max-height:34px!important;flex:0 0 34px!important;
  }
  .public-user-dropdown-mobile .public-user-menu{
    right:0!important;left:auto!important;margin-top:10px!important;
  }
}

@media (max-width:575.98px){
  .nav-learn-mobile{width:40px;min-width:40px;height:40px;flex-basis:40px;}
  .nav-learn-mobile-text{font-size:9.5px;}
}

/* v199: tên + email tài khoản công khai hiển thị đầy đủ */
.public-user-menu{width:min(340px,calc(100vw - 24px));}
.public-user-menu .pu-menu-profile{align-items:flex-start;}
.public-user-menu .pu-mini-info{min-width:0;flex:1;}
.public-user-menu .pu-mini-info strong{font-size:14px;line-height:1.35;white-space:normal;overflow-wrap:anywhere;word-break:break-word;}
.public-user-menu .pu-mini-info span{font-size:12px;line-height:1.45;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere;word-break:break-all;}


/* v200: hiển thị đầy đủ tài khoản và hiệu ứng giỏ hàng */
.public-avatar-name{font-size:12px!important;line-height:1.25;max-width:260px;white-space:normal;overflow-wrap:anywhere;word-break:break-word;}
.public-user-menu{width:min(420px,calc(100vw - 24px));}
.public-user-menu .pu-mini-info strong{font-size:13px;line-height:1.35;white-space:normal;overflow-wrap:anywhere;word-break:break-word;}
.public-user-menu .pu-mini-info span{font-size:12px;line-height:1.4;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere;word-break:break-word;}
@keyframes vtCartBounce{0%,100%{transform:translateY(0) scale(1)}25%{transform:translateY(-8px) scale(1.12)}50%{transform:translateY(0) scale(.96)}75%{transform:translateY(-4px) scale(1.06)}}
.nav-cart-btn.cart-bounce{animation:vtCartBounce .62s ease both;}


/* v202: menu tài khoản gọn, tên một dòng, email dài hiển thị dấu chấm */
.public-user-menu{
  width:286px!important;
  max-width:calc(100vw - 20px)!important;
  border-radius:14px!important;
}
.public-user-menu .pu-menu-head{padding:13px 15px!important;gap:3px!important;}
.public-user-menu .pu-menu-head strong{
  display:block!important;
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:14px!important;
}
.public-user-menu .pu-menu-profile{padding:12px 15px!important;gap:10px!important;align-items:center!important;}
.public-user-menu .pu-mini-avatar{
  width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;
  max-width:38px!important;max-height:38px!important;flex:0 0 38px!important;
}
.public-user-menu .pu-mini-info{min-width:0!important;overflow:hidden!important;}
.public-user-menu .pu-mini-info strong,
.public-user-menu .pu-mini-info span{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}
.public-user-menu .pu-mini-info strong{font-size:13px!important;line-height:1.35!important;}
.public-user-menu .pu-mini-info span{font-size:11.5px!important;line-height:1.35!important;}
.public-user-menu .dropdown-item{padding:10px 15px!important;font-size:14px!important;}
.public-avatar-btn{max-width:220px!important;min-width:0!important;}
.public-avatar-name{
  display:block!important;
  min-width:0!important;
  max-width:145px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  font-size:13px!important;
  line-height:1.2!important;
}

/* Thanh tìm kiếm + giỏ hàng + đăng nhập/đăng ký theo màu xanh dương - cam */
.main-navbar .nav-search .input-group{
  border:1px solid #9ec5ff!important;
  border-radius:12px!important;
  overflow:hidden!important;
  box-shadow:0 4px 14px rgba(37,99,235,.08)!important;
  background:#fff!important;
}
.main-navbar .nav-search .form-control{
  border:0!important;
  min-height:40px!important;
  box-shadow:none!important;
  color:#17375f!important;
}
.main-navbar .nav-search .btn{
  border:0!important;
  width:42px!important;
  color:#fff!important;
  background:linear-gradient(135deg,#2f80ed 0%,#2563eb 58%,#ff7a1a 100%)!important;
}
.main-navbar .nav-search .btn:hover{filter:brightness(1.05)!important;}
.main-navbar .nav-cart-btn{
  color:#fff!important;
  border:0!important;
  background:linear-gradient(135deg,#2563eb 0%,#2f80ed 58%,#ff7a1a 100%)!important;
  box-shadow:0 7px 18px rgba(37,99,235,.20),0 5px 14px rgba(255,122,26,.14)!important;
}
.main-navbar .nav-cart-btn:hover{transform:translateY(-1px)!important;filter:brightness(1.05)!important;}
.main-navbar .nav-login-btn,
.main-navbar .nav-register-btn{
  min-height:38px!important;
  border-radius:10px!important;
  padding:7px 14px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
.main-navbar .nav-login-btn{
  color:#2563eb!important;
  background:#fff!important;
  border:1px solid #77aaf8!important;
}
.main-navbar .nav-login-btn:hover{background:#eaf3ff!important;color:#174ea6!important;}
.main-navbar .nav-register-btn{
  color:#fff!important;
  border:0!important;
  background:linear-gradient(135deg,#ff8a32 0%,#ff6b1a 52%,#2f80ed 100%)!important;
  box-shadow:0 7px 16px rgba(255,107,26,.16),0 5px 14px rgba(47,128,237,.13)!important;
}
.main-navbar .nav-register-btn:hover{filter:brightness(1.04)!important;color:#fff!important;}
@media(max-width:991.98px){
  .public-user-menu{width:278px!important;max-width:calc(100vw - 18px)!important;}
  .public-avatar-name{display:none!important;}
  .main-navbar .nav-search{width:100%!important;}
  .main-navbar .nav-login-btn,.main-navbar .nav-register-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;margin-bottom:10px!important;}
}

/* v205: màu loang nhạt cho tìm kiếm, giỏ hàng, đăng nhập và đăng ký */
.main-navbar .nav-search .input-group{
  background:linear-gradient(135deg,#f7fbff 0%,#edf5ff 58%,#fff4ea 100%)!important;
  border:1px solid #c7dcfb!important;
  box-shadow:0 4px 13px rgba(37,99,235,.07)!important;
}
.main-navbar .nav-search .form-control{background:transparent!important;}
.main-navbar .nav-search .btn{
  color:#174ea6!important;
  background:linear-gradient(135deg,#e6f0ff 0%,#dbeafe 55%,#ffe7d4 100%)!important;
  border-left:1px solid #c7dcfb!important;
}
.main-navbar .nav-cart-btn{
  color:#174ea6!important;
  background:linear-gradient(135deg,#e5efff 0%,#dbeafe 56%,#ffe5d0 100%)!important;
  border:1px solid #bfd5f5!important;
  box-shadow:0 5px 14px rgba(37,99,235,.10),0 4px 12px rgba(255,122,26,.07)!important;
}
.main-navbar .nav-login-btn{
  color:#174ea6!important;
  background:linear-gradient(135deg,#ffffff 0%,#edf5ff 68%,#fff5ed 100%)!important;
  border:1px solid #9fc3f7!important;
  box-shadow:0 4px 12px rgba(37,99,235,.07)!important;
}
.main-navbar .nav-register-btn{
  color:#a84308!important;
  background:linear-gradient(135deg,#fff4e8 0%,#ffe2cc 55%,#e6efff 100%)!important;
  border:1px solid #ffc292!important;
  box-shadow:0 5px 14px rgba(255,122,26,.09),0 4px 12px rgba(37,99,235,.07)!important;
}
.main-navbar .nav-register-btn:hover{color:#8a3405!important;}


/* ==========================================================================
   v216 — Hạng tài khoản FREE / PREMIUM và viền avatar chuyển màu
   PREMIUM chỉ dành cho tài khoản đã thanh toán khóa học trả phí.
   ========================================================================== */
.public-avatar-ring,
.pu-mini-avatar-ring{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border-radius:50%;
  isolation:isolate;
}
.public-avatar-ring{
  width:44px;
  height:44px;
}
.public-avatar-ring::before,
.pu-mini-avatar-ring::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  z-index:0;
}
.public-avatar-ring.is-free::before,
.pu-mini-avatar-ring.is-free::before{
  background:linear-gradient(135deg,#dbeafe,#eef6ff 52%,#c7dcfb);
  box-shadow:0 0 0 1px rgba(59,130,246,.14),0 5px 14px rgba(37,99,235,.08);
}
.public-avatar-ring.is-premium::before,
.pu-mini-avatar-ring.is-premium::before{
  background:conic-gradient(from 0deg,#ff8a32,#ffcf4a,#5eead4,#3b82f6,#8b5cf6,#ff5f9e,#ff8a32);
  animation:vtPremiumRingSpin 3.2s linear infinite;
  box-shadow:0 0 15px rgba(59,130,246,.32),0 0 24px rgba(94,234,212,.22),0 0 28px rgba(255,138,50,.18);
}
.public-avatar-ring.is-premium::after,
.pu-mini-avatar-ring.is-premium::after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:50%;
  background:conic-gradient(from 180deg,rgba(255,138,50,.18),rgba(59,130,246,.20),rgba(94,234,212,.18),rgba(139,92,246,.16),rgba(255,138,50,.18));
  filter:blur(8px);
  z-index:-1;
  animation:vtPremiumRingSpin 4.8s linear infinite reverse;
}
@keyframes vtPremiumRingSpin{to{transform:rotate(360deg)}}

.public-avatar-ring .public-avatar-circle{
  position:relative;
  z-index:1;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  max-width:38px!important;
  max-height:38px!important;
  flex:0 0 38px!important;
  border:2px solid #fff!important;
  box-shadow:0 2px 8px rgba(15,23,42,.14);
}
.public-avatar-tier-icon,
.pu-mini-tier-icon{
  position:absolute;
  z-index:3;
  right:-2px;
  bottom:-2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:2px solid #fff;
  color:#fff;
  line-height:1;
  box-shadow:0 3px 8px rgba(15,23,42,.22);
}
.public-avatar-tier-icon{
  width:18px;
  height:18px;
  font-size:9px;
}
.public-avatar-ring.is-free .public-avatar-tier-icon,
.pu-mini-avatar-ring.is-free .pu-mini-tier-icon{background:#3b82f6;}
.public-avatar-ring.is-premium .public-avatar-tier-icon,
.pu-mini-avatar-ring.is-premium .pu-mini-tier-icon{
  background:linear-gradient(135deg,#ff8a32,#f59e0b 45%,#2563eb 100%);
}
.public-avatar-identity{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-width:0;
  gap:2px;
}
.public-membership-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:max-content;
  max-width:100%;
  min-height:18px;
  padding:2px 7px;
  border-radius:999px;
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:.45px;
  white-space:nowrap;
}
.public-membership-status.is-free{
  color:#1d4ed8;
  background:#eaf3ff;
  border:1px solid #bfdbfe;
}
.public-membership-status.is-premium{
  color:#fff;
  border:1px solid rgba(255,255,255,.72);
  background:linear-gradient(100deg,#ff7a00 0%,#ff9b2f 38%,#5b6ff1 72%,#2563eb 100%);
  box-shadow:0 4px 10px rgba(37,99,235,.14),0 3px 9px rgba(255,122,0,.14);
}
.public-avatar-name{
  max-width:145px!important;
}
.pu-head-meta{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  min-width:0;
  flex-wrap:wrap;
}
.pu-role-label{
  font-size:.72rem;
  color:#1f6feb;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.5px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.pu-mini-avatar-ring{
  width:46px;
  height:46px;
  flex:0 0 46px;
}
.pu-mini-avatar-ring .pu-mini-avatar{
  position:relative;
  z-index:1;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  max-width:40px!important;
  max-height:40px!important;
  flex:0 0 40px!important;
  border:2px solid #fff!important;
  box-shadow:0 2px 8px rgba(15,23,42,.13);
}
.pu-mini-tier-icon{
  width:17px;
  height:17px;
  right:-1px;
  bottom:-1px;
  font-size:8px;
}
.pu-membership-line{
  display:inline-flex!important;
  align-items:center;
  gap:5px;
  width:max-content!important;
  max-width:100%!important;
  margin-top:2px;
  padding:3px 7px;
  border-radius:999px;
  font-size:10px!important;
  line-height:1.15!important;
  font-weight:800;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.pu-membership-line.is-free{
  color:#1d4ed8!important;
  background:#eaf3ff;
  border:1px solid #bfdbfe;
}
.pu-membership-line.is-premium{
  color:#fff!important;
  background:linear-gradient(100deg,#ff7a00,#ff9b2f 38%,#5b6ff1 72%,#2563eb);
  border:1px solid rgba(255,255,255,.65);
}

/* V515: nhãn tài khoản Premium/Free chỉ rộng vừa đủ nội dung */
.public-user-menu .pu-mini-info .pu-membership-line{
  display:inline-flex!important;
  width:fit-content!important;
  max-width:max-content!important;
  align-self:flex-start!important;
  flex:0 0 auto!important;
}

@media(max-width:991.98px){
  .public-user-dropdown-mobile .public-avatar-btn{
    width:46px!important;
    height:46px!important;
    padding:1px!important;
    overflow:visible!important;
    border:0!important;
    background:transparent!important;
  }
  .public-user-dropdown-mobile .public-avatar-ring{
    width:42px;
    height:42px;
  }
  .public-user-dropdown-mobile .public-avatar-ring .public-avatar-circle{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    max-width:36px!important;
    max-height:36px!important;
    flex:0 0 36px!important;
  }
  .public-user-dropdown-mobile .public-avatar-tier-icon{
    right:-1px;
    bottom:-1px;
  }
}
@media(prefers-reduced-motion:reduce){
  .public-avatar-ring.is-premium::before,
  .pu-mini-avatar-ring.is-premium::before,
  .public-avatar-ring.is-premium::after,
  .pu-mini-avatar-ring.is-premium::after{animation:none!important;}
}


/* v273: ưu tiên menu admin gọn sau các rule navbar cũ */
.admin-v2-user-menu{width:278px!important;max-width:calc(100vw - 20px)!important;max-height:calc(100vh - 92px)!important;overflow-y:auto!important;overflow-x:hidden!important;border-radius:14px!important;padding:6px 0!important;}
.admin-v2-user-menu .user-menu-profile{padding:12px 14px!important;gap:10px!important;align-items:center!important;}
.admin-v2-user-menu .user-menu-profile strong,.admin-v2-user-menu .user-menu-profile span{display:block!important;width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;word-break:normal!important;overflow-wrap:normal!important;}
.admin-v2-user-menu .user-menu-profile strong{font-size:14px!important;}.admin-v2-user-menu .user-menu-profile span{font-size:12px!important;}
.admin-v2-user-menu .dropdown-item{padding:10px 14px!important;font-size:14px!important;}
.admin-avatar-gradient-v273{border:3px solid transparent!important;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#1f6feb 0%,#58a6ff 48%,#ff7a00 100%) border-box!important;box-shadow:0 6px 16px rgba(31,111,235,.16),0 4px 12px rgba(255,122,0,.12)!important;}
@media(max-width:575.98px){.admin-v2-mobile-user-menu{width:266px!important;max-width:calc(100vw - 18px)!important;max-height:calc(100vh - 82px)!important;right:0!important;left:auto!important;margin-top:8px!important;}.admin-v2-user-menu .dropdown-item{padding:9px 12px!important;font-size:13.5px!important;}}


/* v274: phân biệt Admin và Quản trị viên trong menu tài khoản */
.admin-avatar-user-v274{
  border:3px solid transparent!important;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#dbeafe 0%,#eef6ff 52%,#c7dcfb 100%) border-box!important;
  box-shadow:0 0 0 1px rgba(59,130,246,.12),0 5px 14px rgba(37,99,235,.08)!important;
}


/* v350: chỉ các dòng menu tài khoản được chụp dùng chữ thường; thêm Link Website ở menu quản trị */
.public-user-menu .dropdown-item.menu-regular-v350,
.admin-v2-user-menu .dropdown-item.menu-regular-v350{
  font-weight:400!important;
}


/* ============================================================================
   v373 — Mobile: nút VÀO HỌC ngang nhỏ, cùng màu với nút web
   ============================================================================ */
@media (max-width:991.98px){
  .main-navbar .nav-learn-mobile{
    width:auto!important;
    min-width:76px!important;
    height:40px!important;
    flex:0 0 auto!important;
    padding:0 10px!important;
    border:0!important;
    border-radius:9px!important;
    gap:5px!important;
    background:linear-gradient(135deg,#ff8a3d 0%,#ff6b1a 45%,#2f80ed 100%)!important;
    color:#fff!important;
    box-shadow:0 6px 14px rgba(47,128,237,.14),0 5px 12px rgba(255,107,26,.16)!important;
  }
  .main-navbar .nav-learn-mobile:hover,
  .main-navbar .nav-learn-mobile:focus,
  .main-navbar .nav-learn-mobile:active{
    color:#fff!important;
    filter:brightness(1.04);
    background:linear-gradient(135deg,#ff8a3d 0%,#ff6b1a 45%,#2f80ed 100%)!important;
  }
  .main-navbar .nav-learn-mobile > i,
  .main-navbar .nav-learn-mobile > .homepage-icon-image,
  .main-navbar .nav-learn-mobile > .homepage-custom-icon{
    width:13px!important;
    height:13px!important;
    flex:0 0 13px!important;
    margin:0!important;
    font-size:13px!important;
    color:#fff!important;
    object-fit:contain;
  }
  .main-navbar .nav-learn-mobile-text{
    display:block!important;
    flex-direction:initial!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:.05px!important;
    white-space:nowrap!important;
    text-transform:uppercase!important;
    color:#fff!important;
  }
  .main-navbar .nav-learn-mobile-text span{
    display:inline!important;
  }
}

@media (max-width:430px){
  .main-navbar .d-flex.align-items-center.gap-2.ms-auto.d-lg-none{
    gap:6px!important;
  }
  .main-navbar .nav-learn-mobile{
    min-width:72px!important;
    padding:0 8px!important;
  }
  .main-navbar .nav-learn-mobile-text{
    font-size:9.5px!important;
  }
}

/* ============================================================================
   v375 — Mobile: nút VÀO HỌC chỉ còn chữ một dòng; menu ba chấm dọc dạng tròn
   ============================================================================ */
@media (max-width:991.98px){
  .main-navbar .nav-learn-mobile{
    min-width:78px!important;
    height:40px!important;
    padding:0 12px!important;
    gap:0!important;
    justify-content:center!important;
  }
  .main-navbar .nav-learn-mobile-text{
    display:block!important;
    width:auto!important;
    max-width:none!important;
    font-size:10.5px!important;
    line-height:1!important;
    font-weight:900!important;
    white-space:nowrap!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }
  .main-navbar .nav-mobile-menu-btn{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    flex:0 0 40px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    margin:0!important;
    border:1px solid #d7e0ea!important;
    border-radius:50%!important;
    background:linear-gradient(145deg,#ffffff 0%,#f5f8fc 100%)!important;
    color:#4b5563!important;
    box-shadow:0 5px 14px rgba(15,59,102,.10)!important;
  }
  .main-navbar .nav-mobile-menu-btn:hover,
  .main-navbar .nav-mobile-menu-btn:focus,
  .main-navbar .nav-mobile-menu-btn[aria-expanded="true"]{
    color:#0f3b66!important;
    border-color:#b8cbe2!important;
    background:#eef5ff!important;
    box-shadow:0 0 0 3px rgba(47,128,237,.10),0 5px 14px rgba(15,59,102,.10)!important;
    outline:none!important;
  }
  .main-navbar .nav-mobile-menu-btn::after,
  .main-navbar .nav-mobile-menu-btn .navbar-toggler-icon{
    display:none!important;
  }
  .main-navbar .nav-mobile-menu-btn i{
    display:block!important;
    margin:0!important;
    font-size:22px!important;
    line-height:1!important;
    color:inherit!important;
  }
}

@media (max-width:430px){
  .main-navbar .nav-learn-mobile{
    min-width:74px!important;
    padding:0 10px!important;
  }
  .main-navbar .nav-learn-mobile-text{
    font-size:10px!important;
  }
}



/* v377 — Mobile header: nút Vào học chỉ giữ chữ, menu ba chấm đồng bộ và tránh icon thừa */
@media (max-width:991.98px){
  .main-navbar .nav-learn-mobile > i,
  .main-navbar .nav-learn-mobile > .homepage-icon-image,
  .main-navbar .nav-learn-mobile > .homepage-custom-icon,
  .main-navbar .nav-learn-mobile::before,
  .main-navbar .nav-learn-mobile::after{
    display:none!important;
    content:none!important;
  }
  .main-navbar .nav-mobile-menu-btn{
    border-radius:999px!important;
  }
}


/* ============================================================================
   v387 — Mobile menu tài khoản: icon email và địa chỉ luôn cùng hàng, bỏ gạch dưới
   ============================================================================ */
.public-user-menu .pu-email-line{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  width:100%!important;
  min-width:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  color:#475569!important;
  font-size:11.5px!important;
  line-height:1.35!important;
  text-decoration:none!important;
}
.public-user-menu .pu-email-line > i{
  flex:0 0 auto!important;
  margin:0!important;
  color:#475569!important;
  font-size:13px!important;
  line-height:1!important;
}
.public-user-menu .pu-email-line .pu-email-text,
.public-user-menu .pu-email-line a{
  display:block!important;
  flex:1 1 auto!important;
  min-width:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  text-decoration:none!important;
  -webkit-text-decoration:none!important;
  color:#475569!important;
  border-bottom:0!important;
}
@media (max-width:575.98px){
  .public-user-menu .pu-menu-profile{
    align-items:center!important;
  }
  .public-user-menu .pu-mini-info{
    overflow:visible!important;
  }
  .public-user-menu .pu-email-line{
    font-size:11.5px!important;
  }
}


/* ============================================================================
   V579 — Thông báo học viên trên navbar công khai (desktop + mobile)
   ============================================================================ */
.public-notification-dropdown{position:relative;flex:0 0 auto;}
.public-notification-btn{
  position:relative;
  width:40px;
  min-width:40px;
  height:40px;
  padding:0;
  border:1px solid #dfe5ee;
  border-radius:50%;
  background:#fff;
  color:#1f3556;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(15,59,102,.06);
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.public-notification-btn::after{display:none!important;}
.public-notification-btn > i{font-size:20px;line-height:1;}
.public-notification-btn:hover,
.public-notification-btn:focus,
.public-notification-btn[aria-expanded="true"]{
  color:#2563eb;
  border-color:#bfdbfe;
  background:#f3f7ff;
  outline:0;
  transform:translateY(-1px);
}
.main-navbar .public-notification-btn{
  color:#174ea6;
  background:linear-gradient(135deg,#e5efff 0%,#dbeafe 56%,#ffe5d0 100%);
  border:1px solid #bfd5f5;
  box-shadow:0 5px 14px rgba(37,99,235,.10),0 4px 12px rgba(255,122,26,.07);
}
.main-navbar .public-notification-btn:hover,
.main-navbar .public-notification-btn:focus,
.main-navbar .public-notification-btn[aria-expanded="true"]{
  color:#174ea6;
  background:linear-gradient(135deg,#e5efff 0%,#dbeafe 56%,#ffe5d0 100%);
  border-color:#9fc3f7;
  filter:brightness(1.04);
}
.public-notification-btn.has-unread > i{animation:publicBellPulseV579 2.4s ease-in-out infinite;}
@keyframes publicBellPulseV579{0%,72%,100%{transform:rotate(0)}78%{transform:rotate(10deg)}84%{transform:rotate(-9deg)}90%{transform:rotate(5deg)}}
.public-notification-badge{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:19px;
  height:19px;
  padding:0 5px;
  border-radius:10px;
  border:2px solid #fff;
  background:#ef4444;
  color:#fff;
  font-size:10px;
  line-height:15px;
  font-weight:800;
  text-align:center;
}
.public-notification-badge[hidden]{display:none!important;}
.public-notification-menu{
  width:420px;
  max-width:calc(100vw - 24px);
  margin-top:10px!important;
  padding:0!important;
  overflow:hidden;
  border:1px solid #e6edf5!important;
  border-radius:17px!important;
  background:#fff;
  box-shadow:0 22px 54px rgba(15,23,42,.20)!important;
}
.public-notification-head{
  min-height:74px;
  padding:16px 18px 12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  border-bottom:1px solid #edf2f7;
}
.public-notification-head > div{display:flex;flex-direction:column;gap:2px;min-width:0;}
.public-notification-head strong{color:#0f2f55;font-size:20px;line-height:1.15;font-weight:700;}
.public-notification-head small{color:#71829a;font-size:12px;line-height:1.2;}
.public-notification-mark-all{
  flex:0 0 auto;
  border:0;
  background:transparent;
  color:#2563eb;
  padding:4px 0;
  font-size:12px;
  line-height:1.2;
  font-weight:500;
  white-space:nowrap;
}
.public-notification-mark-all:disabled{color:#a7b4c6;cursor:default;}
.public-notification-tabs{
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 18px;
  border-bottom:1px solid #edf2f7;
}
.public-notification-tabs button{
  height:34px;
  padding:0 15px;
  border:1px solid #d9e4f1;
  border-radius:999px;
  background:#fff;
  color:#32465f;
  font-size:12px;
  font-weight:500;
}
.public-notification-tabs button.active{border-color:#c7dbf3;background:#edf5ff;color:#0f3b66;}
.public-notification-list{max-height:410px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;}
.public-notification-list::-webkit-scrollbar{width:6px;}
.public-notification-list::-webkit-scrollbar-thumb{background:#b7c2cf;border-radius:999px;}
.public-notification-item{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:11px;
  min-height:78px;
  padding:13px 20px 13px 16px;
  border-bottom:1px solid #edf2f7;
  color:#203955;
  text-decoration:none;
  background:#fff;
  transition:background .15s ease;
}
.public-notification-item:hover{background:#f7faff;color:#203955;}
.public-notification-item.unread{background:#f2f7ff;}
.public-notification-item.unread:hover{background:#eaf3ff;}
.public-notification-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#0f4f9e;
  background:#edf4fd;
  font-size:17px;
}
.public-notification-copy{display:flex;flex:1 1 auto;min-width:0;flex-direction:column;gap:3px;}
.public-notification-copy strong{
  display:block;
  color:#173653;
  font-size:13px;
  line-height:1.35;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.public-notification-message{
  display:-webkit-box;
  color:#526a84;
  font-size:12px;
  line-height:1.42;
  font-weight:400;
  overflow:hidden;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.public-notification-copy time{color:#71829a;font-size:11px;line-height:1.2;font-weight:500;}
.public-notification-dot{
  position:absolute;
  top:18px;
  right:10px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:transparent;
}
.public-notification-item.unread .public-notification-dot{background:#2563eb;}
.public-notification-empty{
  min-height:160px;
  padding:24px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#71829a;
  font-size:13px;
  text-align:center;
}
.public-notification-empty > i{font-size:28px;color:#9bb0c8;}
.public-notification-all-link{
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border-top:1px solid #edf2f7;
  color:#1761bd;
  background:#fbfdff;
  text-decoration:none;
  font-size:12px;
  font-weight:600;
}
.public-notification-all-link:hover{color:#0f4f9e;background:#f3f8ff;}

@media(max-width:991.98px){
  .public-notification-dropdown-mobile{display:block!important;position:relative;}
  .public-notification-btn{width:40px;min-width:40px;height:40px;box-shadow:0 5px 14px rgba(15,59,102,.10);}
  .public-notification-menu{
    position:fixed!important;
    top:70px!important;
    right:8px!important;
    left:8px!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100vh - 80px)!important;
    margin:0!important;
    transform:none!important;
  }
  .public-notification-list{max-height:calc(100vh - 252px);}
  .public-notification-head{padding:14px 15px 11px;}
  .public-notification-head strong{font-size:18px;}
  .public-notification-tabs{padding:10px 15px;}
  .public-notification-item{padding:12px 18px 12px 14px;min-height:74px;}
  .public-notification-all-link{height:43px;}
}
@media(max-width:430px){
  .main-navbar .d-flex.align-items-center.gap-2.ms-auto.d-lg-none{gap:4px!important;}
  .main-navbar .navbar-brand img{max-width:104px!important;height:32px!important;}
  .main-navbar .nav-learn-mobile{min-width:64px!important;padding:0 7px!important;}
  .main-navbar .nav-learn-mobile-text{font-size:9px!important;}
  .public-notification-head{gap:8px;}
  .public-notification-mark-all{font-size:11px;}
}
@media(max-width:375px){
  .main-navbar .navbar-brand img{max-width:94px!important;height:30px!important;}
  .main-navbar .nav-cart-btn,
  .main-navbar .public-notification-btn,
  .main-navbar .nav-mobile-menu-btn{width:36px!important;min-width:36px!important;height:36px!important;flex-basis:36px!important;}
  .main-navbar .nav-learn-mobile{min-width:58px!important;height:36px!important;padding:0 6px!important;}
  .main-navbar .nav-learn-mobile-text{font-size:8.5px!important;}
  .public-user-dropdown-mobile .public-avatar-btn{width:40px!important;height:40px!important;}
  .public-user-dropdown-mobile .public-avatar-ring{width:38px;height:38px;}
  .public-user-dropdown-mobile .public-avatar-ring .public-avatar-circle{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;max-width:32px!important;max-height:32px!important;flex-basis:32px!important;}
  .public-notification-menu{top:66px!important;}
}
@media(prefers-reduced-motion:reduce){.public-notification-btn.has-unread > i{animation:none!important;}}


/* V602: popup thông báo user dùng chữ đen và chữ nhẹ. */
.public-notification-menu{color:#111}
.public-notification-head strong{color:#111;font-weight:600}
.public-notification-head small{color:#555;font-weight:400}
.public-notification-tabs button{color:#111;font-weight:400}
.public-notification-tabs button.active{color:#111;font-weight:500}
.public-notification-item,
.public-notification-item:hover{color:#111}
.public-notification-copy strong{color:#111;font-weight:500}
.public-notification-message{color:#333;font-weight:400}
.public-notification-copy time{color:#666;font-weight:400}
.public-notification-empty{color:#555;font-weight:400}
.public-notification-all-link{color:#111;font-weight:500}


/* V943: popup giỏ hàng trên navbar, đồng bộ phong cách popup Thông báo */
.public-cart-dropdown{position:relative;flex:0 0 auto;z-index:1060;}
.public-cart-menu{
  position:absolute;right:0;top:calc(100% + 10px);width:380px;max-width:calc(100vw - 24px);
  padding:0;overflow:visible;border:1px solid #e6edf5;border-radius:17px;background:#fff;
  box-shadow:0 22px 54px rgba(15,23,42,.20);opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(5px);transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
}
.public-cart-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;}
.public-cart-dropdown:hover .public-cart-menu,.public-cart-dropdown.is-open .public-cart-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);}
.public-cart-head{min-height:68px;padding:15px 17px 12px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #edf2f7;}
.public-cart-head>div{display:flex;flex-direction:column;gap:2px;min-width:0;}
.public-cart-head strong{color:#0f2f55;font-size:19px;line-height:1.15;font-weight:700;}
.public-cart-head small{color:#71829a;font-size:12px;line-height:1.2;}
.public-cart-head>i{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#eef6ff;color:#2563eb;font-size:18px;}
.public-cart-list{max-height:350px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;}
.public-cart-list::-webkit-scrollbar{width:6px}.public-cart-list::-webkit-scrollbar-thumb{background:#b7c2cf;border-radius:999px;}
.public-cart-item{display:flex;align-items:center;gap:11px;min-height:82px;padding:12px 16px;border-bottom:1px solid #edf2f7;background:#fff;color:#203955;text-decoration:none;transition:background .15s ease;}
.public-cart-item:hover{background:#f7faff;color:#203955;}
.public-cart-thumb{width:66px;height:48px;flex:0 0 66px;border-radius:9px;overflow:hidden;background:#eef3f8;display:grid;place-items:center;color:#7b8da4;}
.public-cart-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.public-cart-copy{min-width:0;display:flex;flex-direction:column;gap:5px;}
.public-cart-copy strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#203955;font-size:13px;line-height:1.35;font-weight:700;}
.public-cart-copy span{color:#f97316;font-size:13px;line-height:1.2;font-weight:800;}
.public-cart-empty{min-height:128px;padding:24px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#8492a6;font-size:13px;text-align:center;}
.public-cart-empty i{font-size:28px;color:#9aabc0;}
.public-cart-all-link{height:47px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:0 0 17px 17px;background:#fbfdff;color:#2563eb;text-decoration:none;font-size:13px;font-weight:700;}
.public-cart-all-link:hover{background:#f1f7ff;color:#1d4ed8;}

/* V949 — thông báo user mở popup chi tiết có banner như hệ thống tham khảo. */
.public-notification-icon.has-image{overflow:hidden;background:#eef2f7;border:1px solid #e1e8f0}
.public-notification-icon.has-image img{width:100%;height:100%;display:block;object-fit:cover}
.public-notification-item.has-modal-detail{cursor:pointer}
body.public-notification-detail-open{overflow:hidden!important}
.public-notification-detail-modal[hidden]{display:none!important}
.public-notification-detail-modal{position:fixed;inset:0;z-index:20050;display:flex;align-items:center;justify-content:center;padding:18px}
.public-notification-detail-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.56);backdrop-filter:blur(1.5px)}
.public-notification-detail-dialog{position:relative;z-index:1;width:min(560px,calc(100vw - 28px));max-height:min(820px,calc(100vh - 36px));overflow:hidden;border-radius:18px;background:#fff;box-shadow:0 28px 90px rgba(15,23,42,.34);border:1px solid rgba(203,213,225,.82)}
.public-notification-detail-x{position:absolute;z-index:5;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:#334155;box-shadow:0 4px 14px rgba(15,23,42,.14);cursor:pointer}
.public-notification-detail-card{max-height:min(820px,calc(100vh - 36px));overflow-y:auto;background:#fff;color:#334155}
.public-notification-detail-card::-webkit-scrollbar{width:6px}.public-notification-detail-card::-webkit-scrollbar-thumb{background:#b9c4d0;border-radius:999px}
.public-notification-detail-hero{min-height:146px;display:flex;align-items:flex-end;padding:24px 26px 20px;background:linear-gradient(135deg,#0f3767,#194d81);background-position:center;background-size:cover;color:#fff}
.public-notification-detail-hero.has-banner{min-height:178px}
.public-notification-detail-hero-copy{min-width:0;padding-right:34px}
.public-notification-detail-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.92);color:#0a8b50;font-size:11px;line-height:1;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.public-notification-detail-card.is-important .public-notification-detail-badge{color:#b42318}.public-notification-detail-card.is-maintenance .public-notification-detail-badge{color:#9a6700}.public-notification-detail-card.is-promotion .public-notification-detail-badge{color:#b54708}.public-notification-detail-card.is-course .public-notification-detail-badge{color:#1769d2}
.public-notification-detail-hero h2{margin:12px 0 0;color:#fff;font:800 21px/1.34 Roboto,Arial,sans-serif;text-shadow:0 2px 8px rgba(15,23,42,.22)}
.public-notification-detail-body{padding:22px 24px 18px}
.public-notification-detail-content{font:14px/1.65 Roboto,Arial,sans-serif;color:#475569;word-break:break-word}
.public-notification-detail-content p{margin:0 0 13px}.public-notification-detail-content p:last-child{margin-bottom:0}.public-notification-detail-content h3,.public-notification-detail-content h4{margin:17px 0 8px;color:#0f172a;font-weight:750}.public-notification-detail-content ul,.public-notification-detail-content ol{margin:9px 0 14px;padding-left:22px}.public-notification-detail-content li{margin:4px 0}.public-notification-detail-content blockquote{margin:14px 0;padding:12px 14px;border-left:4px solid #dc2626;border-radius:8px;background:#fff7f7;color:#475569}.public-notification-detail-content a{color:#2563eb;text-decoration:none;font-weight:650}.public-notification-detail-content a:hover{text-decoration:underline}
.public-notification-detail-actions{display:flex;justify-content:flex-end;margin-top:18px}.public-notification-detail-actions a{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border-radius:9px;background:#1769d2;color:#fff;text-decoration:none;font-size:13px;font-weight:700}.public-notification-detail-actions a:hover{background:#0f5fbe;color:#fff}
.public-notification-detail-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid #e5eaf0}.public-notification-detail-footer time{display:inline-flex;align-items:center;gap:6px;color:#718096;font-size:12px}.public-notification-detail-footer button{min-width:66px;height:36px;border:0;border-radius:8px;background:#f1f5f9;color:#334155;font-size:13px;font-weight:650;cursor:pointer}.public-notification-detail-footer button:hover{background:#e2e8f0}
@media(max-width:575.98px){.public-notification-detail-modal{padding:10px}.public-notification-detail-dialog{width:calc(100vw - 20px);max-height:calc(100vh - 20px);border-radius:15px}.public-notification-detail-card{max-height:calc(100vh - 20px)}.public-notification-detail-hero{min-height:128px;padding:20px 18px 17px}.public-notification-detail-hero.has-banner{min-height:150px}.public-notification-detail-hero h2{font-size:18px}.public-notification-detail-body{padding:18px 18px 15px}.public-notification-detail-content{font-size:13.5px}.public-notification-detail-x{top:9px;right:9px;width:34px;height:34px}}