@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Dancing+Script:wght@500;700&family=Oswald:wght@500;600;700&display=swap");

/* ===== CSS Variables ===== */
:root{
  --brand-1: #ea580c;            /* orange-600 */
  --brand-2: #f59e0b;            /* amber-500 */
  --brand-1-rgb: 234, 88, 12;
  --brand-2-rgb: 245, 158, 11;
  --brand-deep: #9a3412;         /* orange-800 */
  --ink: #0f172a;
  --muted: #64748b;
  --card-border: rgba(15, 23, 42, .08);
  --header-offset: 0px;
}

body{ color: var(--ink); }
.text-muted-2{ color: var(--muted); }

/* ===== Top bar ===== */
.topbar{
  background: linear-gradient(
    90deg,
    rgba(var(--brand-1-rgb), .10),
    rgba(var(--brand-2-rgb), .10)
  );
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  font-size: .92rem;
}
.top-bar{
  background: linear-gradient(90deg, rgba(var(--brand-1-rgb), .10), rgba(var(--brand-2-rgb), .10));
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}

/* ===== Navbar ===== */
.navbar{
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}
.brand-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: white;
  font-weight: 800;
  letter-spacing: .5px;
  box-shadow: 0 10px 30px rgba(var(--brand-1-rgb), .18);
}

/* Navbar dropdown */
.navbar .dropdown-menu{
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(2,6,23,.12);
  padding: .5rem;
}
.navbar .dropdown-item{
  border-radius: 10px;
  padding: .55rem .75rem;
  font-weight: 500;
  color: #000;
}
.navbar .dropdown-item:hover{
  background: rgba(var(--brand-1-rgb), .10);
}
.navbar .dropdown-item:active{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
}

@media (max-width: 991.98px){
  .navbar .dropdown-menu{
    position: static;
    float: none;
    box-shadow: none;
    padding: .25rem .5rem;
  }
}
.navbar .navbar-nav > .nav-item > .nav-link{
  font-weight: 500;
  color: #000;
  font-size: 17px;
  text-transform: capitalize;
}
.navbar .navbar-nav .nav-link[href="index.html"],
.offcanvas .nav-link[href="index.html"]{
  display: none;
}

