@import url('https://fonts.googleapis.com/css2?family=Inter:wght@600;700;800;900&family=Playfair+Display:wght@800;900&family=Pacifico&display=swap');

:root{
  --card-w: clamp(205px, 15.1vw, 286px);
  --card-h: clamp(430px, 54vh, 650px);
  --gap: clamp(18px, 1.4vw, 30px);
  --page-w: min(94vw, 1580px);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;background:#05020e;color:#fff}
body.home-page{height:100vh;overflow:hidden}

/* balanced galaxy */
.galaxy-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:
  radial-gradient(circle at 15% 82%,rgba(255,103,200,.52),transparent 24%),
  radial-gradient(circle at 88% 76%,rgba(172,86,255,.48),transparent 28%),
  radial-gradient(circle at 50% 2%,rgba(62,21,112,.83),transparent 43%),
  linear-gradient(180deg,#05020e 0%,#0d041c 42%,#241150 100%)}
.starfield:before,.starfield:after{content:"";position:absolute;inset:-100px;background-image:radial-gradient(#fff 1px,transparent 1.9px),radial-gradient(#ff87d9 1px,transparent 2px),radial-gradient(#ffd779 1.3px,transparent 2.4px);background-size:86px 86px,133px 133px,188px 188px;animation:starDrift 22s linear infinite;opacity:.72}
.layer-2:before{background-size:54px 54px,112px 112px,164px 164px;filter:blur(1px);opacity:.38;animation-duration:15s}
@keyframes starDrift{to{transform:translateY(-130px)}}
.sparkles{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 9% 13%,#fff 0 2px,transparent 5px),
  radial-gradient(circle at 27% 8%,#ffb3ee 0 2px,transparent 5px),
  radial-gradient(circle at 66% 13%,#fff 0 2px,transparent 5px),
  radial-gradient(circle at 93% 28%,#ffd36b 0 2px,transparent 5px),
  radial-gradient(circle at 79% 86%,#fff 0 2px,transparent 5px),
  radial-gradient(circle at 38% 87%,#ff8bda 0 2px,transparent 5px);
  animation:sparkle 3s ease-in-out infinite alternate}
@keyframes sparkle{from{opacity:.42;filter:drop-shadow(0 0 5px #fff)}to{opacity:1;filter:drop-shadow(0 0 15px #ff76d6)}}
.cloud{position:absolute;pointer-events:none;filter:blur(22px);opacity:.78;background:
  radial-gradient(ellipse at 20% 56%,rgba(255,190,230,.68),transparent 58%),
  radial-gradient(ellipse at 55% 45%,rgba(255,133,211,.45),transparent 63%),
  radial-gradient(ellipse at 88% 58%,rgba(205,135,255,.45),transparent 58%)}
.cloud-left{width:520px;height:210px;left:-130px;bottom:8px;animation:cloudFloat 10s ease-in-out infinite}
.cloud-right{width:590px;height:245px;right:-150px;bottom:72px;animation:cloudFloat 12s ease-in-out infinite reverse}
.cloud-bottom{width:1100px;height:210px;left:50%;bottom:-118px;transform:translateX(-50%);opacity:.62;animation:cloudPulse 8s ease-in-out infinite}
@keyframes cloudFloat{50%{transform:translate(18px,-14px) scale(1.05)}}
@keyframes cloudPulse{50%{opacity:.86;filter:blur(31px)}}

/* login only top right */
.topbar{position:relative;z-index:3;height:58px;display:flex;align-items:flex-start;justify-content:flex-end;padding:14px 28px 0}
.login-pill{border:1px solid rgba(255,123,219,.78);border-radius:999px;color:#fff;text-decoration:none;background:rgba(255,255,255,.06);padding:11px 22px;font-weight:900;box-shadow:inset 0 0 18px rgba(255,255,255,.04),0 0 20px rgba(255,62,201,.25);cursor:pointer}
.hidden{display:none!important}

.page{position:relative;z-index:1;height:calc(100vh - 58px);max-width:1820px;margin:0 auto;padding:0 28px 18px;display:grid;grid-template-rows:auto 1fr auto;align-items:center}
.hero{text-align:center;align-self:start;margin-top:-18px}
.welcome{font-family:Pacifico,cursive;font-size:clamp(30px,2.65vw,50px);line-height:1;color:#ff6ebe;text-shadow:0 0 18px rgba(255,72,188,.72);margin:0 0 8px}
.hero h1{margin:0;font-family:"Playfair Display",Georgia,serif;font-size:clamp(62px,6.05vw,116px);line-height:.9;font-weight:900;letter-spacing:1.5px;background:linear-gradient(90deg,#ffe69a 0%,#ff9a72 28%,#ff70d8 61%,#a575ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 34px rgba(255,100,214,.38)}
.hero p{font-size:clamp(14px,1.18vw,22px);font-weight:900;margin:13px 0 0}.hero p span{color:#ff90d6;margin:0 14px}.role-badge{display:inline-block;border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.1);border-radius:999px;padding:8px 16px;color:#ffd36b;font-weight:900;margin-top:8px}

.cards-stage{align-self:center;width:var(--page-w);margin:0 auto;display:flex;justify-content:center;align-items:flex-end;gap:var(--gap);padding:8px 0 4px}
.card-shell{position:relative;width:var(--card-w);height:var(--card-h);flex:0 0 var(--card-w);overflow:visible;transition:transform .36s cubic-bezier(.18,.88,.22,1.05),opacity .3s,filter .3s;transform-origin:center center;cursor:pointer}
.card-shell img{position:absolute;left:0;right:0;bottom:0;margin:auto;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 18px rgba(255,255,255,.24)) drop-shadow(0 18px 38px rgba(0,0,0,.5))}
.cards-stage:hover .card-shell{opacity:.18;filter:blur(5px) brightness(.42) saturate(.72)}
.cards-stage .card-shell:hover{opacity:1;filter:none;transform:scale(1.18);z-index:50}
.cards-stage .card-shell:hover img{filter:drop-shadow(0 0 40px rgba(255,255,255,.68)) drop-shadow(0 0 80px rgba(255,68,210,.72))}
.card-label{position:absolute;z-index:5;left:6%;top:2%;color:#07101d;text-shadow:0 2px 8px rgba(255,255,255,.45)}
.card-label b{display:block;font-size:clamp(28px,2.05vw,42px);line-height:.95;font-weight:900;color:#ff6a00;text-decoration:underline;text-underline-offset:5px}
.card-label strong{display:block;margin-top:clamp(8px,1vh,16px);font-size:clamp(17px,1.35vw,27px);line-height:1.02;font-weight:900;letter-spacing:-.8px}
.card-label.light{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.72)}.card-label.light b{color:#8a49ff}.card-label.pink b{color:#ff4f91}.card-label.purple b{color:#8a49ff}
.login-chip{position:absolute;right:7%;top:3.2%;z-index:7;text-decoration:none;color:#fff;font-size:clamp(9px,.68vw,12px);font-weight:900;padding:6px 11px;border-radius:999px;background:rgba(15,8,34,.76);border:1px solid rgba(255,255,255,.36);backdrop-filter:blur(9px)}
.card-button{position:absolute;z-index:7;left:10%;right:10%;bottom:2.5%;border:0;border-radius:999px;padding:clamp(9px,1vh,13px) 14px;background:rgba(255,255,255,.9);font-size:clamp(12px,.85vw,15px);font-weight:900;color:#ff6a00;cursor:pointer;box-shadow:0 0 24px rgba(255,255,255,.28)}
.card-button.blue-btn{color:#076cff}.card-button.pink-btn{color:#fff;background:linear-gradient(90deg,#ff6c8d,#d13459)}.card-button.purple-btn{color:#7d3cff}
.hover-copy{position:absolute;left:7%;right:7%;bottom:10%;z-index:8;padding:12px;border-radius:20px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(14px);opacity:0;transform:translateY(18px);transition:.3s}
.card-shell:hover .hover-copy{opacity:1;transform:translateY(0)}.hover-copy h3{margin:0 0 7px;font-size:15px}.hover-copy p{margin:0;color:#f5e9fb;font-size:12px;line-height:1.4}

.value-bar{align-self:end;width:min(88vw,1360px);margin:4px auto 0;display:grid;grid-template-columns:repeat(5,1fr);border:1px solid rgba(255,255,255,.22);border-radius:25px;padding:10px 18px;background:linear-gradient(90deg,rgba(255,255,255,.13),rgba(255,255,255,.055));backdrop-filter:blur(15px);box-shadow:0 0 36px rgba(255,72,205,.25)}
.value-item{display:grid;grid-template-columns:clamp(62px,4.4vw,82px) 1fr;align-items:center;column-gap:12px;padding:0 14px;border-right:1px solid rgba(255,255,255,.17)}
.value-item:last-child{border-right:0}.value-item img{grid-row:1/3;width:clamp(62px,4.3vw,82px);height:clamp(62px,4.3vw,82px);object-fit:contain;filter:drop-shadow(0 0 12px rgba(255,255,255,.55))}
.value-item b{font-size:clamp(17px,1.25vw,23px)}.value-item em{font-style:normal;color:#e8dff5;font-size:clamp(12px,.86vw,14px)}

/* login/admin */
.login-page,.admin-page{min-height:100vh}.login-layout{position:relative;z-index:2;min-height:100vh;display:grid;place-items:center;padding:30px}.back-link{position:absolute;top:24px;left:28px;color:#ffd36b;text-decoration:none;font-weight:900}.login-panel{width:min(460px,92vw);padding:34px;border-radius:32px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);box-shadow:0 0 55px rgba(255,84,211,.35);backdrop-filter:blur(18px)}.login-mark{text-align:center;font-size:64px;color:#ff79d5;text-shadow:0 0 18px #ff4fb7}.login-panel h1{text-align:center;margin:0 0 8px;font-size:34px;background:linear-gradient(90deg,#ffd36b,#ff6bd2,#8b5cf6);-webkit-background-clip:text;color:transparent}.login-panel p{text-align:center;color:#eadff5}.login-panel label{display:block;margin-top:15px;font-weight:900}.login-panel input:not([type=checkbox]){width:100%;margin-top:8px;padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.25);color:#fff;font-size:16px}.remember{display:flex!important;align-items:center;gap:10px}.login-panel button{width:100%;margin-top:22px;padding:15px;border:0;border-radius:999px;background:linear-gradient(90deg,#ff6ab8,#8b5cf6);color:#fff;font-weight:900;font-size:17px;cursor:pointer}#loginMessage{margin-top:14px;min-height:22px;color:#ffd36b;font-weight:800}.login-panel small{display:block;margin-top:20px;color:#e7d9f7}
.admin-page{display:grid;grid-template-columns:290px 1fr;background:#0d061d}.admin-sidebar{min-height:100vh;padding:24px;background:rgba(255,255,255,.08);border-right:1px solid rgba(255,255,255,.14)}.admin-logo{display:flex;gap:12px;align-items:center;font-size:34px;color:#ff7bd8;font-weight:900}.admin-logo span{font-size:20px;line-height:1.05;color:#ffd36b}.admin-user{margin:24px 0;padding:14px;border-radius:18px;background:rgba(255,255,255,.09)}#adminMenu a,.admin-sidebar button,.admin-sidebar a{display:block;width:100%;text-align:left;margin:9px 0;padding:12px 14px;border-radius:14px;text-decoration:none;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);font-weight:800}.admin-sidebar button{cursor:pointer;background:rgba(255,75,130,.18)}.admin-main{padding:38px}.admin-main h1{font-size:52px;margin:0}.admin-main p{color:#dfd2ee}.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:24px}.dash-card{padding:22px;border-radius:22px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);box-shadow:0 0 25px rgba(255,83,210,.15)}.dash-card b{display:block;font-size:20px;margin-bottom:8px;color:#ffd36b}

@media(max-height:820px){:root{--card-h:43vh;--card-w:clamp(155px,12.2vw,215px);--gap:18px}.hero h1{font-size:clamp(48px,4.9vw,82px)}.welcome{font-size:28px}.hero p{margin-top:6px}.value-bar{padding:8px 16px}.value-item img{width:56px;height:56px}.value-item{grid-template-columns:56px 1fr}.topbar{height:48px}.page{height:calc(100vh - 48px)}}
@media(max-width:1100px){body.home-page{height:auto;overflow:auto}.page{height:auto}.cards-stage{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));width:min(92vw,760px);gap:28px}.card-shell{width:100%;height:580px}.cards-stage .card-shell:hover{transform:scale(1.06)}.value-bar{grid-template-columns:1fr;gap:8px}.value-item{border-right:0;border-bottom:1px solid rgba(255,255,255,.14);padding:9px}.value-item:last-child{border-bottom:0}}
@media(max-width:620px){.hero h1{font-size:42px}.welcome{font-size:32px}.hero p{font-size:13px}.cards-stage{display:flex;overflow-x:auto;justify-content:flex-start;width:100%;scroll-snap-type:x mandatory;padding-bottom:20px}.card-shell{min-width:78vw;width:78vw;height:min(560px,70vh);scroll-snap-align:center}.cards-stage:hover .card-shell{opacity:1;filter:none}.cards-stage .card-shell:hover{transform:scale(1.03)}}


/* =========================================================
   V7 GITHUB READY - Production responsive balance
   Mục tiêu:
   - Laptop: card lớn hơn, hero nhỏ lại, footer cân đối.
   - Desktop lớn: không bị lọt thỏm.
   - Mobile: từng card dạng carousel, dễ xem trên điện thoại.
   ========================================================= */

:root{
  --card-w: clamp(230px, 16.4vw, 315px);
  --card-h: clamp(505px, 60vh, 735px);
  --gap: clamp(14px, 1.15vw, 24px);
  --page-w: min(96vw, 1680px);
}

/* Không ép quá thấp; cho landing thở nhưng vẫn vừa màn laptop */
body.home-page{
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.topbar{
  height: 54px;
  padding: 12px clamp(18px, 2vw, 34px) 0;
}

.login-pill{
  padding: 10px 20px;
  font-size: clamp(13px, .9vw, 16px);
}

/* Tỷ lệ lại: hero gọn hơn, card là trung tâm */
.page{
  min-height: calc(100vh - 54px);
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(10px, 1.15vh, 18px);
  padding: 0 clamp(14px, 2vw, 34px) 18px;
}

.hero{
  margin-top: clamp(-22px, -1.8vw, -6px);
  flex: 0 0 auto;
}

.welcome{
  font-size: clamp(26px, 2.25vw, 42px);
  margin-bottom: 2px;
}

.hero h1{
  font-size: clamp(54px, 5.25vw, 104px);
  line-height: .92;
}

.hero p{
  font-size: clamp(13px, 1.02vw, 19px);
  margin: clamp(6px, .8vh, 10px) 0 0;
}

.cards-stage{
  width: var(--page-w);
  flex: 1 1 auto;
  align-items: center;
  padding: 0;
  min-height: 0;
}

.card-shell{
  width: var(--card-w);
  height: var(--card-h);
  flex: 0 0 var(--card-w);
}

/* Hover vẫn đủ đã, nhưng không phá bố cục quá mạnh */
.cards-stage .card-shell:hover{
  transform: scale(1.24);
}

.card-label{
  left: 6%;
  top: 2.5%;
}

.card-label b{
  font-size: clamp(30px, 2.15vw, 46px);
}

.card-label strong{
  font-size: clamp(18px, 1.42vw, 29px);
}

.card-button{
  bottom: 3.2%;
  padding: clamp(10px, 1.05vh, 14px) 14px;
}

.login-chip{
  top: 3.4%;
}

/* Footer đẹp hơn: icon lớn hơn nhưng tổng thể gọn */
.value-bar{
  flex: 0 0 auto;
  width: min(94vw, 1480px);
  margin: 0 auto;
  padding: clamp(10px, 1.05vh, 14px) clamp(14px, 1.8vw, 22px);
}

.value-item{
  grid-template-columns: clamp(68px, 4.6vw, 90px) 1fr;
  column-gap: clamp(10px, .9vw, 14px);
}

.value-item img{
  width: clamp(68px, 4.6vw, 90px);
  height: clamp(68px, 4.6vw, 90px);
}

.value-item b{
  font-size: clamp(17px, 1.22vw, 24px);
}

.value-item em{
  font-size: clamp(11px, .82vw, 14px);
}

/* Laptop phổ biến 1366-1600px: tăng card, giảm chữ hero */
@media (min-width: 1200px) and (max-width: 1699px){
  :root{
    --card-w: clamp(220px, 15.8vw, 265px);
    --card-h: clamp(500px, 58vh, 640px);
    --gap: clamp(14px, 1.1vw, 20px);
    --page-w: min(95vw, 1420px);
  }

  .hero h1{
    font-size: clamp(58px, 4.8vw, 86px);
  }

  .welcome{
    font-size: clamp(28px, 2.1vw, 38px);
  }

  .hero p{
    font-size: clamp(13px, .92vw, 17px);
  }

  .value-bar{
    width: min(92vw, 1280px);
  }

  .value-item img{
    width: clamp(62px, 4.1vw, 76px);
    height: clamp(62px, 4.1vw, 76px);
  }
}

/* Màn 27-32 inch 1080p/1440p: bố cục cinematic, không lọt thỏm */
@media (min-width: 1700px){
  :root{
    --card-w: clamp(265px, 15.2vw, 335px);
    --card-h: clamp(590px, 62vh, 800px);
    --gap: clamp(20px, 1.25vw, 34px);
    --page-w: min(94vw, 1780px);
  }

  .hero h1{
    font-size: clamp(82px, 5.1vw, 120px);
  }

  .welcome{
    font-size: clamp(42px, 2.5vw, 58px);
  }

  .value-bar{
    width: min(90vw, 1540px);
  }
}

/* Chiều cao thấp: ưu tiên thấy đủ footer */
@media (max-height: 820px) and (min-width: 900px){
  :root{
    --card-w: clamp(185px, 13.2vw, 240px);
    --card-h: clamp(405px, 48vh, 535px);
    --gap: clamp(14px, 1.1vw, 20px);
  }

  .topbar{
    height: 44px;
    padding-top: 8px;
  }

  .page{
    min-height: calc(100vh - 44px);
    gap: 8px;
    padding-bottom: 10px;
  }

  .hero{
    margin-top: -14px;
  }

  .welcome{
    font-size: clamp(24px, 1.8vw, 32px);
  }

  .hero h1{
    font-size: clamp(48px, 4.4vw, 76px);
  }

  .hero p{
    margin-top: 4px;
    font-size: clamp(12px, .8vw, 15px);
  }

  .value-bar{
    padding: 7px 14px;
  }

  .value-item img{
    width: 54px;
    height: 54px;
  }

  .value-item{
    grid-template-columns: 54px 1fr;
  }

  .value-item b{
    font-size: 16px;
  }

  .value-item em{
    font-size: 11px;
  }
}

/* Tablet: 2 cột đẹp */
@media (max-width: 1100px){
  body.home-page{
    height: auto;
    overflow-y: auto;
  }

  .topbar{
    height: 58px;
  }

  .page{
    min-height: auto;
    height: auto;
    display: block;
    padding-bottom: 28px;
  }

  .hero{
    margin-top: 0;
    padding-top: 4px;
    margin-bottom: 22px;
  }

  .cards-stage{
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    width: min(92vw, 820px);
    gap: 28px;
  }

  .card-shell{
    width: 100%;
    height: clamp(560px, 64vh, 720px);
  }

  .cards-stage .card-shell:hover{
    transform: scale(1.05);
  }

  .value-bar{
    margin-top: 26px;
    grid-template-columns: 1fr;
    gap: 6px;
    width: min(92vw, 820px);
  }

  .value-item{
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.14);
    padding: 9px 12px;
  }

  .value-item:last-child{
    border-bottom: none;
  }
}

/* Mobile: xem rõ trên điện thoại bằng carousel */
@media (max-width: 620px){
  .topbar{
    height: 56px;
    justify-content: center;
    padding: 12px 12px 0;
  }

  .login-pill{
    padding: 10px 18px;
    font-size: 14px;
  }

  .hero{
    padding: 8px 10px 0;
    margin-bottom: 14px;
  }

  .welcome{
    font-size: 30px;
  }

  .hero h1{
    font-size: clamp(38px, 12vw, 52px);
    line-height: .96;
  }

  .hero p{
    font-size: 12px;
    line-height: 1.45;
  }

  .hero p span{
    margin: 0 6px;
  }

  .cards-stage{
    display: flex;
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 18px;
    padding: 8px 18px 24px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .card-shell{
    min-width: 82vw;
    width: 82vw;
    height: min(610px, 72vh);
    scroll-snap-align: center;
  }

  .cards-stage:hover .card-shell{
    opacity: 1;
    filter: none;
  }

  .cards-stage .card-shell:hover{
    transform: scale(1.02);
  }

  .card-label b{
    font-size: 34px;
  }

  .card-label strong{
    font-size: 22px;
  }

  .value-bar{
    width: calc(100vw - 28px);
    margin-top: 10px;
    padding: 10px;
  }

  .value-item{
    grid-template-columns: 62px 1fr;
  }

  .value-item img{
    width: 62px;
    height: 62px;
  }

  .value-item b{
    font-size: 18px;
  }

  .value-item em{
    font-size: 12px;
  }
}


/* =========================================================
   V8 CLEAN CARDS + SINGLE LINE HERO
   ========================================================= */

.hero{
  margin-top: clamp(-14px, -1.1vw, -4px) !important;
  margin-bottom: clamp(8px, 1vh, 16px) !important;
}

.hero-line{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 28px);
  flex-wrap: wrap;
  text-align: center;
}

.welcome{
  display: none !important;
}

.welcome-inline{
  font-family: Pacifico, cursive;
  font-size: clamp(24px, 2.15vw, 42px);
  color: #ff6ebe;
  text-shadow: 0 0 18px rgba(255,72,188,.72);
  line-height: 1;
  white-space: nowrap;
}

.hero h1{
  font-size: clamp(44px, 4.7vw, 94px) !important;
  line-height: .95 !important;
  margin: 0 !important;
}

.hero p{
  text-align: center !important;
  margin: clamp(6px, .8vh, 12px) auto 0 !important;
  font-size: clamp(13px, 1.05vw, 19px) !important;
}

/* Bỏ toàn bộ nội dung đề mục trên card */
.card-label,
.hover-copy{
  display: none !important;
}

.card-shell img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.card-shell{
  overflow: visible !important;
}

.card-button{
  opacity: .96;
}

/* Giữ đăng nhập nhỏ trên card 03/04 */
.login-chip{
  font-size: clamp(10px, .72vw, 12px) !important;
}

.cards-stage{
  margin-top: clamp(4px, .8vh, 14px) !important;
}

@media (min-width: 1200px) and (max-width: 1699px){
  .hero h1{
    font-size: clamp(52px, 4.4vw, 82px) !important;
  }

  .welcome-inline{
    font-size: clamp(24px, 2vw, 36px) !important;
  }
}

@media (min-width: 1700px){
  .hero h1{
    font-size: clamp(72px, 4.8vw, 110px) !important;
  }

  .welcome-inline{
    font-size: clamp(34px, 2.25vw, 52px) !important;
  }
}

@media (max-height: 820px) and (min-width: 900px){
  .hero-line{
    gap: 14px;
  }

  .hero h1{
    font-size: clamp(44px, 4.1vw, 72px) !important;
  }

  .welcome-inline{
    font-size: clamp(22px, 1.7vw, 30px) !important;
  }
}

@media (max-width: 620px){
  .hero-line{
    gap: 6px;
  }

  .welcome-inline{
    font-size: 25px !important;
  }

  .hero h1{
    font-size: clamp(34px, 10vw, 48px) !important;
  }

  .hero p{
    max-width: 92vw;
    line-height: 1.45;
  }
}


/* =========================================================
   V9 ADMIN CLOCK + DOMAIN ECOSYSTEM
   ========================================================= */

.hero{
  text-align:center !important;
}

.hero-line{
  width:100%;
}

.hero p{
  display:block;
  width:100%;
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.clock-gateway{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:clamp(58px,4.8vw,76px);
  height:clamp(58px,4.8vw,76px);
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index:30;
  filter:drop-shadow(0 0 18px rgba(255,204,116,.6));
  transition:transform .24s ease, filter .24s ease;
}
.clock-gateway:hover{
  transform:scale(1.08) rotate(1deg);
  filter:drop-shadow(0 0 26px rgba(255,96,207,.85));
}
.clock-gateway img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:22px;
}
.clock-gateway span{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-48%);
  font-size:clamp(10px,.8vw,13px);
  font-weight:900;
  color:#ffd879;
  text-shadow:0 1px 3px #000,0 0 8px rgba(255,214,122,.9);
  letter-spacing:.5px;
  pointer-events:none;
}

.domain-panel{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:clamp(8px,1vh,14px) auto 0;
  max-width:min(92vw,1200px);
}
.domain-panel a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.065);
  color:#f8eaff;
  text-decoration:none;
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
  box-shadow:0 0 16px rgba(255,78,205,.12);
}
.domain-panel a:hover{
  color:#ffd36b;
  border-color:rgba(255,211,107,.5);
  box-shadow:0 0 22px rgba(255,211,107,.25);
}
.domain-panel .admin-only,
.domain-panel .domain-admin,
.domain-panel .domain-vault{
  display:none;
}
body.role-admin .domain-panel .admin-only,
body.role-admin .domain-panel .domain-admin{
  display:inline-flex;
}
body.vault-enabled .domain-panel .domain-vault{
  display:inline-flex;
}

@media (max-height:820px) and (min-width:900px){
  .domain-panel{ margin-top:6px; }
  .domain-panel a{ padding:5px 10px; font-size:11px; }
}

@media(max-width:620px){
  .clock-gateway{ width:58px; height:58px; }
  .domain-panel{
    justify-content:flex-start;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding:0 12px 6px;
  }
  .domain-panel a{ flex:0 0 auto; }
}

/* V9 module template pages */
.module-page{ min-height:100vh; }
.module-shell{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:32px;
}
.module-card{
  width:min(760px,92vw);
  padding:42px;
  border-radius:34px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(18px);
  box-shadow:0 0 55px rgba(255,84,211,.32);
  text-align:center;
}
.module-domain{
  margin:0 0 8px;
  color:#ffd36b;
  font-weight:900;
  letter-spacing:1px;
}
.module-card h1{
  margin:0;
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(46px,7vw,86px);
  background:linear-gradient(90deg,#ffe69a,#ff70d8,#a575ff);
  -webkit-background-clip:text;
  color:transparent;
}
.module-card p{
  color:#f1e7ff;
  font-size:18px;
  line-height:1.55;
}
.module-actions{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:26px;
}
.module-actions a{
  padding:12px 20px;
  border-radius:999px;
  text-decoration:none;
  color:#fff;
  font-weight:900;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
}


/* =========================================================
   V10 STAR HIDDEN LOGIN + HERO CENTER + GLOW BG
   ========================================================= */

/* Ẩn toàn bộ domain phụ trên trang chính, vẫn giữ source */
.domain-panel,
.domain-panel.hidden-domains{
  display:none !important;
}

/* Header giống ảnh chốt: glow mạnh hơn, dòng phụ canh giữa dưới THIENKIM */
.hero{
  text-align:center !important;
  width:100% !important;
}

.hero-line{
  display:flex !important;
  align-items:baseline !important;
  justify-content:center !important;
  gap:clamp(18px, 2vw, 34px) !important;
  width:100% !important;
  text-align:center !important;
}

.hero h1{
  text-align:center !important;
  margin:0 !important;
  filter:drop-shadow(0 0 14px rgba(255,106,216,.45)) drop-shadow(0 0 28px rgba(255,213,132,.22));
}

.welcome-inline{
  filter:drop-shadow(0 0 10px rgba(255,97,199,.75));
}

.hero p{
  width:100% !important;
  max-width:100% !important;
  text-align:center !important;
  margin:clamp(6px,.75vh,12px) auto 0 !important;
  display:block !important;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.22));
}

/* Nền glow kiểu ảnh mẫu */
.galaxy-bg{
  background:
    radial-gradient(circle at 50% 8%, rgba(255,114,214,.28), transparent 18%),
    radial-gradient(circle at 62% 15%, rgba(255,206,116,.17), transparent 20%),
    radial-gradient(circle at 20% 20%, rgba(255,91,194,.20), transparent 24%),
    radial-gradient(circle at 83% 62%, rgba(169,89,255,.42), transparent 28%),
    radial-gradient(circle at 16% 82%, rgba(255,103,200,.48), transparent 25%),
    linear-gradient(180deg,#06020f 0%,#120621 42%,#251154 100%) !important;
}

.galaxy-bg:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.06) 50%, transparent 100%),
    radial-gradient(ellipse at 50% 12%, rgba(255,174,232,.20), transparent 38%);
  mix-blend-mode:screen;
  opacity:.9;
}

.sparkles{
  opacity:.95 !important;
  animation:sparkle 2.2s ease-in-out infinite alternate !important;
}

/* Bỏ clock cũ */
.clock-gateway{
  display:none !important;
}

/* Nút ngôi sao xoay làm cổng admin ẩn */
.star-gateway{
  position:relative;
  display:grid;
  place-items:center;
  width:clamp(58px,4.7vw,78px);
  height:clamp(58px,4.7vw,78px);
  padding:0;
  border:0;
  border-radius:22px;
  background:rgba(255,255,255,.035);
  cursor:pointer;
  overflow:hidden;
  z-index:40;
  box-shadow:0 0 18px rgba(255,95,209,.35), inset 0 0 16px rgba(255,255,255,.07);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.star-gateway:hover{
  transform:scale(1.08) rotate(2deg);
  box-shadow:0 0 28px rgba(255,95,209,.82),0 0 45px rgba(255,211,105,.42), inset 0 0 20px rgba(255,255,255,.10);
  filter:saturate(1.2);
}

.star-gateway video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.18);
}

.star-gateway:after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 50%, transparent 38%, rgba(0,0,0,.22) 100%);
  pointer-events:none;
}

.star-gateway span{
  position:absolute;
  left:50%;
  bottom:4px;
  transform:translateX(-50%);
  font-size:9px;
  font-weight:900;
  color:#ffd36b;
  text-shadow:0 1px 3px #000, 0 0 8px rgba(255,211,107,.9);
  opacity:.72;
  pointer-events:none;
}

/* Nếu trình duyệt chặn video, dùng glow icon fallback */
.star-gateway:not(:has(video))::before{
  content:"✦";
  font-size:42px;
  color:#ff72d3;
  text-shadow:0 0 16px #ff72d3,0 0 26px #ffd36b;
  animation:starSpin 6s linear infinite;
}

@keyframes starSpin{
  to{ transform:rotate(360deg); }
}

/* Mobile: nút sao nhỏ và gọn */
@media(max-width:620px){
  .hero-line{
    flex-direction:column;
    gap:4px !important;
  }

  .star-gateway{
    width:56px;
    height:56px;
    border-radius:18px;
  }

  .star-gateway span{
    font-size:8px;
  }
}


/* =========================================================
   TKver1.0 FINAL PRODUCTION
   - Hidden Admin Star icon
   - Hero/subtitle centered
   - Domains hidden on portal
   - Glow galaxy background
   - Responsive laptop/mobile
   ========================================================= */

.domain-panel,
.domain-panel.hidden-domains{
  display:none !important;
}

/* Hero alignment */
.hero{
  text-align:center !important;
  width:100% !important;
}

.hero-line{
  width:100% !important;
  display:flex !important;
  align-items:baseline !important;
  justify-content:center !important;
  gap:clamp(16px,1.8vw,32px) !important;
  text-align:center !important;
}

.hero h1{
  text-align:center !important;
  margin:0 !important;
  filter:drop-shadow(0 0 14px rgba(255,106,216,.45)) drop-shadow(0 0 28px rgba(255,213,132,.22));
}

.welcome-inline{
  filter:drop-shadow(0 0 10px rgba(255,97,199,.75));
}

.hero p{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  text-align:center !important;
  margin:clamp(6px,.75vh,12px) auto 0 !important;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.22));
}

/* More luminous galaxy background */
.galaxy-bg{
  background:
    radial-gradient(circle at 50% 8%, rgba(255,114,214,.28), transparent 18%),
    radial-gradient(circle at 62% 15%, rgba(255,206,116,.17), transparent 20%),
    radial-gradient(circle at 20% 20%, rgba(255,91,194,.20), transparent 24%),
    radial-gradient(circle at 83% 62%, rgba(169,89,255,.42), transparent 28%),
    radial-gradient(circle at 16% 82%, rgba(255,103,200,.48), transparent 25%),
    linear-gradient(180deg,#06020f 0%,#120621 42%,#251154 100%) !important;
}

.galaxy-bg:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.06) 50%, transparent 100%),
    radial-gradient(ellipse at 50% 12%, rgba(255,174,232,.20), transparent 38%);
  mix-blend-mode:screen;
  opacity:.9;
}

.sparkles{
  opacity:.95 !important;
  animation:sparkle 2.2s ease-in-out infinite alternate !important;
}

/* Remove old login/clock if any */
.clock-gateway,
#topLoginBtn{
  display:none !important;
}

/* Hidden Admin Star Gateway */
.star-gateway{
  position:relative;
  display:grid;
  place-items:center;
  width:clamp(54px,4.5vw,72px);
  height:clamp(54px,4.5vw,72px);
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  z-index:40;
  opacity:.82;
  filter:
    drop-shadow(0 0 10px rgba(80,222,255,.55))
    drop-shadow(0 0 18px rgba(255,211,105,.45));
  transition:transform .25s ease, filter .25s ease, opacity .25s ease;
  animation:starAdminRotate 18s linear infinite, starAdminGlow 2.8s ease-in-out infinite alternate;
}

.star-gateway:hover{
  opacity:1;
  transform:scale(1.13);
  filter:
    drop-shadow(0 0 18px rgba(80,222,255,.95))
    drop-shadow(0 0 34px rgba(255,211,105,.88))
    drop-shadow(0 0 48px rgba(255,95,209,.55));
}

.star-gateway img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  border-radius:50%;
}

.star-gateway span,
.star-gateway video{
  display:none !important;
}

@keyframes starAdminRotate{
  from{ rotate:0deg; }
  to{ rotate:360deg; }
}

@keyframes starAdminGlow{
  from{
    filter:
      drop-shadow(0 0 8px rgba(80,222,255,.55))
      drop-shadow(0 0 16px rgba(255,211,105,.42));
  }
  to{
    filter:
      drop-shadow(0 0 18px rgba(80,222,255,.95))
      drop-shadow(0 0 32px rgba(255,211,105,.80));
  }
}

/* Keep cards clean */
.card-label,
.hover-copy{
  display:none !important;
}

/* Laptop balanced final */
@media (min-width:1200px) and (max-width:1699px){
  .hero h1{
    font-size:clamp(52px,4.4vw,82px) !important;
  }
  .welcome-inline{
    font-size:clamp(24px,2vw,36px) !important;
  }
}

/* Large desktop */
@media (min-width:1700px){
  .hero h1{
    font-size:clamp(72px,4.8vw,110px) !important;
  }
  .welcome-inline{
    font-size:clamp(34px,2.25vw,52px) !important;
  }
}

/* Mobile */
@media(max-width:620px){
  .hero-line{
    flex-direction:column;
    gap:4px !important;
  }
  .star-gateway{
    width:52px;
    height:52px;
  }
}


/* =========================================================
   TKver1.1 FINAL PATCH
   - Star icon admin gateway only
   - Subtitle centered exactly below THIENKIM UNIVERSE
   - No Admin text, no clock on portal
   - Clock appears in admin login panel
   ========================================================= */

.domain-panel,
.domain-panel.hidden-domains{
  display:none !important;
}

.hero{
  text-align:center !important;
  width:100% !important;
}

.hero-line{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:clamp(18px,2vw,38px) !important;
  width:100% !important;
  text-align:center !important;
}

.title-stack{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

.title-stack h1,
.hero h1{
  text-align:center !important;
  margin:0 !important;
  line-height:.92 !important;
  filter:drop-shadow(0 0 14px rgba(255,106,216,.45)) drop-shadow(0 0 28px rgba(255,213,132,.22));
}

.title-stack p,
.hero .title-stack p{
  display:block !important;
  width:100% !important;
  text-align:center !important;
  margin:clamp(7px,.8vh,13px) auto 0 !important;
  font-size:clamp(13px,1.05vw,19px) !important;
  font-weight:900 !important;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.22));
}

.hero > p{
  display:none !important;
}

.welcome-inline{
  align-self:flex-start !important;
  margin-top:clamp(7px,.65vw,14px) !important;
  filter:drop-shadow(0 0 10px rgba(255,97,199,.75));
}

.clock-gateway,
#topLoginBtn{
  display:none !important;
}

/* Top-right hidden admin star */
.star-gateway{
  position:relative !important;
  display:grid !important;
  place-items:center !important;
  width:clamp(48px,4vw,64px) !important;
  height:clamp(48px,4vw,64px) !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  cursor:pointer !important;
  z-index:50 !important;
  opacity:.78 !important;
  filter:
    drop-shadow(0 0 8px rgba(80,222,255,.55))
    drop-shadow(0 0 16px rgba(255,211,105,.42)) !important;
  transition:transform .25s ease, filter .25s ease, opacity .25s ease !important;
  animation:tkStarRotate 20s linear infinite, tkStarGlow 3s ease-in-out infinite alternate !important;
}

.star-gateway:hover{
  opacity:1 !important;
  transform:scale(1.15) !important;
  filter:
    drop-shadow(0 0 18px rgba(80,222,255,.95))
    drop-shadow(0 0 34px rgba(255,211,105,.88))
    drop-shadow(0 0 48px rgba(255,95,209,.55)) !important;
}

.star-gateway img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
  border-radius:50% !important;
}

.star-gateway span,
.star-gateway video{
  display:none !important;
}

@keyframes tkStarRotate{
  from{ rotate:0deg; }
  to{ rotate:360deg; }
}

@keyframes tkStarGlow{
  from{
    filter:
      drop-shadow(0 0 7px rgba(80,222,255,.50))
      drop-shadow(0 0 14px rgba(255,211,105,.38));
  }
  to{
    filter:
      drop-shadow(0 0 16px rgba(80,222,255,.92))
      drop-shadow(0 0 30px rgba(255,211,105,.78));
  }
}

/* Login admin clock */
.admin-clock-row{
  margin:12px 0 8px;
  padding:10px 14px;
  border-radius:16px;
  text-align:center;
  font-weight:900;
  color:#ffd36b;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 0 12px rgba(255,255,255,.04);
}

/* Mobile: stack Welcome above title so subtitle stays centered under title */
@media(max-width:620px){
  .hero-line{
    flex-direction:column !important;
    align-items:center !important;
    gap:5px !important;
  }

  .welcome-inline{
    align-self:center !important;
    margin-top:0 !important;
  }

  .star-gateway{
    width:46px !important;
    height:46px !important;
  }
}


/* TKver1.2 PATCH - Clean transparent admin star + clean login */
.star-gateway{
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  border-radius: 0 !important;
  opacity: .86 !important;
}

.star-gateway img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.star-gateway:before,
.star-gateway:after{
  display: none !important;
  content: none !important;
}

.star-gateway:hover{
  transform: scale(1.15) !important;
}

.login-panel #loginHint,
.login-panel small{
  display: none !important;
}


/* =========================================================
   TKver1.4 - UNIFIED LOGIN EXPERIENCE
   - Logo ngôi sao 8 cánh chính giữa trên form
   - Glow xanh-vàng đồng bộ Portal
   - Animation xoay chậm 20s
   - Admin / VIP / Sales login đồng bộ
   ========================================================= */

.unified-login-panel{
  position:relative !important;
  overflow:visible !important;
  text-align:center !important;
  padding-top:54px !important;
  border-radius:34px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,211,105,.15), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.075)) !important;
  box-shadow:
    0 0 60px rgba(255,84,211,.36),
    0 0 90px rgba(80,222,255,.12),
    inset 0 0 20px rgba(255,255,255,.05) !important;
}

.login-star-logo{
  position:absolute;
  left:50%;
  top:0;
  transform:translate(-50%, -48%);
  width:clamp(82px, 7vw, 118px);
  height:clamp(82px, 7vw, 118px);
  border:0;
  padding:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  display:grid;
  place-items:center;
  filter:
    drop-shadow(0 0 12px rgba(80,222,255,.68))
    drop-shadow(0 0 22px rgba(255,211,105,.55));
  animation:loginStarRotate 20s linear infinite, loginStarGlow 2.8s ease-in-out infinite alternate;
  z-index:5;
}

.login-star-logo:hover{
  animation-play-state:running;
  transform:translate(-50%, -48%) scale(1.15);
  filter:
    drop-shadow(0 0 22px rgba(80,222,255,.98))
    drop-shadow(0 0 38px rgba(255,211,105,.92))
    drop-shadow(0 0 54px rgba(255,95,209,.62));
}

.login-star-logo.pulse{
  animation:loginStarPulse .65s ease both;
}

.login-star-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:transparent;
}

@keyframes loginStarRotate{
  from{ rotate:0deg; }
  to{ rotate:360deg; }
}

@keyframes loginStarGlow{
  from{
    filter:
      drop-shadow(0 0 10px rgba(80,222,255,.58))
      drop-shadow(0 0 18px rgba(255,211,105,.42));
  }
  to{
    filter:
      drop-shadow(0 0 20px rgba(80,222,255,.95))
      drop-shadow(0 0 34px rgba(255,211,105,.84));
  }
}

@keyframes loginStarPulse{
  0%{ transform:translate(-50%, -48%) scale(1); }
  50%{ transform:translate(-50%, -48%) scale(1.22); }
  100%{ transform:translate(-50%, -48%) scale(1); }
}

.login-mode-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:6px auto 10px;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid rgba(255,211,105,.35);
  color:#ffd36b;
  background:rgba(255,255,255,.07);
  box-shadow:0 0 18px rgba(255,211,105,.12);
  font-size:12px;
  font-weight:900;
  letter-spacing:.7px;
}

