/*
Theme Name: Kid English
Theme URI: https://kidenglish.vn
Author: Kid English Team
Author URI: https://kidenglish.vn
Description: Theme WordPress cho nền tảng học tiếng Anh trực tuyến dành cho trẻ 5-10 tuổi. Trang chủ landing full-width, khoá học quản lý qua Custom Post Type, hỗ trợ blog và trang con.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kidenglish
Tags: education, kids, landing-page, custom-colors, custom-menu, featured-images, translation-ready
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  --blue:        #2064E4;
  --blue-soft:   #E3EEFF;
  --navy:        #1B2B5E;
  --pink:        #F1679F;
  --pink-soft:   #FFE3EF;
  --yellow:      #FFC53D;
  --yellow-deep: #E8A400;
  --green:       #2FAE68;
  --green-deep:  #1F8F52;
  --orange:      #F5941F;
  --orange-deep: #D97706;
  --red:         #EF5350;
  --purple:      #8B5CF6;
  --purple-deep: #6D3FD9;
  --indigo:      #5B58C9;
  --cream:       #FBF1D9;
  --footer:      #202B5C;
  --text:        #3D4C6F;
  --muted:       #6B7A99;
  --line:        #E6ECF7;
  --radius-lg:   24px;
  --radius-md:   16px;
  --shadow-sm:   0 4px 14px rgba(27,43,94,.08);
  --shadow-md:   0 12px 30px rgba(27,43,94,.12);
  --font-display:'Baloo 2', system-ui, sans-serif;
  --font-body:   'Nunito', system-ui, sans-serif;
}

/* =========================================================
   BASE
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  color:var(--text);
  background:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input{ font-family:inherit; }
h1,h2,h3{ font-family:var(--font-display); color:var(--navy); line-height:1.15; }

.container{ max-width:1180px; margin:0 auto; padding:0 24px; }

:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; border-radius:8px; }

/* Icon SVG dùng qua <use> */
.ico{ display:block; width:24px; height:24px; }

/* Nút "3D mềm" dùng chung */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:16px;
  padding:12px 26px; border-radius:999px;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(1px); }
.btn-yellow{
  background:var(--yellow); color:var(--navy);
  box-shadow:0 4px 0 var(--yellow-deep), 0 12px 24px rgba(255,197,61,.35);
}
.btn-yellow:hover{ box-shadow:0 6px 0 var(--yellow-deep), 0 16px 28px rgba(255,197,61,.45); }
.btn-outline{
  background:#fff; color:var(--blue);
  border:2px solid #CFE0FA; box-shadow:var(--shadow-sm);
}
.btn-outline:hover{ border-color:var(--blue); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--line);
}
.header-inner{ height:76px; display:flex; align-items:center; gap:28px; }
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-star{ height:46px; width:auto; display:block; }
.brand-text{ line-height:1; }
.brand-name{ font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:.5px; }
.brand-name .kid{ color:var(--blue); }
.brand-name .english{ color:var(--pink); }
.brand-tag{ font-size:10.5px; font-weight:800; color:var(--muted); letter-spacing:1px; margin-top:2px; }
.brand-tag .dot-y{ color:var(--yellow-deep); } .brand-tag .dot-g{ color:var(--green); }

.main-nav{ display:flex; align-items:center; gap:26px; margin-left:auto; }
.main-nav li{ list-style:none; }
.main-nav a{
  font-weight:800; font-size:15px; color:var(--navy);
  padding:6px 2px; transition:color .15s ease;
}
.main-nav a:hover, .main-nav a.active{ color:var(--blue); }
.main-nav .current-menu-item > a, .main-nav .current_page_item > a{ color:var(--blue); }

.header-actions{ display:flex; align-items:center; gap:12px; margin-left:auto; }
.main-nav + .header-actions{ margin-left:0; }
.icon-btn{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; border:2px solid #CFE0FA; color:var(--blue);
  transition:border-color .15s ease, transform .15s ease;
}
.icon-btn:hover{ border-color:var(--blue); transform:translateY(-1px); }
.btn-login{ padding:10px 22px; font-size:15px; }
.btn-signup{ padding:10px 24px; font-size:15px; }