/* ===== Hero ===== */
.hero{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(var(--brand-1-rgb), .20), transparent 60%),
    radial-gradient(800px 500px at 90% 30%, rgba(var(--brand-2-rgb), .18), transparent 55%),
    linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0));
}
.hero .carousel-inner{
  height: calc(100vh - var(--header-offset));
}
.hero .carousel-item{
  height: calc(100vh - var(--header-offset));
}
.hero .carousel-item > .min-vh-100{
  height: calc(100vh - var(--header-offset));
}
.hero-slide{
  position: relative;
}
.hero-center{
  text-align: center;
  color: #fff;
  padding: 24px 0;
}
.hero-center-menu{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
  font-weight: 600;
}
.hero-center-menu a{
  color: #fff;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(0,0,0,.25);
}
.hero-center-menu a:hover{
  background: rgba(255,255,255,.18);
}
.hero-center-title{
  font-size: clamp(2rem, 4.6vw, 3.7rem);
  font-weight: 800;
  letter-spacing: .02em;
  font-family: "Oswald", "Segoe UI", Arial, sans-serif;
}
.hero-center-sub{
  margin-top: -20px;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 700;
  font-family: "Dancing Script", "Segoe Script", "Brush Script MT", cursive;
  color: var(--brand-2);
  opacity: .95;
}
.hero-center-actions{
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.hero-cta-shake{
  position: relative;
  animation: heroShake 1.6s ease-in-out infinite;
}
.hero-cta-shake::after{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.65);
  opacity: .7;
  animation: heroPulse 1.6s ease-out infinite;
}
@keyframes heroShake{
  0%, 100%{ transform: translate3d(0,0,0); }
  10%{ transform: translate3d(-1px,0,0) rotate(-1deg); }
  20%{ transform: translate3d(1px,0,0) rotate(1deg); }
  30%{ transform: translate3d(-1px,0,0) rotate(-1deg); }
  40%{ transform: translate3d(1px,0,0) rotate(1deg); }
  50%{ transform: translate3d(0,0,0); }
}
@keyframes heroPulse{
  0%{ transform: scale(0.9); opacity: .6; }
  70%{ transform: scale(1.12); opacity: 0; }
  100%{ transform: scale(1.12); opacity: 0; }
}
.hero-text-box{
  background: rgba(255,255,255,.4);
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 16px 50px rgba(2,6,23,.10);
  backdrop-filter: blur(6px);
}
.hero-text-box .section-title{
  font-size: clamp(1.75rem, 3vw, 2.6rem);
}
.hero-text-box .lead{
  font-size: 1rem;
}
.hero-card{
  border: 1px solid var(--card-border);
  border-radius: 18px;
  box-shadow: 0 20px 70px rgba(2,6,23,.08);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
}
.hero-pill{
  border: 1px solid rgba(15, 23, 42, .10);
  background: rgba(255,255,255,.7);
  border-radius: 999px;
  padding: .35rem .6rem;
  font-size: .9rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

/* ===== Sections ===== */
section{ padding: 64px 0; }
.section-title{ letter-spacing: -0.02em; }

/* Section padding variant - used in some pages */
section.section-padding-sm{ padding: 56px 0; }

/* ===== Background image frames ===== */
.bg-frame{
  width: 100%;
  padding-top: 66.6667%;
  border-radius: 16px;
  background-color: #f8fafc;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.bg-frame-sm{
  padding-top: 60%;
  border-radius: 12px;
}
.bg-frame-lg{
  padding-top: 72%;
}

/* ===== Partners ===== */
.partner-title{
  font-family: "Barlow Condensed", "Oswald", "Segoe UI", Arial, sans-serif;
  font-size: 1.15em;
  letter-spacing: .02em;
}
.partner-title-accent{
  font-size: 1.25em;
  color: var(--brand-1);
}
.partner-carousel .carousel-control-prev,
.partner-carousel .carousel-control-next{
  width: 36px;
}
.partner-carousel .carousel-control-prev-icon,
.partner-carousel .carousel-control-next-icon{
  filter: invert(1);
}
.partner-logo{
  width: 100%;
  height: 90px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 8px;
}

/* ===== Cards ===== */
.soft-card{
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
}
.soft-card-bg{
  background: #fff;
}
.icon-bubble{
  width: 44px; height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(var(--brand-1-rgb), .14),
    rgba(var(--brand-2-rgb), .14)
  );
  border: 1px solid rgba(15, 23, 42, .06);
}

/* Intro cards - Du hoc image card */
.du-hoc-card{
  position: relative;
  overflow: visible;
  padding: 0;
  background: linear-gradient(
    90deg,
    rgba(var(--brand-1-rgb), .18) 0%,
    #ffffff 50%,
    rgba(var(--brand-2-rgb), .18) 100%
  );
}
.du-hoc-card-art{
  position: absolute;
  left: 24px;
  top: -56px;
  width: 190px;
  height: calc(100% + 56px);
  background: url("../images/du-hoc-han-quoc.png") center/cover no-repeat;
}
.du-hoc-card-content{
  padding: 1rem;
  padding-left: 220px;
}
.dao-tao-card{
  position: relative;
  overflow: visible;
  padding: 0;
  background: linear-gradient(
    90deg,
    rgba(var(--brand-1-rgb), .18) 0%,
    #ffffff 50%,
    rgba(var(--brand-2-rgb), .18) 100%
  );
}
.dao-tao-card-art{
  position: absolute;
  right: 24px;
  top: -56px;
  width: 190px;
  height: calc(100% + 56px);
  background: url("../images/hoc-han-ngu.png") center/cover no-repeat;
}
.dao-tao-card-content{
  padding: 1rem;
  padding-right: 220px;
}
@media (max-width: 767.98px){
  .du-hoc-card-art{
    left: 16px;
    top: -34px;
    width: 140px;
    height: calc(100% + 34px);
  }
  .du-hoc-card-content{
    padding: 1rem;
    padding-left: 160px;
  }
  .dao-tao-card-art{
    right: 16px;
    top: -34px;
    width: 140px;
    height: calc(100% + 34px);
  }
  .dao-tao-card-content{
    padding: 1rem;
    padding-right: 160px;
  }
}