.unified-login-panel h1{
  margin:0 0 8px !important;
  font-family:"Playfair Display", Georgia, serif !important;
  font-size:clamp(32px, 4vw, 48px) !important;
  line-height:.95 !important;
  background:linear-gradient(90deg,#ffe69a,#ff70d8,#a575ff) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  filter:drop-shadow(0 0 15px rgba(255,106,216,.25));
}

.admin-clock-row{
  margin:12px auto 12px !important;
  width:max-content;
  min-width:150px;
  padding:10px 16px !important;
  border-radius:999px !important;
  text-align:center !important;
  font-weight:900 !important;
  color:#ffd36b !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    inset 0 0 12px rgba(255,255,255,.04),
    0 0 18px rgba(255,211,105,.10) !important;
}

.unified-login-form{
  text-align:left;
}

.login-panel #loginHint,
.login-panel small{
  display:none !important;
}

.login-message{
  margin-top:14px;
  min-height:22px;
  color:#ffd36b;
  font-weight:800;
  text-align:center;
}

.login-message.error{
  color:#ff8ca9;
}

.login-message.success{
  color:#9dffcf;
}

.login-submit{
  position:relative;
  overflow:hidden;
}

.login-submit:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent);
  transform:translateX(-100%);
  transition:.55s ease;
}