.nav-toggle{ display:none; width:44px; height:44px; border-radius:12px; border:2px solid #CFE0FA; color:var(--navy); }
.nav-toggle svg{ display:block; margin:auto; }

.mobile-nav{ display:none; background:#fff; border-bottom:1px solid var(--line); padding:12px 24px 20px; }
.mobile-nav.open{ display:block; }
.mobile-nav li{ list-style:none; }
.mobile-nav a{ display:block; padding:12px 4px; font-weight:800; color:var(--navy); border-bottom:1px dashed var(--line); }
.mobile-nav a.active{ color:var(--blue); }
.mobile-nav .mobile-auth{ display:flex; gap:10px; margin-top:14px; }
.mobile-nav .mobile-auth .btn{ flex:1; }

/* Ô tìm kiếm ẩn/hiện ở header */
.header-search{ display:none; background:#fff; border-bottom:1px solid var(--line); padding:14px 0; }
.header-search.open{ display:block; animation:search-drop .18s ease; }
@keyframes search-drop{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.search-form{ display:flex; gap:10px; align-items:center; }
.search-field-wrap{ flex:1; min-width:0; }
.search-field{
  width:100%; padding:12px 16px; border:1.5px solid var(--line); border-radius:12px;
  font-size:16px; font-weight:600; background:#fff; /* 16px: chặn iOS auto-zoom khi focus */
}
.search-field:focus{ outline:none; border-color:var(--blue); }
.search-submit{ flex-shrink:0; }
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#BBE0FA 0%, #D8EEFD 55%, #EAF7FE 100%);
}
.hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr 1fr; gap:32px;
  align-items:center; padding:64px 24px 110px;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
  background:#FFF4D6; color:#DD8409;
  font-family:var(--font-display); font-weight:800; font-size:13.5px;
  padding:7px 16px 7px 12px; border-radius:999px; box-shadow:var(--shadow-sm);
}
.hero-badge-dot{ width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(76,168,90,.2); }
.hero h1{ font-size:clamp(38px, 5vw, 58px); font-weight:800; }
.hero h1 .line-blue{ color:var(--blue); display:block; }
.hero h1 .line-pink{ color:var(--pink); display:block; }
.hero-desc{
  margin-top:18px; max-width:440px;
  font-size:17px; font-weight:600; color:#4A5C82;
}
.hero-cta{ display:flex; align-items:center; gap:16px; margin-top:28px; flex-wrap:wrap; }
.play-dot{
  width:28px; height:28px; border-radius:50%;
  background:var(--blue); color:#fff;
  display:grid; place-items:center; flex-shrink:0;
}
.play-dot .ico{ width:12px; height:12px; margin-left:2px; }

.hero-perks{ display:flex; gap:26px; margin-top:34px; flex-wrap:wrap; }
.perk{ display:flex; align-items:center; gap:10px; }
.perk-icon{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; box-shadow:var(--shadow-sm);
}
.perk-icon .ico{ width:23px; height:23px; }
.perk-icon.green{ background:#E4F7EC; }
.perk-icon.blue{ background:#E3EEFF; }
.perk-icon.yellow{ background:#FFF3D6; color:#F0A81C; }
.perk b{ display:block; font-size:13.5px; color:var(--navy); line-height:1.3; }

/* --- Minh hoạ hero: scene SVG vẽ tay --- */
.hero-art{
  position:relative; min-height:380px;
  display:flex; align-items:flex-end;
}
.hero-img{ width:100%; height:auto; position:relative; z-index:2; filter:drop-shadow(0 16px 20px rgba(27,43,94,.15)); }
.float-letter{
  position:absolute; z-index:3;
  font-family:var(--font-display); font-weight:800;
  text-shadow:0 4px 0 rgba(0,0,0,.08);
  animation:bob 4s ease-in-out infinite;
}
.l-a{ font-size:70px; color:#F97316; top:-3%; left:27%; rotate:-8deg; }
.l-b{ font-size:58px; color:#A855F7; top:-10%; right:40%; rotate:10deg; animation-delay:.5s; }
.l-c{ font-size:54px; color:#22C55E; top:0;   right:16%; rotate:-6deg; animation-delay:1s; }
.planet{ position:absolute; top:8%; left:-4%; width:54px; z-index:3; animation:bob 6s ease-in-out infinite; filter:drop-shadow(0 5px 7px rgba(27,43,94,.16)); }
.planet img{ width:100%; height:auto; display:block; }
.spark{ position:absolute; z-index:3; color:var(--yellow); width:18px; height:18px; }
.spark svg{ width:100%; height:100%; }
.s1{ top:26%; left:24%; } .s2{ top:14%; right:32%; width:14px; height:14px; } .s3{ top:44%; right:8%; }

/* Mây cumulus mềm (SVG gradient) */
.cloud{ position:absolute; z-index:1; filter:drop-shadow(0 8px 12px rgba(120,160,210,.16)); }
.cloud svg{ width:100%; height:auto; display:block; }
.cl1{ width:180px; top:48px;  left:3%; }
.cl2{ width:110px; top:126px; left:43%; opacity:.9; }
.cl3{ width:210px; top:38px;  right:4%; }
.cl4{ width:104px; top:214px; right:28%; opacity:.8; }
.cl5{ width:88px;  top:318px; left:7%;  opacity:.75; }

/* Đồi cỏ + cây, hoa (SVG) */
.hero-ground{ position:absolute; left:0; right:0; bottom:-2px; z-index:1; }
.hero-ground > svg{ display:block; width:100%; height:110px; }
.ground-item{ position:absolute; z-index:2; filter:drop-shadow(0 5px 6px rgba(0,0,0,.14)); }
.ground-item svg{ width:100%; height:auto; display:block; }
.tr1{ width:78px; left:3%;  bottom:20px; }
.tr2{ width:74px; right:4%; bottom:22px; }
.bu1{ width:66px; left:12%; bottom:12px; }
.bu2{ width:62px; right:13%; bottom:10px; }
.fl1{ width:24px; left:22%;  bottom:16px; filter:none; }
.fl2{ width:22px; right:24%; bottom:14px; filter:none; }
.fl3{ width:20px; left:47%;  bottom:10px; filter:none; color:var(--yellow); }

@keyframes bob{
  0%,100%{ translate:0 0; }
  50%{ translate:0 -12px; }
}

/* =========================================================
   SKILLS ROW
   ========================================================= */
.skills{ padding:44px 0 8px; }
.skills-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.skill-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  padding:22px 18px 20px; text-align:center;
  transition:transform .18s ease, box-shadow .18s ease;
}
.skill-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.skill-icon{
  width:58px; height:58px; margin:0 auto 12px; border-radius:16px;
  display:grid; place-items:center;
}
.skill-icon .ico{ width:34px; height:34px; }
.skill-name{ display:block; font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--navy); }
.skill-desc{ display:block; margin-top:6px; font-size:13.5px; font-weight:600; color:var(--muted); line-height:1.5; }
.bg-blue{ background:#E3EEFF; }   .bg-orange{ background:#FFE9CF; }
.bg-red{ background:#FFE3E1; }    .bg-purple{ background:#EFE6FF; }
.bg-violet{ background:#F1E7FF; } .bg-green{ background:#E4F7EC; }
.bg-sky{ background:#DDF0FF; }    .bg-pink{ background:#FFE3EF; }

/* =========================================================
   COURSES
   ========================================================= */
.courses{ padding:56px 0 24px; }
.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.section-head h2{ font-size:30px; font-weight:800; }
.link-all{ font-weight:800; color:var(--blue); font-size:15.5px; }
.link-all:hover{ text-decoration:underline; }

.course-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.course-grid-3{ grid-template-columns:repeat(3,1fr); }
.course-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.course-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }

/* Vùng ảnh khoá học: ảnh full-bleed (gradient giữ làm nền chờ tải) */
.course-art{ position:relative; height:185px; overflow:hidden; }
.course-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.art-jungle{ background:linear-gradient(180deg,#8ED17E 0%, #4CA85A 100%); }
.art-forest{ background:linear-gradient(180deg,#BFE6F7 0%, #8FD08A 100%); }
.art-snow{ background:linear-gradient(180deg,#9CCBF2 0%, #5FA8E6 100%); }
.art-award{ background:linear-gradient(180deg,#E9DDFB 0%, #C9B3F5 100%); }

.badge{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:var(--font-display); font-weight:700; font-size:13px;
  color:#fff; padding:5px 14px; border-radius:999px;
  box-shadow:0 3px 8px rgba(0,0,0,.18);
}
.badge.green{ background:var(--green); } .badge.orange{ background:var(--orange); }
.badge.blue{ background:#3E97F5; }       .badge.purple{ background:var(--purple); }
/* Nhãn "Miễn phí" trên thẻ khoá học (góc phải trên) */
.free-tag{
  position:absolute; top:12px; right:12px; z-index:2;
  background:var(--green); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:12px;
  padding:4px 12px; border-radius:999px; box-shadow:0 3px 8px rgba(0,0,0,.2);
}

.course-body{ padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; }
.course-title{ font-size:18px; font-weight:800; margin-bottom:8px; }
.course-title.t-green{ color:var(--green-deep); } .course-title.t-orange{ color:var(--orange-deep); }
.course-title.t-blue{ color:var(--blue); }        .course-title.t-purple{ color:var(--purple-deep); }
.course-desc{ font-size:14px; color:var(--muted); font-weight:600; flex:1; }
.course-btn{
  margin-top:16px; width:100%; padding:11px 0; border-radius:12px;
  font-family:var(--font-display); font-weight:700; font-size:15px; color:#fff;
  transition:transform .15s ease, filter .15s ease;
}
.course-btn:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.cb-green{ background:var(--green); box-shadow:0 4px 0 var(--green-deep); }
.cb-orange{ background:var(--orange); box-shadow:0 4px 0 var(--orange-deep); }
.cb-blue{ background:#3E97F5; box-shadow:0 4px 0 #1D6FD1; }
.cb-purple{ background:var(--purple); box-shadow:0 4px 0 var(--purple-deep); }

/* =========================================================
   WHY US
   ========================================================= */
.why{ padding:32px 0; }
.why-box{
  background:var(--cream); border-radius:var(--radius-lg);
  padding:44px 40px 40px; text-align:center;
}
.why-box h2{ font-size:28px; font-weight:800; margin-bottom:34px; }
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; text-align:left; }
.why-item{ display:flex; gap:14px; align-items:flex-start; }
.why-icon{
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center;
  background:#fff; box-shadow:var(--shadow-sm);
}
.why-icon .ico{ width:27px; height:27px; }
.why-icon.i-blue{ background:#E3EEFF; }
.why-icon.i-green{ background:#E4F7EC; color:var(--green); }
.why-icon.i-sky{ background:#DDF0FF; }
.why-icon.i-yellow{ background:#FFF3D6; }
.why-item h3{ font-size:16.5px; font-weight:800; margin-bottom:4px; }
.why-item p{ font-size:13.5px; color:var(--muted); font-weight:600; }

/* =========================================================
   STATS
   ========================================================= */
.stats{ padding:28px 0 40px; }
.stats-box{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#615EDC 0%, #514EC0 100%);
  border-radius:28px; padding:48px 40px; text-align:center; color:#fff;
}
.stats-box h2{ color:#FFE9A8; font-size:28px; font-weight:800; margin-bottom:30px; }
.stats-deco{ position:absolute; color:rgba(255,255,255,.4); pointer-events:none; }
.stats-deco svg{ width:100%; height:100%; display:block; }
.sd1{ top:26px; left:26%; width:16px; height:16px; }
.sd2{ bottom:30px; right:28%; width:13px; height:13px; }
.sd3{ top:14%; left:15%;  width:26px; height:26px; color:#B9B6F6; opacity:.85; rotate:-12deg; }
.sd4{ top:10%; right:12%; width:22px; height:22px; color:#B9B6F6; opacity:.8;  rotate:14deg; }
.sd5{ bottom:18%; left:34%; width:15px; height:15px; color:#CFCDF9; opacity:.75; }
.sd6{ top:44%; right:7%;  width:14px; height:14px; opacity:.8; }
.sd7{ top:8%;  left:41%;  width:12px; height:12px; opacity:.7; }
.sd8{ bottom:12%; right:38%; width:18px; height:18px; color:#B9B6F6; opacity:.75; rotate:10deg; }
.sd9{ top:30%; left:7%;   width:13px; height:13px; opacity:.6; }
.stats-cloud{ position:absolute; color:#fff; pointer-events:none; }
.stats-cloud svg{ width:100%; height:auto; display:block; }
.sc1{ left:-30px;  bottom:-16px; width:210px; opacity:.10; }
.sc2{ right:-24px; bottom:-14px; width:180px; opacity:.10; }
.sc3{ left:38%;    bottom:-18px; width:150px; opacity:.08; }
.sc4{ right:20%;   top:-14px;    width:120px; opacity:.07; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); max-width:820px; margin:0 auto; }
.stat{ padding:0 12px; }
.stat + .stat{ border-left:1.5px solid rgba(255,255,255,.28); }
.stat-num{ font-family:var(--font-display); font-weight:800; font-size:clamp(30px,3.4vw,42px); line-height:1.1; }
.stat-label{ font-size:14px; font-weight:700; color:#DBDAFB; margin-top:4px; }
.stat-kid{ position:absolute; bottom:0; width:122px; filter:drop-shadow(0 8px 10px rgba(0,0,0,.25)); }
.stat-kid img{ width:100%; height:auto; display:block; }
.stat-kid.left{ left:30px; }
.stat-kid.right{ right:30px; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--footer); color:#C7CFEA; margin-top:24px; }
.footer-grid{
  display:grid; grid-template-columns:1.25fr 1.35fr .95fr 1.05fr;
  gap:40px; padding:56px 0 40px;
}
.footer-brand .brand-name{ font-size:20px; }
.footer-brand .brand-tag{ color:#9AA6D6; }
.footer-brand p{ margin-top:16px; font-size:14px; font-weight:600; max-width:260px; }
.socials{ display:flex; gap:10px; margin-top:18px; }
.social{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  transition:transform .15s ease, filter .15s ease;
}
.social:hover{ transform:translateY(-2px); filter:brightness(1.1); }
.so-fb{ background:#4A7DFF; } .so-yt{ background:#EF4444; }
.so-tt{ background:#0F1A3C; border:1px solid rgba(255,255,255,.25); } .so-ig{ background:#F1679F; }
.social svg{ width:18px; height:18px; fill:currentColor; }

.footer-col h3{ color:#fff; font-size:17px; font-weight:800; margin-bottom:16px; }
.footer-col ul li{ margin-bottom:11px; }
.footer-col ul a{ font-size:14px; font-weight:600; transition:color .15s ease; }
.footer-col ul a:hover{ color:#fff; }

.newsletter p{ font-size:14px; font-weight:600; margin-bottom:16px; }
.newsletter-form{ display:flex; gap:10px; max-width:380px; }
.newsletter-form input{
  flex:1; min-width:0; padding:12px 16px; border-radius:12px;
  border:none; font-size:16px; font-weight:600; color:var(--navy); /* 16px: chặn iOS auto-zoom */
}
.newsletter-form input::placeholder{ color:#93A0C4; }
.newsletter-form .btn{ padding:11px 20px; font-size:14px; border-radius:12px; }

.support-item{ display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:14px; font-weight:600; }
.support-item .si{
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.12); color:#fff;
  display:grid; place-items:center;
}
.support-item .si .ico{ width:15px; height:15px; }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14);
  padding:20px 0; text-align:center; font-size:13.5px; font-weight:600; color:#9AA6D6;
}

/* =========================================================
   AUTH MODAL (Đăng nhập / Đăng ký popup)
   ========================================================= */
.auth-modal{ position:fixed; inset:0; z-index:200; display:none; }
.auth-modal.open{ display:block; }
.auth-overlay{ position:absolute; inset:0; background:rgba(20,32,66,.55); }
.auth-dialog{
  position:relative; z-index:1; width:min(440px, calc(100% - 32px));
  margin:7vh auto 0; max-height:86vh; overflow:auto;
  background:#fff; border-radius:24px; padding:26px 24px 28px;
  box-shadow:0 30px 70px rgba(20,32,66,.35);
  animation:auth-pop .22s ease;
}
@keyframes auth-pop{ from{ transform:translateY(14px) scale(.97); opacity:0; } to{ transform:none; opacity:1; } }
.auth-close{
  position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; color:var(--muted); background:var(--cream);
  transition:color .15s ease;
}
.auth-close:hover{ color:var(--navy); }
.auth-head{ text-align:center; margin-bottom:18px; }
.auth-mascot{ font-size:38px; display:block; line-height:1; }
.auth-title{ font-size:23px; font-weight:800; margin-top:6px; }
.auth-tabs{ display:flex; gap:6px; background:var(--cream); padding:5px; border-radius:14px; margin-bottom:20px; }
.auth-tab{
  flex:1; padding:10px 0; border-radius:10px;
  font-family:var(--font-display); font-weight:700; font-size:15px;
  color:var(--muted); transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.auth-tab.is-active{ background:#fff; color:var(--blue); box-shadow:var(--shadow-sm); }
.auth-form{ display:none; flex-direction:column; gap:14px; }
.auth-form.is-active{ display:flex; }
.auth-field{ display:flex; flex-direction:column; gap:6px; }
.auth-field > span{ font-size:13.5px; font-weight:700; color:var(--navy); }
.auth-field input{
  width:100%; padding:12px 15px; border:1.5px solid var(--line); border-radius:12px;
  font-size:16px; font-weight:600; background:#fff; transition:border-color .15s ease; /* 16px: chặn iOS auto-zoom */
}
.auth-field input:focus{ outline:none; border-color:var(--blue); }
.auth-remember{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--muted); }
.auth-remember input{ width:16px; height:16px; }
.auth-hp{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; }
.auth-msg{ display:none; font-size:14px; font-weight:700; padding:10px 12px; border-radius:10px; }
.auth-msg.error{ display:block; background:#FDECEC; color:#D64545; }
.auth-msg.success{ display:block; background:#E4F7EC; color:#2F9E5B; }
.auth-submit{ width:100%; margin-top:2px; }
.auth-submit[disabled]{ opacity:.7; cursor:default; }
.auth-alt{ text-align:center; font-size:14px; font-weight:600; margin-top:2px; }
.auth-alt a{ color:var(--blue); }
body.auth-open{ overflow:hidden; }

/* =========================================================
   BÀI HỌC TƯƠNG TÁC (miễn phí)
   ========================================================= */
.lessons-sec{ padding:52px 0 20px; }
.lessons-head{ display:block; margin-bottom:20px; }
.lessons-head h2{ font-size:clamp(24px,4vw,34px); font-weight:800; }
.lessons-sub{ color:var(--muted); font-weight:600; margin-top:8px; max-width:62ch; }

.lesson-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.lesson-tab{
  background:#fff; border:1.5px solid var(--line); color:var(--navy);
  font-family:var(--font-display); font-weight:700; font-size:14px;
  padding:8px 16px; border-radius:999px; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.lesson-tab:hover{ border-color:var(--blue); color:var(--blue); }
.lesson-tab.is-active{ background:var(--blue); border-color:var(--blue); color:#fff; }

.lesson-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
/* Chia bài học theo nhóm tuổi (tiêu đề + dải màu theo tuổi) */
.lesson-groups{ display:flex; flex-direction:column; gap:38px; }
.lesson-group-title{ display:flex; align-items:center; gap:11px; margin:0 0 16px; font-family:var(--font-display); font-size:21px; font-weight:800; color:var(--navy); }
.lesson-group-title::before{ content:""; width:6px; height:22px; border-radius:3px; background:var(--blue); flex:none; }
.lesson-group-title .lgt-count{ font-size:12.5px; font-weight:700; color:var(--muted); background:#F1F4F9; padding:3px 11px; border-radius:999px; }
.lesson-group[data-age="5-6"] .lesson-group-title::before{ background:var(--green); }
.lesson-group[data-age="6-8"] .lesson-group-title::before{ background:var(--orange); }
.lesson-group[data-age="8-10"] .lesson-group-title::before{ background:var(--blue); }
.lesson-card{
  position:relative; display:flex; align-items:center; gap:14px; text-align:left;
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-md);
  padding:16px; box-shadow:var(--shadow-sm); cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lesson-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.lc-emoji{ font-size:32px; line-height:1; width:56px; height:56px; flex:none; display:grid; place-items:center; border-radius:16px; background:#EAF2FF; }
.lesson-card.color-green .lc-emoji{ background:#E4F7EC; }
.lesson-card.color-orange .lc-emoji{ background:#FFF0DC; }
.lesson-card.color-blue .lc-emoji{ background:#E3EEFF; }
.lesson-card.color-purple .lc-emoji{ background:#EEE7FC; }
.lesson-card.color-pink .lc-emoji{ background:#FDE7F0; }
.lc-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.lc-title{ font-family:var(--font-display); font-weight:800; font-size:16.5px; color:var(--navy); }
.lc-en{ font-size:13px; font-weight:600; color:var(--muted); }
.lc-stars{ display:flex; gap:2px; position:absolute; top:10px; right:12px; }
.lc-star{ width:13px; height:13px; display:inline-flex; }
.lesson-card.is-done{ border-color:var(--green); }

/* ---- Icon SVG (sprite Tabler outline; tô màu bằng currentColor) ---- */
.ke-ic{ width:1em; height:1em; display:inline-block; vertical-align:-.18em; }
.ke-lic{ width:32px; height:32px; display:block; }
.lm-lic{ width:26px; height:26px; display:inline-block; vertical-align:middle; }
.flash-lic{ width:66px; height:66px; display:inline-block; }
.flash-word{ width:96px; height:96px; display:inline-block; }
.quiz-word{ display:block; width:44px; height:44px; margin:0 auto 8px; }
/* Phonics: chữ cái lớn trên flashcard */
.flash-letter{ font-family:var(--font-display); font-weight:800; font-size:58px; line-height:1; color:var(--blue); margin-bottom:2px; }
.flash-letter span{ font-size:42px; color:var(--muted); margin-left:8px; }
.lm-phonics .flash-word{ width:74px; height:74px; }
/* Ảnh RIÊNG (custom: sư tử, robot, máy bay…) — giữ tỉ lệ, bo góc nhẹ */
.word-custom{ object-fit:contain; }
.flash-word.word-custom, .lm-phonics .flash-word.word-custom{ width:auto; height:auto; max-width:200px; max-height:176px; border-radius:10px; }
/* Ảnh THẬT (Wikipedia) thay hình vẽ ở flashcard — bo góc, cắt gọn cho đồng đều */
.flash-word.flash-photo, .lm-phonics .flash-word.flash-photo{
  width:250px; height:196px; object-fit:cover; border-radius:16px; vertical-align:middle;
  box-shadow:0 6px 18px rgba(20,32,66,.16); background:#eef1f6;
}
.auth-mascot .ic-star{ width:40px; height:40px; }
.ic-star{ width:1em; height:1em; display:inline-block; vertical-align:-.18em; fill:#E1E6F0; }
.ic-star.on{ fill:var(--yellow); }
.lc-star .ic-star, .res-star .ic-star{ width:100%; height:100%; vertical-align:top; }
.ic-check{ width:1em; height:1em; display:inline-block; vertical-align:-.12em; color:currentColor; }
.ic-flame{ color:var(--orange); }
/* Màu icon theo chủ đề (stroke = currentColor) */
.lic-green{ color:var(--green); }  .lic-orange{ color:var(--orange); }
.lic-blue{ color:var(--blue); }    .lic-purple{ color:var(--purple); }
.lic-pink{ color:var(--pink); }

.lesson-modal{ position:fixed; inset:0; z-index:220; display:none; }
.lesson-modal.open{ display:block; }
/* Chặn double-tap-zoom trong popup + thẻ mở bài (vẫn cho pinch-zoom 2 ngón) -> bấm đúp không phóng to làm tràn/vỡ layout */
.lesson-modal, .lesson-modal *, .lesson-card, .lesson-tab{ touch-action: manipulation; }
.lm-overlay{ position:absolute; inset:0; background:rgba(20,32,66,.6); }
.lm-dialog{
  position:relative; z-index:1; width:min(600px, calc(100% - 28px)); margin:5vh auto 0; max-height:90vh;
  background:#fff; border-radius:24px; box-shadow:0 30px 70px rgba(20,32,66,.4);
  overflow:hidden; display:flex; flex-direction:column; animation:auth-pop .22s ease;
}
.lm-head{ display:flex; align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--line); }
.lm-emoji{ font-size:24px; }
.lm-title{ flex:1; font-size:16.5px; font-weight:800; }
.lm-close{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:var(--muted); background:var(--cream); flex:none; }
.lm-close:hover{ color:var(--navy); }
.lm-progress{ height:6px; background:var(--line); }
.lm-progress-bar{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--green),var(--blue)); transition:width .3s ease; }
.lm-body{ padding:26px 22px; overflow:auto; }
.lm-foot{ padding:14px 22px 20px; border-top:1px solid var(--line); }

.lm-stage{ text-align:center; }
/* Vùng ảnh flashcard CAO CỐ ĐỊNH + ảnh căn giữa -> chuyển thẻ không đổi chiều cao popup (hết giật khi căn giữa dọc) */
.lm-flash .flash-emoji{ height:200px; display:flex; align-items:center; justify-content:center; font-size:84px; line-height:1; }
.lm-flash .flash-en{ font-family:var(--font-display); font-weight:800; font-size:38px; color:var(--blue); margin-top:14px; text-transform:lowercase; }
.lm-flash .flash-vi{ font-size:18px; font-weight:600; color:var(--muted); margin-top:4px; }
.flash-say{
  margin-top:18px; display:inline-flex; align-items:center; gap:8px;
  background:var(--yellow); color:var(--navy); font-family:var(--font-display); font-weight:700; font-size:15px;
  padding:10px 22px; border-radius:999px; box-shadow:0 4px 0 var(--yellow-deep);
}
.flash-say:hover{ filter:brightness(1.03); }

.lm-quiz .quiz-ask{ font-size:15px; font-weight:600; color:var(--muted); }
.lm-quiz .quiz-vi{ font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--navy); margin:6px 0 20px; }
/* Quiz/Ôn tập: ảnh gợi ý to hơn (ảnh thật lớn hơn emoji) */
.lm-quiz .quiz-vi .quiz-word{ width:88px; height:88px; margin:0 auto 12px; }
.lm-quiz .quiz-vi .quiz-word.word-custom{ width:auto; height:auto; max-width:158px; max-height:140px; border-radius:10px; }
.lm-quiz .quiz-emoji{ font-size:30px; display:block; margin-bottom:6px; }
.quiz-opts{ display:flex; flex-direction:column; gap:10px; }
.quiz-opt{
  padding:14px; border:2px solid var(--line); border-radius:14px; background:#fff;
  font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--navy);
  text-transform:lowercase; transition:border-color .12s ease, background .12s ease, color .12s ease;
}
.quiz-opt:hover:not(:disabled){ border-color:var(--blue); }
.quiz-opt.correct{ border-color:var(--green); background:#E4F7EC; color:var(--green-deep); }
.quiz-opt.wrong{ border-color:#EF5350; background:#FDECEC; color:#D64545; }
.quiz-opt:disabled{ cursor:default; }
.quiz-fb{ font-weight:800; font-size:15px; }
.quiz-fb.ok{ color:var(--green); } .quiz-fb.no{ color:#D64545; }

/* ---- Trình bài tập (điền từ · đúng/sai · sắp xếp · đọc) ---- */
.lm-ex .ex-pic{ text-align:center; margin-bottom:12px; }
.lm-ex .ex-pic .quiz-word{ width:64px; height:64px; margin:0 auto; }
/* Ảnh 3D (word-custom) trong bài luyện tập: to & bo góc cho rõ nét */
.lm-ex .ex-pic .quiz-word.word-custom{ width:auto; height:auto; max-width:128px; max-height:112px; border-radius:12px; }
/* Bài tập (câu/hội thoại/tên riêng) giữ nguyên hoa-thường, không ép lowercase */
.lm-ex .quiz-opt{ text-transform:none; }
/* Cách nút "Nghe" ra khỏi dòng chữ "Nghe rồi chọn từ đúng" cho thoáng */
.lm-ex .flash-say{ margin-bottom:16px; }
.ex-prompt{ font-family:var(--font-display); font-weight:800; font-size:23px; color:var(--navy); text-align:center; margin-bottom:6px; line-height:1.35; }
.ex-blank{ color:var(--blue); border-bottom:3px solid var(--blue); padding:0 8px; }
.ex-vi{ font-size:14.5px; font-weight:600; color:var(--muted); text-align:center; margin-bottom:18px; }
.tf-opts{ flex-direction:row; }
.tf-opts .quiz-opt{ flex:1; text-align:center; }
.tf-opts .tf-yes.correct, .tf-opts .tf-no.correct{ border-color:var(--green); background:#E4F7EC; color:var(--green-deep); }
/* Sắp xếp câu */
.lm-order .ex-pic{ text-align:center; margin-bottom:10px; }
.order-answer{ min-height:52px; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center;
  border:2px dashed var(--line); border-radius:14px; padding:10px; margin-bottom:16px; }
.order-bank{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.chip{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--navy); background:#fff;
  border:2px solid var(--line); border-radius:12px; padding:9px 15px; transition:border-color .12s ease, transform .1s ease; }
.chip:hover{ border-color:var(--blue); }
.order-answer .chip{ background:#EAF2FF; border-color:#CBDDFB; }
.order-answer .chip.correct{ background:#E4F7EC; border-color:var(--green); color:var(--green-deep); }
.order-answer .chip.wrong{ background:#FDECEC; border-color:#EF5350; color:#D64545; }
/* Đọc hiểu */
.lm-read{ text-align:center; }
.read-title{ font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--blue); margin-bottom:10px; }
.read-text{ font-size:18px; font-weight:600; color:var(--navy); line-height:1.7; max-width:42ch; margin:0 auto; }
.read-vi{ font-size:14px; color:var(--muted); margin-top:12px; max-width:42ch; margin-left:auto; margin-right:auto; }
.lm-read .flash-say{ margin-top:18px; }
/* Nối hình – từ */
.match-ask{ font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--navy); text-align:center; margin-bottom:16px; }
.match-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.match-col{ display:flex; flex-direction:column; gap:10px; }
.match-cell{ border:2px solid var(--line); border-radius:14px; background:#fff; padding:8px; display:flex; align-items:center; justify-content:center; min-height:58px; transition:border-color .12s ease, background .12s ease, opacity .2s ease; }
.match-cell:hover:not(:disabled){ border-color:var(--blue); }
.match-word{ font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--navy); }
.match-img .quiz-word{ width:46px; height:46px; margin:0; }
.match-img .quiz-word.word-custom{ width:auto; height:auto; max-width:58px; max-height:58px; border-radius:8px; }
.match-cell.sel{ border-color:var(--blue); background:#EAF2FF; }
.match-cell.done{ border-color:var(--green); background:#E4F7EC; opacity:.65; }
.match-cell.bad{ border-color:#EF5350; background:#FDECEC; }
/* Ghép cặp trí nhớ */
.mem-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; max-width:400px; margin:0 auto; }
.mem-card{ position:relative; aspect-ratio:1; border-radius:14px; border:none; background:none; padding:0; cursor:pointer; }
.mem-back{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; border-radius:14px;
  background:linear-gradient(140deg,var(--blue),#4d86ef); color:#fff; font-family:var(--font-display); font-weight:800; font-size:24px; box-shadow:var(--shadow-sm); }
.mem-face{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; border-radius:14px; border:2px solid var(--line); background:#fff; }
.mem-card.open .mem-back, .mem-card.done .mem-back{ display:none; }
.mem-card.open .mem-face, .mem-card.done .mem-face{ display:flex; }
.mem-card.done .mem-face{ border-color:var(--green); background:#E4F7EC; }
.mem-face .quiz-word{ width:40px; height:40px; margin:0; }
.mem-face .quiz-word.word-custom{ width:auto; height:auto; max-width:56px; max-height:56px; border-radius:8px; }
.mem-word{ font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--navy); text-align:center; padding:2px; line-height:1.15; }
@media (max-width:520px){ .mem-grid{ gap:7px; } .mem-word{ font-size:12px; } .match-word{ font-size:15px; } }
/* Popup danh sách bài học theo kỹ năng (Bé học gì) */
.lm-skill .skill-hint{ text-align:center; color:var(--muted); font-weight:600; font-size:14.5px; margin-bottom:16px; }
.skill-list{ display:flex; flex-direction:column; gap:10px; }
.skill-lesson{ display:flex; align-items:center; gap:12px; text-align:left; background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:12px 14px; transition:border-color .12s ease, transform .1s ease; }
.skill-lesson:hover{ border-color:var(--blue); transform:translateX(2px); }
.skill-lesson-ic{ width:36px; height:36px; flex:none; display:grid; place-items:center; }
.skill-lesson-ic .lm-lic{ width:30px; height:30px; }
.skill-lesson-t{ flex:1; min-width:0; font-family:var(--font-display); font-weight:800; font-size:15.5px; color:var(--navy); display:flex; flex-direction:column; }
.skill-lesson-t span{ font-weight:600; font-size:12.5px; color:var(--muted); }
.skill-lesson-go{ color:var(--blue); font-family:var(--font-display); font-weight:800; font-size:18px; flex:none; }
.skill-empty{ text-align:center; color:var(--muted); font-weight:600; padding:24px 10px; line-height:1.6; }
.skill-empty-ic{ display:block; width:44px; height:44px; color:var(--green); margin:0 auto 8px; }

.lm-done .res-stars{ display:flex; justify-content:center; gap:8px; }
.lm-done .res-star{ width:44px; height:44px; display:inline-flex; }
.lm-done .res-msg{ font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--navy); margin-top:10px; }
.lm-done .res-score{ color:var(--muted); font-weight:600; margin-top:4px; }

.lm-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lm-nav.center{ justify-content:center; flex-wrap:wrap; }
.lm-count{ font-weight:700; font-size:14px; color:var(--muted); }
.lm-btn{ font-family:var(--font-display); font-weight:700; font-size:15px; padding:11px 20px; border-radius:12px; transition:transform .12s ease, filter .12s ease; }
.lm-btn:hover{ transform:translateY(-1px); }
.lm-btn.primary{ background:var(--blue); color:#fff; box-shadow:0 4px 0 #1D5FD1; }
.lm-btn.ghost{ background:#fff; color:var(--navy); border:1.5px solid var(--line); }
.lm-btn:disabled{ opacity:.45; cursor:default; transform:none; }
body.lm-open{ overflow:hidden; }

/* ---- Tổng kết tiến độ (gamification) ---- */
.lessons-summary{ margin-bottom:22px; }
.ls-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px; }
.ls-tile{ background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-md); padding:14px 10px; text-align:center; box-shadow:var(--shadow-sm); }
.ls-num{ display:block; font-family:var(--font-display); font-weight:800; font-size:23px; color:var(--blue); }
.ls-label{ display:block; font-size:12px; font-weight:700; color:var(--muted); margin-top:2px; }
.ls-badges{ display:flex; flex-wrap:wrap; gap:8px; }
.ls-badge{ display:inline-flex; align-items:center; gap:6px; background:#F1F5FC; border:1.5px solid var(--line); color:var(--muted); font-family:var(--font-display); font-weight:700; font-size:13px; padding:6px 13px; border-radius:999px; opacity:.5; }
.ls-badge.on{ opacity:1; background:#FFF6DE; border-color:var(--yellow); color:var(--navy); }
.ls-badge-em{ font-size:15px; }
.ls-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }

@media (max-width:1080px){ .lesson-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .ls-tiles{ grid-template-columns:repeat(2,1fr); } .ls-actions .lm-btn{ flex:1 1 100%; text-align:center; } }
@media (max-width:860px){ .lesson-grid{ grid-template-columns:repeat(2,1fr); } }
/* Mobile: lưới 2x2, GIỮ thẻ dạng ngang (icon trái, chữ phải) */
@media (max-width:600px){
  .lesson-grid{ grid-template-columns:repeat(2,1fr); gap:11px; }
  .lesson-groups{ gap:26px; }
  .lesson-group-title{ font-size:17px; gap:9px; margin-bottom:12px; }
  .lesson-group-title::before{ height:19px; width:5px; }
  .lesson-card{ padding:12px 11px; gap:9px; }
  .lc-emoji{ width:44px; height:44px; border-radius:12px; }
  .ke-lic{ width:25px; height:25px; }
  .lc-title{ font-size:14px; line-height:1.2; }
  .lc-en{ font-size:11px; }
  .lc-stars{ top:7px; right:7px; gap:1px; }
  .lc-star{ width:9px; height:9px; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .skills-grid{ grid-template-columns:repeat(2,1fr); }
  .course-grid{ grid-template-columns:repeat(2,1fr); }
  .course-art{ height:225px; }  /* tablet (iPad): ảnh khoá học cao hơn cho cân đối */
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  /* Tablet (iPad…): gộp menu vào nút hamburger cho gọn, tránh chật chội */
  .main-nav, .btn-login{ display:none; }
  .nav-toggle{ display:block; }
  /* Bằng specificity với .main-nav + .header-actions{margin-left:0} ở base để đẩy actions sang phải */
  .main-nav + .header-actions{ margin-left:auto; }
}
@media (max-width:860px){
  /* Hero mobile: Tiêu đề → Nhân vật → Mô tả → Nút → Perks (giữ padding 24px 2 bên) */
  .hero-inner{ display:flex; flex-direction:column; align-items:stretch; text-align:center; gap:0; padding:36px 24px 118px; }
  .hero-copy{ display:contents; }
  .hero-badge{ order:0; align-self:center; margin-bottom:14px; }
  .hero h1{ order:1; }
  /* margin-top giữ khoảng trống phía trên cho cụm chữ A/B/C nổi lên */
  .hero-art{ order:2; min-height:0; max-width:400px; width:100%; margin:42px auto 0; }
  .hero-desc{ order:3; max-width:100%; margin:14px auto 0; }
  .hero-cta{ order:4; margin-top:18px; }
  .hero-cta{ justify-content:center; }
  /* Mobile: 3 perk trên cùng 1 hàng — icon xếp trên, chữ dưới, chia đều */
  .hero-perks{ order:5; margin-top:22px; gap:8px; flex-wrap:nowrap; justify-content:center; }
  .perk{ flex-direction:column; align-items:center; text-align:center; gap:7px; flex:1 1 0; min-width:0; }
  .perk-icon{ width:42px; height:42px; }
  .perk b{ font-size:12.5px; }
  /* Dịch ABC + hành tinh lên cao hơn để không dính vào đầu nhân vật */
  .planet{ left:3%; top:-4%; }
  .l-a{ top:-26%; }
  .l-b{ top:-22%; right:auto; left:calc(50% - 2px); }
  .l-c{ top:-18%; }
  .stat-kid{ display:none; }
}
@media (max-width:600px){
  .header-inner{ height:66px; gap:12px; }
  .brand-star{ height:40px; width:auto; }
  .brand-name{ font-size:19px; }
  .header-actions{ gap:10px; }
  .icon-btn{ width:42px; height:42px; }
  .nav-toggle{ width:42px; height:42px; }
  .btn-signup{ padding:9px 18px; font-size:14px; white-space:nowrap; }
  .skills-grid{ grid-template-columns:repeat(2,1fr); }
  /* Mobile: khoá học dạng lưới 2×2, ảnh cắt banner đồng đều cho gọn */
  .course-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .course-art{ height:145px; }
  /* Tiêu đề mục gọn lại cho khỏi đè lên link "Xem tất cả" */
  .section-head{ gap:12px; margin-bottom:16px; }
  .section-head h2{ font-size:20px; line-height:1.25; }
  .link-all{ white-space:nowrap; flex:none; font-size:14px; }
  .course-img{ position:absolute; height:100%; object-fit:cover; }
  .course-body{ padding:13px 12px 15px; }
  .course-title{ font-size:15.5px; margin-bottom:6px; }
  .course-desc{ font-size:12.5px; }
  /* thẻ nhỏ lại: thu gọn badge tuổi + nhãn "Miễn phí" cho khỏi đè nhau */
  .course-card .badge{ top:8px; left:8px; font-size:10px; padding:3px 8px; }
  .course-card .free-tag{ top:8px; right:8px; font-size:10px; padding:3px 8px; }
  .why-grid{ grid-template-columns:1fr; }
  .why-box{ padding:32px 22px; }
  .stats-grid{ grid-template-columns:1fr 1fr; row-gap:24px; }
  .stat:nth-child(3){ border-left:none; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px 18px; }
  .footer-brand, .footer-col.newsletter{ grid-column:1 / -1; }
  .support-item{ font-size:13.5px; }
  .support-item a{ word-break:break-word; }
  .float-letter{ font-size:44px; }
  /* Popup bài học trên điện thoại: ảnh vừa phải, không quá to */
  .flash-word.word-custom, .lm-phonics .flash-word.word-custom{ max-width:168px; max-height:146px; }
  .flash-word.flash-photo, .lm-phonics .flash-word.flash-photo{ width:170px; height:134px; }
  .lm-body{ padding:22px 18px; }
  /* Vùng ảnh cao cố định (nhỏ hơn desktop) -> chuyển thẻ không đổi chiều cao popup */
  .lm-flash .flash-emoji{ height:160px; }
  /* Popup căn GIỮA theo chiều dọc trên điện thoại (trước đây dính sát đỉnh -> chừa khoảng trống lớn ở dưới) */
  .lesson-modal.open{ display:flex; align-items:center; justify-content:center; }
  .lm-dialog{ margin:0; max-height:88vh; }
}

/* Máy nhỏ (<=400px): nén header vừa đủ chỗ, giữ nút to nhất có thể */
@media (max-width:400px){
  .header-inner{ gap:9px; padding-left:16px; padding-right:16px; }
  .brand-tag{ display:none; }
  .brand-name{ font-size:17px; }
  .brand-star{ height:36px; }
  .header-actions{ gap:8px; }
  .icon-btn, .nav-toggle{ width:38px; height:38px; }
  .btn-signup{ padding:8px 13px; font-size:13px; }
}

/* =========================================================
   MOTION SAFETY
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   WORDPRESS NATIVE (blog, trang con, phân trang, bình luận)
   ========================================================= */
.page-wrap{ max-width:820px; margin:0 auto; padding:56px 24px 72px; }
.page-wrap.wide{ max-width:1180px; }
.entry-header{ margin-bottom:28px; }
.entry-title{ font-size:clamp(28px,4vw,40px); font-weight:800; }
.entry-meta{ color:var(--muted); font-size:14px; font-weight:600; margin-top:10px; }
.entry-content{ font-size:16.5px; }
.entry-content > *{ margin-bottom:18px; }
.entry-content h2{ font-size:26px; font-weight:800; margin-top:32px; }
.entry-content h3{ font-size:21px; font-weight:800; margin-top:24px; }
.entry-content a{ color:var(--blue); text-decoration:underline; }
.entry-content ul,.entry-content ol{ padding-left:24px; }
.entry-content ul{ list-style:disc; } .entry-content ol{ list-style:decimal; }
.entry-content li{ margin-bottom:8px; }
.entry-content img{ border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.entry-content blockquote{
  border-left:4px solid var(--yellow); background:var(--cream);
  padding:16px 22px; border-radius:0 12px 12px 0; font-style:italic;
}

.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.post-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.post-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.post-card .thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--blue-soft); }
.post-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.post-card .body{ padding:18px 20px 22px; display:flex; flex-direction:column; flex:1; }
.post-card h2{ font-size:19px; font-weight:800; line-height:1.3; margin-bottom:8px; }
.post-card h2 a{ color:var(--navy); }
.post-card h2 a:hover{ color:var(--blue); }
.post-card .excerpt{ font-size:14px; color:var(--muted); font-weight:600; flex:1; }
.post-card .readmore{ margin-top:14px; font-weight:800; color:var(--blue); font-size:14.5px; }

.pagination{ display:flex; justify-content:center; gap:8px; margin-top:44px; flex-wrap:wrap; }
.pagination .page-numbers{
  min-width:44px; height:44px; padding:0 14px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:15px;
  background:#fff; border:1.5px solid var(--line); color:var(--navy);
  transition:border-color .15s ease, color .15s ease;
}
.pagination .page-numbers:hover{ border-color:var(--blue); color:var(--blue); }
.pagination .page-numbers.current{ background:var(--blue); border-color:var(--blue); color:#fff; }

.section-title-lg{ text-align:center; margin-bottom:38px; }
.section-title-lg h1{ font-size:clamp(30px,4vw,44px); font-weight:800; }
.section-title-lg p{ color:var(--muted); font-weight:600; margin-top:10px; }

.comment-section{ margin-top:56px; padding-top:40px; border-top:1px solid var(--line); }
.comment-section h3{ font-size:22px; font-weight:800; margin-bottom:24px; }
.comment-list{ margin-bottom:36px; }
.comment-list li{ margin-bottom:22px; }
.comment-body{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:18px 20px; box-shadow:var(--shadow-sm); }
.comment-author{ font-weight:800; color:var(--navy); }
.comment-meta{ font-size:13px; color:var(--muted); margin:2px 0 10px; }
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{
  width:100%; padding:12px 16px; border:1.5px solid var(--line); border-radius:12px;
  font-size:15px; font-weight:600; margin-bottom:14px; background:#fff;
}
.comment-form textarea{ min-height:120px; resize:vertical; }

.error-404{ text-align:center; padding:80px 24px; }
.error-404 .big{ font-family:var(--font-display); font-weight:800; font-size:clamp(80px,16vw,160px); color:var(--blue); line-height:1; }

.admin-note{ background:var(--cream); border-radius:12px; padding:14px 18px; margin:0 0 24px; font-size:14px; font-weight:600; color:var(--text); }

@media (max-width:1080px){ .post-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .post-grid{ grid-template-columns:1fr; } }

/* =========================================================
   LANDING PAGES (Về chúng tôi, Chính sách, Điều khoản, FAQ, Liên hệ)
   ========================================================= */
.lp-hero{ position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(180deg,#BBE0FA 0%, #D8EEFD 55%, #EAF7FE 100%);
  padding:64px 24px 74px; }
.lp-hero .lp-eyebrow{ display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  background:#fff; color:var(--blue); font-family:var(--font-display); font-weight:800; font-size:13px;
  padding:7px 16px; border-radius:999px; box-shadow:var(--shadow-sm); }
.lp-hero h1{ font-family:var(--font-display); font-weight:800; color:var(--navy);
  font-size:clamp(30px,4.4vw,48px); line-height:1.15; margin:0 auto; max-width:760px; }
.lp-hero h1 .hl{ color:var(--blue); }
.lp-hero .lp-sub{ margin:16px auto 0; max-width:620px; font-size:17px; font-weight:600; color:#4A5C82; }
.lp-hero-emoji{ font-size:46px; margin-bottom:6px; }
.lp-hero .cloud{ position:absolute; opacity:.9; }
.lp-wrap{ max-width:1080px; margin:0 auto; padding:56px 24px 72px; }
.lp-wrap.narrow{ max-width:840px; }
.lp-section{ margin-bottom:52px; }
.lp-section:last-child{ margin-bottom:0; }
.lp-section-title{ font-family:var(--font-display); font-weight:800; color:var(--navy);
  font-size:clamp(24px,3vw,32px); text-align:center; margin-bottom:10px; }
.lp-section-sub{ text-align:center; color:var(--muted); font-weight:600; max-width:640px; margin:0 auto 30px; }
/* Value/feature cards */
.lp-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.lp-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px 22px; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease; }
.lp-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.lp-card-ic{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center; font-size:28px; margin-bottom:14px; }
.lp-card-ic .ico{ width:30px; height:30px; }
.lp-card h3{ font-family:var(--font-display); font-weight:800; color:var(--navy); font-size:19px; margin-bottom:8px; }
.lp-card p{ color:var(--text); font-weight:600; font-size:15px; line-height:1.55; }
/* Ô icon: nền pastel + màu icon (currentColor) theo tông */
.ic-green{ background:#E4F7EC; color:var(--green); } .ic-blue{ background:#E3EEFF; color:var(--blue); } .ic-orange{ background:#FFF3D6; color:var(--orange); }
.ic-pink{ background:#FFE3EF; color:var(--pink); } .ic-purple{ background:#EEE7FC; color:var(--purple); } .ic-yellow{ background:#FFF4D6; color:#E0A100; }
/* Icon hero của trang (thay emoji lớn) */
.lp-hero-emoji{ color:var(--blue); line-height:0; }
.lp-hero-emoji .ico{ width:54px; height:54px; }
/* Stats band */
.lp-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:center;
  background:linear-gradient(135deg,#2064E4,#5B58C9); border-radius:var(--radius-lg); padding:34px 24px; }
.lp-stats .stat b{ display:block; font-family:var(--font-display); font-weight:800; color:#fff; font-size:34px; }
.lp-stats .stat span{ color:#D6E4FF; font-weight:700; font-size:14px; }
/* Prose (chính sách / điều khoản) */
.lp-prose{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:38px 40px; box-shadow:var(--shadow-sm); }
.lp-prose > p.lp-updated{ color:var(--muted); font-weight:700; font-size:13.5px; margin-bottom:22px; }
.lp-prose h2{ font-family:var(--font-display); font-weight:800; color:var(--navy); font-size:21px; margin:30px 0 10px; padding-left:14px; border-left:4px solid var(--blue); }
.lp-prose h2:first-of-type{ margin-top:0; }
.lp-prose p, .lp-prose li{ color:var(--text); font-weight:600; font-size:16px; line-height:1.7; }
.lp-prose p{ margin-bottom:12px; }
.lp-prose ul{ margin:6px 0 16px; padding-left:22px; } .lp-prose li{ margin-bottom:7px; }
.lp-prose strong{ color:var(--navy); }
/* FAQ accordion */
.faq-list{ display:flex; flex-direction:column; gap:14px; max-width:820px; margin:0 auto; }
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm); overflow:hidden; }
.faq-q{ width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:20px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--font-display); font-weight:800; color:var(--navy); font-size:16.5px; }
.faq-q:hover{ color:var(--blue); }
.faq-q .faq-plus{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--blue-soft); color:var(--blue);
  display:grid; place-items:center; font-size:20px; line-height:1; transition:transform .2s ease; }
.faq-item.open .faq-plus{ transform:rotate(45deg); background:var(--blue); color:#fff; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .28s ease; }
.faq-a-inner{ padding:0 22px 20px; color:var(--text); font-weight:600; font-size:15.5px; line-height:1.65; }
/* Contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:26px; align-items:start; }
.contact-info{ display:flex; flex-direction:column; gap:14px; }
.contact-item{ display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:18px 20px; box-shadow:var(--shadow-sm); }
.contact-item .ci-ic{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:22px; flex:none; }
.contact-item .ci-ic .ico{ width:24px; height:24px; }
.contact-item b{ display:block; font-family:var(--font-display); color:var(--navy); font-size:15px; margin-bottom:2px; }
.contact-item span, .contact-item a{ color:var(--text); font-weight:600; font-size:14.5px; }
.contact-item a:hover{ color:var(--blue); }
.contact-form{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 30px 32px; box-shadow:var(--shadow-sm); }
.contact-form h3{ font-family:var(--font-display); font-weight:800; color:var(--navy); font-size:20px; margin-bottom:6px; }
.contact-form p.cf-sub{ color:var(--muted); font-weight:600; font-size:14.5px; margin-bottom:18px; }
.cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cf-field{ margin-bottom:14px; }
.cf-field label{ display:block; font-weight:800; color:var(--navy); font-size:13.5px; margin-bottom:6px; }
.cf-field input, .cf-field textarea{ width:100%; border:1.5px solid var(--line); border-radius:12px; padding:12px 14px;
  font-family:var(--font-body); font-weight:600; font-size:15px; color:var(--text); background:#FBFCFF; }
.cf-field input:focus, .cf-field textarea:focus{ outline:none; border-color:var(--blue); background:#fff; }
.cf-field textarea{ min-height:120px; resize:vertical; }
/* CTA band */
.lp-cta{ text-align:center; background:linear-gradient(135deg,#FFF4D6,#FFE3EF); border-radius:var(--radius-lg); padding:44px 28px; }
.lp-cta h2{ font-family:var(--font-display); font-weight:800; color:var(--navy); font-size:clamp(22px,3vw,30px); margin-bottom:10px; }
.lp-cta p{ color:var(--text); font-weight:600; margin-bottom:20px; }
@media (max-width:860px){
  .lp-cards{ grid-template-columns:1fr 1fr; }
  .lp-stats{ grid-template-columns:1fr 1fr; row-gap:26px; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .lp-hero{ padding:44px 20px 52px; }
  .lp-wrap{ padding:40px 18px 52px; }
  .lp-cards{ grid-template-columns:1fr; }
  .lp-prose{ padding:26px 22px; }
  .cf-row{ grid-template-columns:1fr; }
}

/* =========================================================
   BUTTONS bổ sung (dùng cho dashboard)
   ========================================================= */
.btn-blue{ background:var(--blue); color:#fff; box-shadow:0 4px 0 #164FBC, 0 12px 24px rgba(32,100,228,.35); }
.btn-blue:hover{ box-shadow:0 6px 0 #164FBC, 0 16px 28px rgba(32,100,228,.45); }
.btn-ghost-w{ background:rgba(255,255,255,.14); color:#fff; border:2px solid rgba(255,255,255,.55); }
.btn-ghost-w:hover{ background:rgba(255,255,255,.24); }

/* =========================================================
   DASHBOARD HỌC VIÊN (page-bang-dieu-khien.php)
   ========================================================= */
.dash{ background:#F4F8FE; min-height:60vh; }
.dash-hero{ background:linear-gradient(135deg,#2064E4 0%, #4B5BD0 55%, #6D4FD1 100%); padding:48px 0 96px; color:#fff; }
.dash-hero-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.dash-welcome{ display:flex; align-items:center; gap:18px; }
.dash-avatar{ width:66px; height:66px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--yellow); color:var(--navy); font-family:var(--font-display); font-weight:800; font-size:30px;
  box-shadow:0 6px 18px rgba(0,0,0,.18); }
.dash-eyebrow{ display:inline-block; font-family:var(--font-display); font-weight:800; font-size:12.5px;
  letter-spacing:.06em; text-transform:uppercase; color:#Cfe0ff; margin-bottom:2px; }
.dash-hero h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(24px,3.4vw,34px); line-height:1.15; color:#fff; }
.dash-hero p{ color:#DDE8FF; font-weight:600; margin-top:4px; }
.dash-hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }

.dash-wrap{ margin-top:-56px; padding-bottom:72px; }
.dash-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:22px; }
.dash-stat{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:22px 18px;
  text-align:center; box-shadow:var(--shadow-sm); }
.dash-stat .ds-ic{ width:50px; height:50px; margin:0 auto 10px; border-radius:14px; display:grid; place-items:center; font-size:24px; }
.dash-stat .ds-ic .ico{ width:26px; height:26px; }
.dash-stat b{ display:block; font-family:var(--font-display); font-weight:800; color:var(--navy); font-size:30px; line-height:1; }
.dash-stat span{ color:var(--muted); font-weight:700; font-size:13.5px; }

.dash-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 26px 28px;
  box-shadow:var(--shadow-sm); margin-bottom:22px; }
.dash-card h2{ font-family:var(--font-display); font-weight:800; color:var(--navy); font-size:19px; margin-bottom:14px; }
.dash-card .dash-sub{ color:var(--muted); font-weight:600; font-size:14.5px; margin:-8px 0 16px; }
.dash-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.dash-card-head h2{ margin-bottom:0; }
.dash-pct{ font-family:var(--font-display); font-weight:800; color:var(--blue); font-size:24px; }
.dash-bar{ height:16px; border-radius:999px; background:var(--blue-soft); overflow:hidden; }
.dash-bar i{ display:block; height:100%; border-radius:999px; width:0;
  background:linear-gradient(90deg,#2FAE68,#37C078); transition:width .6s cubic-bezier(.22,1,.36,1); }
.dash-progress-note{ margin-top:12px; color:var(--text); font-weight:600; font-size:14.5px; }
.dash-progress-note b{ color:var(--navy); }

.dash-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:22px; align-items:start; }
.dash-grid .dash-card{ margin-bottom:0; }

.dash-actions{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.dash-action{ display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--line);
  border-radius:16px; background:#FBFCFF; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.dash-action:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#CFE0FA; }
.dash-action .da-ic{ width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center; font-size:22px; }
.dash-action .da-ic .ico{ width:24px; height:24px; }
.dash-action .da-tx{ display:flex; flex-direction:column; }
.dash-action .da-tx b{ font-family:var(--font-display); font-weight:800; color:var(--navy); font-size:15px; }
.dash-action .da-tx small{ color:var(--muted); font-weight:600; font-size:12.5px; }

.dash-info{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.dash-info-row{ display:flex; justify-content:space-between; gap:12px; align-items:center;
  padding:11px 14px; background:#FBFCFF; border:1px solid var(--line); border-radius:12px; }
.dash-info-row span{ color:var(--muted); font-weight:700; font-size:13px; }
.dash-info-row b{ color:var(--navy); font-weight:700; font-size:14px; text-align:right; word-break:break-word; }

.dash-pass{ border:1px solid var(--line); border-radius:12px; padding:0 14px; margin-bottom:14px; background:#FBFCFF; }
.dash-pass summary{ cursor:pointer; padding:13px 0; font-family:var(--font-display); font-weight:800; color:var(--navy); font-size:14.5px; list-style:none; }
.dash-pass summary::-webkit-details-marker{ display:none; }
.dash-pass summary::after{ content:"⌄"; float:right; color:var(--muted); transition:transform .2s ease; }
.dash-pass[open] summary::after{ transform:rotate(180deg); }
.dash-pass-form{ padding:4px 0 16px; }
.dash-pass-msg{ font-weight:700; font-size:13.5px; margin:4px 0 12px; }
.dash-pass-msg.is-ok{ color:var(--green-deep); }
.dash-pass-msg.is-err{ color:var(--red); }
.dash-logout{ display:block; text-align:center; color:var(--red); font-weight:800; font-size:14px; padding:10px; }
.dash-logout:hover{ text-decoration:underline; }

.dash-badges{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.dash-badge{ text-align:center; padding:16px 8px; border-radius:16px; border:1px solid var(--line); background:#FBFCFF; opacity:.55; filter:grayscale(1); transition:transform .15s ease; }
.dash-badge.on{ opacity:1; filter:none; background:linear-gradient(180deg,#FFF9E8,#FFF3D0); border-color:#FFE39A; }
.dash-badge.on:hover{ transform:translateY(-3px); }
.dash-badge .db-ic{ display:block; font-size:30px; line-height:0; margin-bottom:6px; color:#E9A400; }
.dash-badge .db-ic .ico{ width:30px; height:30px; margin:0 auto; }
.dash-badge .db-t{ font-family:var(--font-display); font-weight:800; color:var(--navy); font-size:12.5px; }

@media (max-width:900px){
  .dash-stats{ grid-template-columns:1fr 1fr; }
  .dash-grid{ grid-template-columns:1fr; }
  .dash-badges{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:520px){
  .dash-hero-actions{ width:100%; }
  .dash-hero-actions .btn{ flex:1; }
  .dash-actions{ grid-template-columns:1fr; }
  .dash-badges{ grid-template-columns:repeat(2,1fr); }
}

/* =========================================================
   TRANG TÀI KHOẢN (page-tai-khoan.php) — thay wp-login.php
   ========================================================= */
.acct{ min-height:calc(100vh - 80px); display:flex; align-items:center; justify-content:center;
  padding:48px 20px; background:linear-gradient(180deg,#BBE0FA 0%, #D8EEFD 45%, #EAF7FE 100%); }
.acct-wrap{ width:100%; max-width:452px; }
.acct-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:34px 32px 30px; box-shadow:var(--shadow-md); }
.acct-head{ text-align:center; margin-bottom:22px; }
.acct-mascot{ display:inline-grid; place-items:center; width:60px; height:60px; border-radius:50%;
  background:linear-gradient(135deg,#FFD86B,#FFC53D); box-shadow:0 6px 16px rgba(232,164,0,.35); margin-bottom:12px; }
.acct-mascot .ic-star{ width:32px; height:32px; color:#fff; }
.acct-head h1{ font-family:var(--font-display); font-weight:800; color:var(--navy); font-size:23px; }
.acct-head p{ color:var(--muted); font-weight:600; font-size:14.5px; margin-top:6px; }

.acct-tabs{ display:flex; gap:6px; background:var(--blue-soft); border-radius:14px; padding:5px; margin-bottom:22px; }
.acct-tab{ flex:1; border:0; cursor:pointer; background:transparent; border-radius:10px; padding:11px 0;
  font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--blue); transition:background .15s ease, box-shadow .15s ease; }
.acct-tab.is-active{ background:#fff; color:var(--navy); box-shadow:var(--shadow-sm); }

.acct-form{ display:none; }
.acct-form.is-active{ display:block; animation:acctIn .25s ease; }
@keyframes acctIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.acct-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.acct-hint{ color:var(--muted); font-weight:600; font-size:14px; margin-bottom:14px; }

.acct-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:-4px 0 16px; }
.acct-remember{ display:inline-flex; align-items:center; gap:8px; color:var(--text); font-weight:600; font-size:13.5px; cursor:pointer; }
.acct-remember input{ width:16px; height:16px; accent-color:var(--blue); }
.acct-link{ border:0; background:none; cursor:pointer; color:var(--blue); font-weight:800; font-size:13.5px; font-family:var(--font-body); padding:0; }
.acct-link:hover{ text-decoration:underline; }
.acct-back{ display:block; width:100%; text-align:center; margin-top:14px; }

.acct-submit{ width:100%; }
.acct-msg{ font-weight:700; font-size:13.5px; margin-bottom:12px; min-height:1px; }
.acct-msg.is-ok{ color:var(--green-deep); }
.acct-msg.is-err{ color:var(--red); }

.acct-foot{ text-align:center; margin-top:18px; }
.acct-foot a{ color:var(--navy); font-weight:700; font-size:14px; }
.acct-foot a:hover{ color:var(--blue); }

@media (max-width:480px){
  .acct-card{ padding:26px 20px 24px; }
}