/* ===== Timeline ===== */
.timeline{
  border-left: 2px dashed rgba(15,23,42,.16);
  padding-left: 22px;
}
.timeline .step{
  position: relative;
  padding: 18px 18px 18px 0;
}
.timeline .step:before{
  content:"";
  position: absolute;
  left: -32px; top: 28px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 8px 18px rgba(var(--brand-1-rgb), .28);
}

/* Timeline variant - used in gioi-thieu */
.timeline-alt{
  position: relative;
  padding-left: 18px;
}
.timeline-alt::before{
  content:"";
  position:absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: rgba(15,23,42,.10);
}
.t-item{
  position: relative;
  padding: 8px 0 8px 14px;
}
.t-item::before{
  content:"";
  position:absolute;
  left: -1px;
  top: 14px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 12px 26px rgba(var(--brand-1-rgb), .22);
}

/* ===== CTA stripe ===== */
.cta-stripe{
  background: linear-gradient(
    135deg,
    rgba(var(--brand-1-rgb), .14),
    rgba(var(--brand-2-rgb), .12)
  );
  border-top: 1px solid rgba(15, 23, 42, .06);
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}

/* ===== Buttons ===== */
.btn-brand{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  border: none;
  box-shadow: 0 14px 30px rgba(var(--brand-1-rgb), .22);
}
.btn-brand:hover{ filter: brightness(0.98); }

/* ===== Badges ===== */
.badge-soft{
  background: rgba(var(--brand-1-rgb), .12);
  color: var(--brand-deep);
  border: 1px solid rgba(var(--brand-1-rgb), .22);
  font-weight: 600;
}

/* ===== Footer ===== */
footer{
  background: #0b1220;
  color: rgba(255,255,255,.85);
}
footer a{ color: rgba(255,255,255,.85); text-decoration: none; }
footer a:hover{ text-decoration: underline; }

/* Footer Sunny (Orange theme) */
.footer-sunny{
  position: relative;
  background:
    radial-gradient(900px 520px at 10% 0%,
      rgba(var(--brand-1-rgb), .22), transparent 55%),
    radial-gradient(760px 460px at 92% 18%,
      rgba(var(--brand-2-rgb), .18), transparent 55%),
    linear-gradient(180deg, #0b1220 0%, #070b14 100%);
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
}

.footer-sunny:before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  opacity: .95;
}