.login-submit:hover:before{
  transform:translateX(100%);
}

@media(max-width:620px){
  .unified-login-panel{
    padding-top:50px !important;
  }

  .login-star-logo{
    width:86px;
    height:86px;
  }

  .unified-login-panel h1{
    font-size:32px !important;
  }
}


/* =========================================================
   TKver1.5 - SMALL CENTER ADMIN STAR IN LOGIN
   - Ngôi sao nhỏ nằm giữa dưới chữ THIENKIM UNIVERSE
   - Không xoay liên tục gây mất tập trung
   - Hover phóng 115% + nghiêng nhẹ
   - Click ở VIP/Sales vẫn chuyển admin gateway
   ========================================================= */

.unified-login-panel{
  padding-top:34px !important;
}

.login-star-logo.small-center-star,
.login-star-logo{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  display:grid !important;
  place-items:center !important;
  width:56px !important;
  height:56px !important;
  margin:10px auto 8px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  cursor:pointer !important;
  z-index:5 !important;
  opacity:.88 !important;
  filter:
    drop-shadow(0 0 8px rgba(80,222,255,.58))
    drop-shadow(0 0 14px rgba(255,211,105,.42)) !important;
  animation:loginStarBreath 3.6s ease-in-out infinite alternate !important;
  transition:transform .25s ease, filter .25s ease, opacity .25s ease !important;
}

