/* Đào tạo nội bộ - custom styles (Tailwind vẫn dùng qua CDN) */
:root{
  /* Luxury palette: nền trung tính + nhấn vàng */
  --primary:#0f172a;   /* slate-900 */
  --secondary:#c8a24a; /* gold */
  --text:#0f172a;
  --bg:#f6f5f2;
  --card:#ffffff;
}

html,body{height:100%}
body{
  box-sizing:border-box;
  font-family:'Be Vietnam Pro',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
}

/* Backgrounds / effects (giảm gradient, nhìn "luxury" hơn) */
.gradient-bg{
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(200,162,74,.18), transparent 55%),
    linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
}
.video-player{background:linear-gradient(180deg,#0b1220 0%,#0f172a 100%)}
.progress-bar{background:linear-gradient(90deg,var(--secondary) 0%, rgba(200,162,74,.65) 100%)}

/* Cards / hover */
.card-hover{transition:transform .25s ease,box-shadow .25s ease}
.card-hover:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(15,23,42,.10)}

/* Sidebar */
.sidebar-item{transition:background .2s ease,border-color .2s ease,color .2s ease}
.sidebar-item:hover,.sidebar-item.active{
  background:linear-gradient(90deg,rgba(200,162,74,.14) 0%,transparent 100%);
  border-left:3px solid var(--secondary);
}

/* Buttons */
.btn-primary{
  background:linear-gradient(180deg,#0f172a 0%, #0b1220 100%);
  border:1px solid rgba(200,162,74,.35);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(15,23,42,.22);filter:saturate(1.01)}

/* Quiz options */
.quiz-option{transition:border-color .2s ease,background .2s ease}
.quiz-option:hover{border-color:rgba(200,162,74,.9);background:rgba(200,162,74,.06)}
.quiz-option.selected{border-color:rgba(200,162,74,.95);background:rgba(200,162,74,.10)}
.quiz-option.correct{border-color:#10b981;background:rgba(16,185,129,.18)}
.quiz-option.incorrect{border-color:#ef4444;background:rgba(239,68,68,.18)}

/* Toast */
.toast{animation:slideIn .25s ease,fadeOut .3s ease 2.7s}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}

/* Modal */
.modal-overlay{animation:fadeIn .18s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Loading spinner */
.loading-spinner{
  border:3px solid #f3f3f3;
  border-top:3px solid var(--secondary);
  border-radius:50%;
  width:24px;height:24px;
  animation:spin 1s linear infinite;
}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* Scrollbar */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:#efece6}
::-webkit-scrollbar-thumb{background:rgba(15,23,42,.55);border-radius:10px}

/* Container chứa video và content có thể scroll được */
#section-lesson > div.flex-1.flex.overflow-hidden > div.flex-1.flex.flex-col.overflow-auto {
  padding-bottom: 10rem; /* Đủ chỗ cho nút + safe area */
}

/* Container chứa video và content có thể scroll được */
#section-lesson > div.flex-1.flex.overflow-hidden > div.flex-1.flex.flex-col.overflow-auto {
  padding-bottom: 10rem; /* Đủ chỗ cho nút + safe area */
}


  /* Đảm bảo container lesson có đủ không gian */
  #section-lesson {
    min-height: 100vh;
  }
  
  /* Đảm bảo nút không bị che trên mobile */
  #section-lesson .flex.flex-col {
    margin-bottom: 1rem;
  }