.footer-sunny a{
  color: rgba(255,255,255,.82);
  text-decoration: none;
}
.footer-sunny a:hover{
  color: rgba(255,255,255,1);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-sunny .footer-badge{
  width: 44px; height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  font-weight: 900;
  letter-spacing: .5px;
  box-shadow: 0 18px 40px rgba(var(--brand-1-rgb), .28);
}

.footer-sunny .footer-title{
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.footer-sunny .footer-text{
  color: rgba(255,255,255,.72);
}

.footer-sunny .footer-divider{
  border-color: rgba(255,255,255,.12) !important;
}

.footer-sunny .footer-list a{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .15rem 0;
}

.footer-sunny .footer-list a i{
  color: rgba(var(--brand-2-rgb), .95);
}

.footer-sunny .footer-social a{
  width: 42px; height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.footer-sunny .footer-social a:hover{
  transform: translateY(-1px);
  background: rgba(var(--brand-1-rgb), .18);
  border-color: rgba(var(--brand-1-rgb), .38);
  text-decoration: none;
}

.footer-sunny .footer-chip{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.78);
  font-size: .9rem;
}

.footer-sunny .footer-mini-link{
  color: rgba(255,255,255,.72);
}
.footer-sunny .footer-mini-link:hover{
  color: rgba(255,255,255,1);
}

/* ===== Utility Classes ===== */
.mono{ 
  font-variant-numeric: tabular-nums; 
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 
}

.chip{
  display:inline-flex; 
  align-items:center; 
  gap:.4rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.7);
  font-size: .92rem;
  white-space: nowrap;
}

.divider-dashed{
  border-top: 1px dashed rgba(15,23,42,.12);
  margin: 14px 0;
}

.muted-link{
  color: var(--muted);
  text-decoration: none;
}
.muted-link:hover{ text-decoration: underline; }

/* ===== Page-specific classes ===== */

/* Course page */
.sticky-panel{
  position: sticky;
  top: 92px;
  z-index: 10;
}
.course-card{
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
  transition: transform .12s ease, box-shadow .12s ease;
  height: 100%;
}
.course-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(2,6,23,.10);
}
.price{
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.course-meta{
  border-top: 1px dashed rgba(15,23,42,.12);
  padding-top: .8rem;
  margin-top: .8rem;
}
.empty-state{
  border: 1px dashed rgba(15,23,42,.18);
  border-radius: 16px;
  padding: 28px;
  background: rgba(255,255,255,.7);
}

/* Gioi-thieu page */
.hero::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 360px at 15% 10%, rgba(var(--brand-1-rgb), .10), transparent 60%),
    radial-gradient(760px 340px at 85% 20%, rgba(var(--brand-2-rgb), .08), transparent 60%);
  pointer-events:none;
}
.hero > .container{ position: relative; z-index: 2; }

.stat-tile{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
  padding: 16px;
  height: 100%;
}
.stat-tile .num{
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 1.6rem;
}

.feature-card{
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
  transition: transform .12s ease, box-shadow .12s ease;
  height: 100%;
}
.feature-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(2,6,23,.10);
}

.quote{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  background:
    radial-gradient(900px 280px at 10% 0%, rgba(var(--brand-1-rgb), .10), transparent 60%),
    radial-gradient(700px 280px at 90% 0%, rgba(var(--brand-2-rgb), .08), transparent 60%),
    rgba(255,255,255,.92);
  box-shadow: 0 18px 60px rgba(2,6,23,.08);
  padding: 22px;
}

.testimonial{
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
  background: #fff;
  height: 100%;
}

/* He-thong-trung-tam page */
.center-item{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(2,6,23,.06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  cursor: pointer;
}
.center-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 48px rgba(2,6,23,.10);
}
.center-item.active{
  border-color: rgba(var(--brand-1-rgb), .28);
  box-shadow: 0 18px 55px rgba(var(--brand-1-rgb), .14);
  background:
    radial-gradient(900px 220px at 0% 0%, rgba(var(--brand-1-rgb), .10), transparent 60%),
    radial-gradient(900px 220px at 100% 0%, rgba(var(--brand-2-rgb), .08), transparent 60%),
    #fff;
}

.map-shell{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(900px 320px at 10% 0%, rgba(var(--brand-1-rgb), .18), transparent 65%),
    radial-gradient(700px 320px at 90% 0%, rgba(var(--brand-2-rgb), .16), transparent 60%),
    #fff;
  box-shadow: 0 18px 60px rgba(2,6,23,.08);
}
.map-top{
  padding: 12px 14px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.map-top .title{
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.map-body{
  position: relative;
  background: rgba(2,6,23,.02);
  min-height: 360px;
}
.map-body iframe{
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
  background: #fff;
}
.map-loading{
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(6px);
  z-index: 5;
}
.map-loading.show{ display: flex; }

/* Tin-tuc page */
.news-card{
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
  transition: transform .12s ease, box-shadow .12s ease;
  height: 100%;
  overflow: hidden;
}
.news-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(2,6,23,.10);
}
.cover{
  position: relative;
  background:
    radial-gradient(900px 320px at 10% 0%, rgba(var(--brand-1-rgb),.22), transparent 65%),
    radial-gradient(700px 320px at 90% 0%, rgba(var(--brand-2-rgb),.20), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0));
  border-bottom: 1px solid rgba(15,23,42,.08);
  min-height: 140px;
}
.cover .cover-badge{
  position:absolute;
  top: 12px; left: 12px;
}
.cover .cover-icon{
  position:absolute;
  right: 12px; top: 12px;
  width: 44px; height: 44px;
  border-radius: 14px;
  display: inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  backdrop-filter: blur(10px);
}