.login-star-logo.small-center-star:hover,
.login-star-logo:hover{
  transform:scale(1.15) rotate(18deg) !important;
  opacity:1 !important;
  filter:
    drop-shadow(0 0 15px rgba(80,222,255,.90))
    drop-shadow(0 0 28px rgba(255,211,105,.78))
    drop-shadow(0 0 36px rgba(255,95,209,.45)) !important;
}

.login-star-logo.small-center-star.pulse,
.login-star-logo.pulse{
  animation:loginStarPulseSmall .55s ease both !important;
}

.login-star-logo.small-center-star img,
.login-star-logo img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
  background:transparent !important;
  border-radius:0 !important;
}

@keyframes loginStarBreath{
  from{
    opacity:.74;
    filter:
      drop-shadow(0 0 6px rgba(80,222,255,.42))
      drop-shadow(0 0 12px rgba(255,211,105,.32));
  }
  to{
    opacity:.96;
    filter:
      drop-shadow(0 0 12px rgba(80,222,255,.75))
      drop-shadow(0 0 22px rgba(255,211,105,.58));
  }
}

@keyframes loginStarPulseSmall{
  0%{ transform:scale(1); }
  45%{ transform:scale(1.18); }
  100%{ transform:scale(1); }
}

.unified-login-panel h1{
  margin-bottom:0 !important;
}