/* Lien-he page */
.contact-card{
  height: 100%;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
  transition: transform .12s ease, box-shadow .12s ease;
}
.contact-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(2,6,23,.10);
}

/* Tai-nguyen page */
.resource-card{
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
  transition: transform .12s ease, box-shadow .12s ease;
  height: 100%;
}
.resource-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(2,6,23,.10);
}

/* Tin-tuc-chi-tiet page */
.read-progress{
  position: fixed;
  top: 0; left: 0;
  height: 4px;
  width: 0%;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  z-index: 1100;
}
.subnav{
  position: sticky;
  top: 66px;
  z-index: 9;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(15,23,42,.06);
  backdrop-filter: blur(10px);
}
.subnav .nav-link{ color: var(--muted); }
.subnav .nav-link.active{ color: var(--ink); font-weight: 700; }
.toc{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
}
.toc .nav-link{
  color: var(--muted);
  padding: .4rem .6rem;
  border-radius: 12px;
}
.toc .nav-link.active{
  color: var(--ink);
  background: rgba(var(--brand-1-rgb),.10);
  border: 1px solid rgba(var(--brand-1-rgb),.18);
  font-weight: 700;
}
.article{
  font-size: 1.05rem;
  line-height: 1.75;
}
.article h2, .article h3{
  letter-spacing: -0.01em;
  margin-top: 1.6rem;
}
.article h2{
  font-size: 1.55rem;
  font-weight: 800;
}
.article h3{
  font-size: 1.25rem;
  font-weight: 800;
}
.article .callout{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.85);
  padding: 14px 16px;
}
.article code{
  background: rgba(2,6,23,.06);
  padding: .1rem .35rem;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .95em;
}
.article .example{
  border-left: 4px solid rgba(var(--brand-1-rgb),.45);
  padding-left: 14px;
  margin: 12px 0;
}

/* Gioi-thieu page - Floating buttons */
.fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1080;
  display: grid;
  gap: 10px;
}
.fab .btn{
  border-radius: 999px;
  box-shadow: 0 18px 40px rgba(2,6,23,.18);
}

/* Toast */
.toast-container{
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 1080;
}

/* Topbar variants - opacity differences */
.topbar-light{
  background: linear-gradient(90deg, rgba(var(--brand-1-rgb),.08), rgba(var(--brand-2-rgb),.08));
}

/* Badge-soft variants */
.badge-soft-light{
  background: rgba(var(--brand-1-rgb),.10);
  border: 1px solid rgba(var(--brand-1-rgb),.18);
}

/* Hero variants */
.hero-light{
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(var(--brand-1-rgb),.18), transparent 60%),
    radial-gradient(800px 500px at 90% 30%, rgba(var(--brand-2-rgb),.18), transparent 55%),
    linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0));
}

/* Hero-card variants */
.hero-card-light{
  background: rgba(255,255,255,.88);
}

/* Brand-badge variants */
.brand-badge-light{
  box-shadow: 0 10px 30px rgba(var(--brand-1-rgb),.15);
}

/* Lich-khai-giang page */
.table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 0 1px 0 rgba(15,23,42,.10);
}
.table td, .table th{ vertical-align: middle; }

.row-soft{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
  background: #fff;
}

.class-card{
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
  transition: transform .12s ease, box-shadow .12s ease;
  height: 100%;
  background: #fff;
  overflow: hidden;
}
.class-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(2,6,23,.10);
}
.card-cover{
  position: relative;
  min-height: 88px;
  background:
    radial-gradient(900px 260px at 0% 0%, rgba(var(--brand-1-rgb),.18), transparent 60%),
    radial-gradient(900px 260px at 100% 0%, rgba(var(--brand-2-rgb),.16), transparent 60%),
    rgba(2,6,23,.02);
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.card-cover .badge-wrap{
  position:absolute;
  top: 12px; left: 12px;
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-right: 12px;
}
.card-cover .icon{
  position:absolute;
  right: 12px; top: 12px;
  width: 44px; height: 44px;
  border-radius: 14px;
  display: inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  backdrop-filter: blur(10px);
}

/* Tai-nguyen-chi-tiet page */
.preview-shell{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(2,6,23,.08);
}
.preview-top{
  background: linear-gradient(135deg, rgba(var(--brand-1-rgb),.10), rgba(var(--brand-2-rgb),.10));
  border-bottom: 1px solid rgba(15,23,42,.08);
  padding: 10px 14px;
}
.preview-canvas{
  padding: 18px;
  background:
    radial-gradient(900px 360px at 10% 0%, rgba(var(--brand-1-rgb),.12), transparent 65%),
    radial-gradient(700px 320px at 90% 0%, rgba(var(--brand-2-rgb),.12), transparent 60%),
    #fff;
}
.page-thumb{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.thumb-head{
  padding: 10px 12px;
  background: rgba(2,6,23,.02);
  border-bottom: 1px solid rgba(15,23,42,.08);
  font-weight: 700;
  font-size: .95rem;
}
.thumb-body{
  padding: 14px;
  min-height: 120px;
  background:
    linear-gradient(180deg, rgba(2,6,23,.03), rgba(2,6,23,0));
}

/* Cau-noi page */
.page-hero{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 12% 10%, rgba(var(--brand-1-rgb), .22), transparent 58%),
    radial-gradient(900px 520px at 92% 18%, rgba(var(--brand-2-rgb), .18), transparent 55%),
    linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0));
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}
.page-hero .hero-card{
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 18px;
  box-shadow: 0 22px 75px rgba(2,6,23,.10);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
}

.filter-bar{
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(2,6,23,.08);
}

.topic-jump a{
  text-decoration:none;
  color: rgba(15,23,42,.85);
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.85);
  border-radius: 999px;
  padding: .45rem .75rem;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.topic-jump a:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--brand-1-rgb), .22);
  box-shadow: 0 14px 40px rgba(2,6,23,.10);
}

.topic-section{ scroll-margin-top: 92px; }

.phrase-card{
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 16px;
  box-shadow: 0 14px 45px rgba(2,6,23,.06);
  background: #fff;
  height: 100%;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.phrase-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 60px rgba(2,6,23,.10);
  border-color: rgba(var(--brand-1-rgb), .22);
}

.phrase-korean{
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.phrase-romanization{
  color: var(--muted);
  font-size: .95rem;
  font-weight: 600;
}
.phrase-meaning{ color: var(--ink); font-weight: 700; }
.phrase-note{ color: var(--muted); font-size: .92rem; }

.hide-rom .phrase-romanization{ display: none; }
details summary{ cursor: pointer; }

.footer-sunny--orange{
  position: relative;
  background:
    radial-gradient(1000px 520px at 18% 0%, rgba(255,255,255,.28), transparent 60%),
    radial-gradient(760px 460px at 92% 12%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%);
  color: rgba(255,255,255,.92);
  border-top: 1px solid rgba(255,255,255,.22);
  overflow: hidden;
}
.footer-sunny--orange:after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.22) 100%);
  pointer-events:none;
}
.footer-sunny--orange > .container{ position: relative; z-index: 1; }
.footer-sunny--orange a{ color: rgba(255,255,255,.95); text-decoration: none; }
.footer-sunny--orange a:hover{ color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer-sunny--orange .footer-badge{
  width: 44px; height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.12));
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  font-weight: 900;
  letter-spacing: .5px;
  box-shadow: 0 18px 40px rgba(0,0,0,.20);
  outline: 2px solid rgba(255,255,255,.22);
  outline-offset: 2px;
}
.footer-sunny--orange .footer-title{ color: #fff; font-weight: 900; letter-spacing: -0.01em; }
.footer-sunny--orange .footer-text{ color: rgba(255,255,255,.86); }
.footer-sunny--orange .footer-divider{ border-color: rgba(255,255,255,.28) !important; }
.footer-sunny--orange .footer-social a{
  width: 42px; height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.footer-sunny--orange .footer-social a:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.38);
  text-decoration: none;
}