.login-mode-chip{
  margin-top:4px !important;
}

/* Không dùng keyframe xoay cũ trên login */
@keyframes loginStarRotate{
  from{ rotate:0deg; }
  to{ rotate:0deg; }
}

@media(max-width:620px){
  .login-star-logo.small-center-star,
  .login-star-logo{
    width:48px !important;
    height:48px !important;
    margin:8px auto 6px !important;
  }

  .unified-login-panel{
    padding-top:30px !important;
  }
}


/* =========================================================
   TKver1.6 - Swap Star and Login Mode Position
   - Ngôi sao nằm tại vị trí chữ KHO BÁU VIP / ADMIN GATEWAY cũ.
   - Chữ KHO BÁU VIP / ADMIN GATEWAY / TẠP HÓA CHỐT ĐƠN nằm tại vị trí ngôi sao cũ.
   - Góc trái giữ nút Về Portal.
   ========================================================= */

.unified-login-panel{
  padding-top:34px !important;
}

.login-star-logo.top-mini-star,
.login-star-logo{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  display:grid !important;
  place-items:center !important;
  width:46px !important;
  height:46px !important;
  margin:0 auto 8px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  cursor:pointer !important;
  opacity:.86 !important;
  filter:
    drop-shadow(0 0 8px rgba(80,222,255,.58))
    drop-shadow(0 0 14px rgba(255,211,105,.42)) !important;
  animation:loginStarBreath 3.6s ease-in-out infinite alternate !important;
  transition:transform .25s ease, filter .25s ease, opacity .25s ease !important;
}