/* Bo-luyen page */
.home-card{
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 18px;
  box-shadow: 0 22px 75px rgba(2,6,23,.08);
  background: rgba(255,255,255,.92);
  transition: transform .15s ease, box-shadow .15s ease;
  height: 100%;
}
.home-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 90px rgba(2,6,23,.12);
}

/* Cau-noi-tieng-han-theo-chu-de page */
.topic-card{
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  cursor: pointer;
}
.topic-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(2,6,23,.10);
  border-color: rgba(var(--brand-1-rgb), .22);
}
.phrase-item{
  height: 100%;
}

/* Kiemtra pages */
.quiz-card{
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(2,6,23,.08);
  background: #fff;
}
.option-item{
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 14px;
  padding: .75rem .9rem;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  background: #fff;
}
.option-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 40px rgba(2,6,23,.08);
  border-color: rgba(var(--brand-1-rgb), .25);
}
.option-item.active{
  border-color: rgba(var(--brand-1-rgb), .45);
  background: rgba(var(--brand-1-rgb), .06);
  box-shadow: 0 14px 40px rgba(2,6,23,.10);
}
.korean{
  font-weight: 900;
  letter-spacing: -0.01em;
}
.blank{
  display:inline-block;
  padding: 0 .35rem;
  border-bottom: 3px solid rgba(var(--brand-1-rgb), .55);
  border-radius: 6px;
  font-weight: 900;
  letter-spacing: .08em;
  min-width: 6ch;
  text-align:center;
}
.timer-pill{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 999px;
  padding: .35rem .7rem;
  font-weight: 800;
  background: rgba(255,255,255,.85);
}
.review-item{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 1rem;
  background: #fff;
}
.review-item.correct{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.06);
}
.review-item.wrong{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.05);
}
.small-note{ font-size:.92rem; color:var(--muted); }
.tts-warning{ display:none; }

/* Duhoc page */
.strong-card{
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(2,6,23,.08);
  background: #fff;
}
.hero-kicker{
  letter-spacing: -.02em;
  font-weight: 800;
  line-height: 1.1;
}
.stat-pill{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 999px;
  padding: .45rem .7rem;
  font-weight: 600;
  background: rgba(255,255,255,.86);
}
.icon-chip{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(var(--brand-1-rgb), .10);
  border: 1px solid rgba(var(--brand-1-rgb), .20);
  color: var(--brand-deep);
  flex: 0 0 auto;
}
.detail-img{
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 60px rgba(2,6,23,.08);
}
@media (max-width: 992px){
  .detail-img{ height: 240px; }
}
.detail-kicker{
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  font-weight: 800;
  color: var(--brand-deep);
  background: rgba(var(--brand-1-rgb), .10);
  border: 1px solid rgba(var(--brand-1-rgb), .20);
  padding: .35rem .65rem;
  border-radius: 999px;
}
.checkline{
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  color: var(--ink);
}
.checkline i{
  margin-top: .15rem;
  color: var(--brand-deep);
}

/* 22.html page */
.hero-pill{
  border: 1px solid rgba(15, 23, 42, .10);
  background: rgba(255,255,255,.7);
  border-radius: 999px;
  padding: .35rem .6rem;
  font-size: .9rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.cta-stripe{
  background: linear-gradient(
    135deg,
    rgba(var(--brand-1-rgb), .14),
    rgba(var(--brand-2-rgb), .12)
  );
  border-top: 1px solid rgba(15, 23, 42, .06);
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}

/* Background light với gradient */
.bg-light{
  background: linear-gradient(90deg, rgba(var(--brand-1-rgb), .08), rgba(var(--brand-2-rgb), .08)) !important;
}