.login-star-logo.top-mini-star:hover,
.login-star-logo:hover{
  transform:scale(1.15) rotate(18deg) !important;
  opacity:1 !important;
  filter:
    drop-shadow(0 0 15px rgba(80,222,255,.90))
    drop-shadow(0 0 28px rgba(255,211,105,.78))
    drop-shadow(0 0 36px rgba(255,95,209,.45)) !important;
}

.login-star-logo.top-mini-star img,
.login-star-logo img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
  background:transparent !important;
  border-radius:0 !important;
}

.login-mode-chip.center-mode-chip,
.login-mode-chip{
  display:flex !important;
  width:max-content !important;
  margin:10px auto 10px !important;
  padding:7px 15px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,211,105,.38) !important;
  color:#ffd36b !important;
  background:rgba(255,255,255,.075) !important;
  box-shadow:0 0 18px rgba(255,211,105,.14), inset 0 0 10px rgba(255,255,255,.035) !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:.7px !important;
  text-align:center !important;
}

.back-link{
  position:absolute !important;
  left:28px !important;
  top:24px !important;
  color:#ffd36b !important;
  text-decoration:none !important;
  font-weight:900 !important;
  z-index:20 !important;
}

@media(max-width:620px){
  .login-star-logo.top-mini-star,
  .login-star-logo{
    width:42px !important;
    height:42px !important;
    margin-bottom:7px !important;
  }

  .login-mode-chip.center-mode-chip,
  .login-mode-chip{
    font-size:11px !important;
    padding:6px 12px !important;
  }
}


/* TKver1.8 - Professional module page template */
.module-status{
  display:inline-block;
  margin:14px auto 0;
  padding:8px 14px;
  border-radius:999px;
  color:#ffd36b;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  font-weight:900;
}

.module-card{
  min-height:320px;
}

.module-actions a:nth-child(2){
  color:#ffd36b;
}


/* TKver2.1 - Demo pages + App Center */
.module-shell.wide{
  place-items:start center;
  padding-top:76px;
}

.module-card-wide{
  width:min(1180px,94vw) !important;
  text-align:left !important;
}

.module-card-wide > .module-domain,
.module-card-wide > h1,
.module-card-wide > #moduleDesc,
.module-card-wide > .module-status{
  text-align:center;
  display:block;
}

.module-content{
  margin-top:28px;
}

.demo-grid{
  display:grid;
  gap:18px;
  margin:18px 0;
}
.demo-grid.two{grid-template-columns:1.2fr .8fr;}
.demo-grid.three{grid-template-columns:repeat(3,1fr);}

.demo-card{
  padding:22px;
  border-radius:24px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 26px rgba(255,83,210,.10);
}

.demo-card h2,.demo-card h3{margin-top:0;}
.demo-kicker{
  color:#ffd36b;
  font-weight:900;
  font-size:12px;
  letter-spacing:1px;
}
.hero-demo h2{font-size:36px;margin:8px 0;}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.tag-row span{
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  font-weight:800;
}
.pretty-list{line-height:2;margin-bottom:0;}
.stat{text-align:center;}
.stat b{display:block;font-size:40px;color:#ffd36b;}
.stat span{color:#eee;}

.demo-table,.domain-table{
  display:grid;
  gap:8px;
  margin-top:18px;
}
.demo-table > div,.domain-table > div{
  display:grid;
  grid-template-columns:1fr 1fr 1.6fr;
  gap:12px;
  padding:13px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.12);
}
.domain-table > div{grid-template-columns:1.4fr .8fr .8fr 1.7fr;}
.demo-table > div:first-child,.domain-table > div:first-child{
  color:#ffd36b;
  font-weight:900;
}

.store-hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:28px;
  border-radius:30px;
  background:linear-gradient(135deg,rgba(255,71,139,.28),rgba(255,159,72,.15));
  border:1px solid rgba(255,255,255,.16);
  margin-bottom:22px;
}
.store-hero h2{font-size:42px;margin:8px 0;}
.store-hero button,.product-card button{
  border:0;
  border-radius:999px;
  padding:12px 18px;
  background:linear-gradient(90deg,#ff6c8d,#d13459);
  color:white;
  font-weight:900;
  cursor:pointer;
}
.product-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.product-card{
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.15);
}
.product-img{
  height:120px;
  display:grid;
  place-items:center;
  font-size:58px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
}
.product-card b{
  display:block;
  color:#ffd36b;
  font-size:20px;
  margin:12px 0;
}

.app-center-head{
  padding:24px;
  border-radius:28px;
  background:linear-gradient(135deg,rgba(255,140,0,.18),rgba(80,222,255,.10));
  border:1px solid rgba(255,255,255,.16);
  margin-bottom:22px;
}
.app-center-head h2{font-size:42px;margin:8px 0;}

.app-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.app-tool{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px;
  min-height:220px;
  text-decoration:none;
  color:#fff;
  border-radius:26px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 24px rgba(80,222,255,.08);
  transition:.25s ease;
}
.app-tool:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 0 34px rgba(255,211,105,.24);
}
.app-tool img{
  width:92px;
  height:92px;
  object-fit:cover;
  border-radius:22px;
  box-shadow:0 0 18px rgba(80,222,255,.18);
}
.app-tool strong{font-size:21px;}
.app-tool span{color:#e8dff5;line-height:1.45;}

.dash-card{
  text-decoration:none !important;
  color:#fff !important;
}

@media(max-width:900px){
  .demo-grid.two,.demo-grid.three,.product-grid,.app-grid{grid-template-columns:1fr;}
  .store-hero{flex-direction:column;align-items:flex-start;}
  .demo-table > div,.domain-table > div{grid-template-columns:1fr;}
}


/* TKver2.2 - Comfort Interaction + Clean App Center */
.module-card-wide > .module-domain,
.module-card-wide > #moduleDesc{
  display:none !important;
}

.module-card-wide > h1{
  margin-bottom:10px !important;
}

.module-status{
  width:max-content;
  margin:12px auto 18px !important;
  padding:9px 16px !important;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#ffd36b !important;
}

.comfort-panel{
  display:grid;
  grid-template-columns:1.2fr .8fr 1fr;
  gap:16px;
  margin:8px 0 26px;
}

.comfort-card{
  padding:18px;
  border-radius:24px;
  background:rgba(255,255,255,.085);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 22px rgba(255,83,210,.08);
}

.comfort-card h2{
  margin:6px 0 0;
  font-size:24px;
}

.comfort-kicker{
  display:block;
  color:#ffd36b;
  font-weight:900;
  font-size:11px;
  letter-spacing:1px;
}

.mood-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0 10px;
}

.mood-actions button,
.achievement-row button,
#doneWellness{
  border:0;
  border-radius:999px;
  padding:10px 13px;
  background:linear-gradient(90deg,#ff6ab8,#8b5cf6);
  color:white;
  font-weight:900;
  cursor:pointer;
}

.mood-message{
  margin:8px 0 0;
  color:#e8dff5;
  line-height:1.45;
}

.mood-message.active{
  color:#fff;
}

.quote-card p{
  font-size:17px;
  line-height:1.5;
  margin-bottom:0;
}

.achievement-row{
  display:flex;
  gap:10px;
  margin-top:12px;
}

.achievement-row input{
  flex:1;
  min-width:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.18);
  color:white;
  padding:11px 14px;
  outline:none;
}

.wellness-toast{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:999;
  width:min(360px,calc(100vw - 32px));
  padding:20px;
  border-radius:26px;
  background:rgba(32,20,54,.92);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 0 50px rgba(255,83,210,.28);
  backdrop-filter:blur(16px);
}

.wellness-toast h3{
  margin:0 0 8px;
}

.wellness-toast p{
  color:#f0e7ff;
  line-height:1.5;
}

#closeWellness{
  position:absolute;
  right:12px;
  top:10px;
  border:0;
  background:rgba(255,255,255,.08);
  color:white;
  width:30px;
  height:30px;
  border-radius:50%;
  cursor:pointer;
}

.clean-app-grid{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
}

.clean-app-tool{
  min-height:160px !important;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.clean-app-tool img{
  width:96px !important;
  height:96px !important;
  border-radius:26px !important;
}

.clean-app-tool span,
.app-center-head{
  display:none !important;
}

.clean-app-tool strong{
  font-size:18px !important;
}

@media(max-width:1000px){
  .comfort-panel{
    grid-template-columns:1fr;
  }

  .achievement-row{
    flex-direction:column;
  }
}


/* TKver2.3 - Identity greeting + login history + 80-minute session */
.module-status b{
  color:#fff;
}

.module-status span{
  color:#ffd36b;
  font-weight:900;
}

.comfort-panel{
  grid-template-columns:1.2fr .8fr 1fr 1fr !important;
}

.login-history-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:12px;
}

.login-history-item{
  padding:10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
}

.login-history-item b{
  display:block;
  color:#fff;
}

.login-history-item span{
  display:block;
  margin-top:3px;
  color:#d9ceec;
  font-size:12px;
}

@media(max-width:1200px){
  .comfort-panel{
    grid-template-columns:1fr 1fr !important;
  }
}

@media(max-width:760px){
  .comfort-panel{
    grid-template-columns:1fr !important;
  }
}

/* TKver2.5 - Flex Profile Timeline */
.profile-page{min-height:100vh}.profile-shell{position:relative;z-index:2;width:min(1280px,94vw);margin:0 auto;padding:80px 0 44px}.profile-hero-card{display:grid;grid-template-columns:160px 1fr 130px;gap:24px;align-items:center;padding:26px;border-radius:34px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(18px);box-shadow:0 0 50px rgba(255,83,210,.22)}.profile-avatar-wrap img{width:150px;height:150px;object-fit:cover;border-radius:36px;filter:drop-shadow(0 0 20px rgba(255,211,105,.45))}.profile-kicker{color:#ffd36b;font-weight:900;letter-spacing:1px;font-size:12px}.profile-hero-copy h1{margin:6px 0;font-family:"Playfair Display",Georgia,serif;font-size:clamp(46px,7vw,86px);background:linear-gradient(90deg,#ffe69a,#ff70d8,#a575ff);-webkit-background-clip:text;color:transparent}.profile-hero-copy p{font-size:18px;line-height:1.55;color:#f0e7ff}.profile-socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.profile-socials a{color:#fff;text-decoration:none;font-weight:900;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}.profile-qr{text-align:center}.profile-qr img{width:92px;height:92px;object-fit:contain;border-radius:20px}.profile-qr span{display:block;margin-top:8px;color:#ffd36b;font-weight:900;font-size:12px}.profile-tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:22px 0}.profile-tabs button{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:12px 16px;font-weight:900;cursor:pointer}.profile-tabs button.active{color:#1b0b2e;background:linear-gradient(90deg,#ffd36b,#ff70d8)}.profile-layout{display:grid;grid-template-columns:280px 1fr;gap:22px}.profile-filter-card,.profile-content-card{padding:22px;border-radius:30px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(14px)}.profile-filter-card label{display:block;margin:14px 0 7px;font-weight:900;color:#ffd36b}.profile-filter-card select,.profile-filter-card button{width:100%;padding:11px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.18);color:#fff}.profile-filter-card button{margin-top:14px;background:linear-gradient(90deg,#ff6ab8,#8b5cf6);border:0;font-weight:900;cursor:pointer}.profile-intro{margin-top:24px;color:#e8dff5;line-height:1.5}.timeline-year h2{font-size:40px;margin:0 0 14px;color:#ffd36b}.timeline-month h3{margin:18px 0 12px;color:#fff}.post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.profile-post-card{overflow:hidden;border-radius:26px;background:rgba(255,255,255,.085);border:1px solid rgba(255,255,255,.14)}.post-cover{width:100%;height:220px;object-fit:cover;display:block;cursor:pointer}.post-body{padding:18px}.post-meta{color:#ffd36b;font-size:12px;font-weight:900}.post-body h3{margin:8px 0;font-size:22px}.post-body p{color:#e8dff5;line-height:1.55}.post-gallery{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.post-gallery img{width:70px;height:70px;object-fit:cover;border-radius:14px;cursor:pointer;border:1px solid rgba(255,255,255,.16)}.profile-section-title{text-align:center;margin-bottom:22px}.achievement-list,.goal-list{display:grid;gap:14px}.achievement-item,.goal-item{padding:16px;border-radius:20px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.12)}.achievement-item b{color:#ffd36b;margin-right:12px}.goal-item{display:grid;grid-template-columns:1fr 220px 50px;align-items:center;gap:14px}.goal-item b{display:block;color:#ffd36b}.goal-bar{height:12px;background:rgba(255,255,255,.13);border-radius:999px;overflow:hidden}.goal-bar i{display:block;height:100%;background:linear-gradient(90deg,#ffd36b,#ff70d8)}.goal-item em{font-style:normal;font-weight:900;color:#ffd36b}.profile-gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}.profile-gallery-grid img{width:100%;height:180px;object-fit:cover;border-radius:20px;cursor:pointer;border:1px solid rgba(255,255,255,.14)}.profile-empty{text-align:center;padding:40px;color:#e8dff5}.image-lightbox{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(0,0,0,.82)}.image-lightbox img{max-width:92vw;max-height:86vh;border-radius:20px}.image-lightbox button{position:absolute;right:24px;top:20px;width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:#111;font-size:26px;cursor:pointer}.manager-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.manager-form,.manager-preview{padding:22px;border-radius:26px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}.manager-form label{display:block;margin:13px 0 6px;font-weight:900;color:#ffd36b}.manager-form input,.manager-form textarea,.manager-form select,.manager-preview textarea{width:100%;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.18);color:#fff}.form-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.manager-form button,.manager-preview button{margin-top:14px;border:0;border-radius:999px;padding:12px 18px;color:white;font-weight:900;background:linear-gradient(90deg,#ff6ab8,#8b5cf6);cursor:pointer}.saved-post-item{padding:12px;border-radius:16px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.12);margin-bottom:10px}.saved-post-item b,.saved-post-item span{display:block}.saved-post-item span{color:#e8dff5;font-size:12px;margin-top:4px}.saved-post-item button{padding:8px 12px;margin-top:8px;background:#d13459}@media(max-width:900px){.profile-hero-card{grid-template-columns:1fr;text-align:center}.profile-avatar-wrap img{margin:auto}.profile-layout,.manager-grid{grid-template-columns:1fr}.post-grid{grid-template-columns:1fr}.goal-item{grid-template-columns:1fr}.profile-socials{justify-content:center}}
/* TKver2.6 - Family role + Academy lessons */
.lesson-list{display:grid;gap:12px;margin-top:12px}.lesson-item{padding:14px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}.lesson-item b,.lesson-item span{display:block}.lesson-item span{color:#ffd36b;font-size:12px;margin-top:4px}.lesson-item p{color:#e8dff5;line-height:1.5}
/* TKver2.7 - Thiên Kim Care side popup */
.comfort-panel{display:none!important}
.comfort-floating-btn{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:880;width:74px;height:74px;border:1px solid rgba(255,255,255,.22);border-radius:26px;background:linear-gradient(135deg,rgba(255,106,184,.94),rgba(139,92,246,.94));color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:900;cursor:pointer;box-shadow:0 0 30px rgba(255,83,210,.35),inset 0 0 16px rgba(255,255,255,.16);backdrop-filter:blur(12px);transition:.22s ease}
.comfort-floating-btn:hover{transform:translateY(-50%) scale(1.08);box-shadow:0 0 42px rgba(255,211,105,.38),0 0 52px rgba(255,83,210,.28)}
.comfort-floating-btn span{font-size:12px}
.comfort-drawer{position:fixed;right:22px;top:96px;bottom:22px;z-index:890;width:min(420px,calc(100vw - 34px));border-radius:30px;background:rgba(36,24,54,.94);border:1px solid rgba(255,255,255,.18);box-shadow:0 0 60px rgba(255,83,210,.28),inset 0 0 28px rgba(255,255,255,.04);backdrop-filter:blur(18px);overflow:hidden;animation:tkDrawerIn .22s ease both}
@keyframes tkDrawerIn{from{opacity:0;transform:translateX(28px) scale(.98)}to{opacity:1;transform:translateX(0) scale(1)}}
.comfort-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:22px 22px 14px;border-bottom:1px solid rgba(255,255,255,.10)}
.comfort-drawer-head h2{margin:6px 0 0;font-size:24px;line-height:1.18;color:#fff}
#comfortClose{border:0;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.10);color:white;font-size:24px;line-height:1;cursor:pointer}
.comfort-drawer-body{height:calc(100% - 92px);overflow:auto;padding:16px;display:flex;flex-direction:column;gap:14px}
.comfort-drawer .comfort-card{padding:16px;border-radius:22px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.13)}
.comfort-drawer .achievement-row{flex-direction:column}
@media(max-width:760px){.comfort-floating-btn{right:14px;bottom:18px;top:auto;transform:none;width:68px;height:68px}.comfort-floating-btn:hover{transform:scale(1.06)}.comfort-drawer{left:12px;right:12px;top:auto;bottom:96px;width:auto;max-height:72vh}.comfort-drawer-body{max-height:calc(72vh - 92px)}}


/* TKver2.8 - Black Gold Edition: global chủ đạo cho portal và domain con */
:root{
  --tk-bg-0:#030303;
  --tk-bg-1:#0b0904;
  --tk-bg-2:#171104;
  --tk-gold:#ffd76a;
  --tk-gold-2:#fff1b8;
  --tk-gold-3:#b8860b;
  --tk-champagne:#ffe9a6;
  --tk-glass:rgba(18,15,8,.72);
  --tk-glass-2:rgba(255,215,106,.08);
  --tk-border:rgba(255,215,106,.28);
  --tk-text:#fff8dd;
  --tk-muted:#d8c58c;
  --tk-shadow:rgba(255,205,84,.22);
}

/* nền chính toàn site */
html, body{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,215,106,.22) 0%, rgba(184,134,11,.10) 22%, transparent 46%),
    radial-gradient(circle at 18% 82%, rgba(255,215,106,.16) 0%, transparent 34%),
    radial-gradient(circle at 86% 78%, rgba(255,241,184,.12) 0%, transparent 32%),
    linear-gradient(180deg, #080704 0%, #050505 42%, #000 100%) !important;
  color:var(--tk-text) !important;
}

/* galaxy background đồng bộ cho index + login + module/admin */
.galaxy-bg,
body::before,
body::after{
  filter:saturate(.8) sepia(.25) hue-rotate(350deg);
}

.galaxy-bg{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,215,106,.20), transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(184,134,11,.18), transparent 48%),
    linear-gradient(180deg, #050505 0%, #100c03 58%, #000 100%) !important;
}

/* ép các mảng tím/hồng sang black-gold nhưng vẫn giữ ảnh card */
.main-shell,
.module-shell,
.profile-shell,
.admin-main{
  color:var(--tk-text) !important;
}

/* kính đen vàng cho card/module */
.module-card,
.module-card-wide,
.profile-hero-card,
.profile-filter-card,
.profile-content-card,
.admin-sidebar,
.admin-user,
.admin-main section,
.manager-form,
.manager-preview,
.comfort-drawer,
.comfort-card,
.demo-card,
.store-hero,
.product-card,
.app-tool,
.dash-card,
.profile-post-card,
.saved-post-item,
.lesson-item{
  background:linear-gradient(145deg, rgba(20,17,9,.82), rgba(8,8,8,.76)) !important;
  border-color:var(--tk-border) !important;
  box-shadow:0 0 36px rgba(255,205,84,.12), inset 0 0 20px rgba(255,215,106,.035) !important;
  color:var(--tk-text) !important;
}

/* heading gradient vàng kim */
.hero-title,
.module-card h1,
.module-card-wide h1,
.profile-hero-copy h1,
.admin-main h1,
.login-brand h1,
h1{
  background:linear-gradient(90deg, #fff3b0 0%, #ffd76a 34%, #b8860b 64%, #fff1b8 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  text-shadow:0 0 22px rgba(255,215,106,.18) !important;
}

/* chữ phụ và nhãn */
.hero-subtitle,
.profile-kicker,
.comfort-kicker,
.module-domain,
.post-meta,
.demo-kicker,
.admin-logo,
.profile-filter-card label,
.manager-form label,
.stat b,
.goal-item b,
.goal-item em,
.achievement-item b{
  color:var(--tk-gold) !important;
}

/* nút và chip vàng */
button,
.card-button,
.login-submit,
.module-actions a,
.profile-tabs button.active,
.profile-socials a:hover,
.manager-form button,
.manager-preview button,
.store-hero button,
.product-card button,
.mood-actions button,
.achievement-row button,
#doneWellness{
  background:linear-gradient(90deg, #fff1b8 0%, #ffd76a 36%, #b8860b 100%) !important;
  color:#171104 !important;
  border-color:rgba(255,215,106,.38) !important;
  box-shadow:0 0 22px rgba(255,205,84,.18) !important;
}

/* nút đặc biệt không phá close */
#comfortClose,
#closeWellness,
#closeLightbox{
  background:rgba(255,215,106,.16) !important;
  color:var(--tk-gold-2) !important;
}

/* input/select/textarea */
input, select, textarea{
  background:rgba(0,0,0,.38) !important;
  border-color:rgba(255,215,106,.26) !important;
  color:var(--tk-text) !important;
}

input::placeholder, textarea::placeholder{
  color:rgba(255,241,184,.42) !important;
}

/* care popup nút nổi */
.comfort-floating-btn{
  background:linear-gradient(135deg, #fff1b8, #ffd76a 45%, #9b6a04) !important;
  color:#0b0904 !important;
  box-shadow:0 0 34px rgba(255,215,106,.35), inset 0 0 18px rgba(255,255,255,.24) !important;
}

/* các thanh progress */
.goal-bar i{
  background:linear-gradient(90deg,#fff1b8,#ffd76a,#b8860b) !important;
}

/* admin menu */
.admin-sidebar nav a,
.admin-sidebar button,
#adminLogout{
  border-color:rgba(255,215,106,.24) !important;
}

.admin-sidebar nav a:hover{
  background:rgba(255,215,106,.12) !important;
}

/* version tag nhỏ, chỉ để chủ web check */
#buildVersion{
  position:fixed;
  right:10px;
  bottom:7px;
  z-index:99999;
  padding:2px 6px;
  border-radius:999px;
  font-size:10px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.2px;
  color:#ffd76a;
  background:rgba(0,0,0,.34);
  border:1px solid rgba(255,215,106,.16);
  opacity:.22;
  pointer-events:none;
  user-select:none;
  text-shadow:0 0 8px rgba(255,215,106,.45);
}

#buildVersion:hover{
  opacity:.75;
}

/* fallback cho ảnh lỗi: khung vàng nhẹ */
img{
  color:var(--tk-gold);
}

/* mobile giữ gọn */
@media(max-width:760px){
  #buildVersion{
    font-size:9px;
    right:6px;
    bottom:5px;
  }
}

/* TKver3.1 - VIP App Engine + Mood V2 */
.module-status{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:54px;
}

.module-status .hello-user{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.module-status em{
  color:#7fd6ff;
  font-style:normal;
  font-weight:900;
}

.quick-mood-heart{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#ffd76a !important;
  font-size:34px !important;
  padding:0 !important;
  width:44px !important;
  height:44px !important;
  line-height:1 !important;
  animation:tkHeartPulse 1.45s ease-in-out infinite;
  cursor:pointer;
}

@keyframes tkHeartPulse{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 5px rgba(255,215,106,.4))}
  50%{transform:scale(1.18);filter:drop-shadow(0 0 18px rgba(255,215,106,.9))}
}

#buildVersion{
  color:#4cc9ff !important;
  border-color:rgba(76,201,255,.18) !important;
  text-shadow:0 0 8px rgba(76,201,255,.55) !important;
  opacity:.42 !important;
}

.app-center-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin:0 0 20px;
  padding:18px;
  border-radius:24px;
  background:rgba(255,215,106,.065);
  border:1px solid rgba(255,215,106,.16);
}

.app-center-toolbar h2{
  margin:0 0 4px;
  color:#ffd76a;
}

.app-center-toolbar p{
  margin:0;
  color:#d8c58c;
}

.app-manager-shortcut{
  white-space:nowrap;
}

.vip-app{
  position:relative;
  border-color:rgba(255,215,106,.45) !important;
  box-shadow:0 0 32px rgba(255,215,106,.16), inset 0 0 18px rgba(255,215,106,.05) !important;
}

.vip-badge{
  position:absolute;
  top:10px;
  right:10px;
  padding:5px 9px;
  border-radius:999px;
  color:#171104;
  background:linear-gradient(90deg,#fff1b8,#ffd76a,#b8860b);
  font-size:11px;
  font-weight:900;
  box-shadow:0 0 18px rgba(255,215,106,.36);
}

.app-manager-list{
  display:grid;
  gap:12px;
  margin-top:16px;
}

.app-manager-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px;
  border-radius:20px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,215,106,.18);
}

.app-manager-info{
  display:flex;
  align-items:center;
  gap:12px;
}

.app-manager-info img{
  width:58px;
  height:58px;
  border-radius:16px;
  object-fit:cover;
}

.app-manager-info b,
.app-manager-info span{
  display:block;
}

.app-manager-info span{
  color:#d8c58c;
  font-size:12px;
}

.vip-switch{
  display:flex;
  align-items:center;
  gap:8px;
  color:#ffd76a;
  font-weight:900;
}

.vip-switch input{
  width:20px;
  height:20px;
}

@media(max-width:760px){
  .app-center-toolbar{
    flex-direction:column;
    align-items:flex-start;
  }
}