/* Sổ Tay Ánh Sao · Atelier edition
   Visual layer only: the original layout, content and user features stay intact. */
/* Google Fonts được tải một lần qua style.css. */

:root {
  --text:#56506c;
  --muted:#968fa8;
  --dark:#4b4461;
  --ink:#4b4461;
  --rose:#f7a6bd;
  --rose-deep:#d987ac;
  --rose-soft:#fff1f7;
  --cream:#fffcfd;
  --paper:#ffffff;
  --gold:#f8dda2;
  --stroke:#f1ebf1;
  --line:#f1ebf1;
  --shadow:0 13px 45px rgba(133,102,137,.095);
  --radius:22px;
  --spring:cubic-bezier(.22,1,.36,1);
}
html{scroll-padding-top:92px}
body {
  background:radial-gradient(ellipse 870px 710px at 78% -14%,#fceaf3 0%,transparent 75%),
    radial-gradient(ellipse 800px 800px at 11% 64%,#f3edff 0%,transparent 75%),
    #fffcfd;
  color:var(--text);
  font-family:var(--font-sans);
  font-size:13px;
  font-feature-settings:'kern' 1;
  letter-spacing:.005em;
}
::selection{background:#ffdbe8;color:#5c5367}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible {
  outline:2px solid #a1cef6!important;outline-offset:4px;
}

/* Side rail: warm stationery instead of a stack of candy-colored boxes. */
.sidebar{
  background:linear-gradient(167deg,#fff9fc 0%,#fff 54%,#f8f6ff 100%);
  border-right:1px solid #f1ebf1;
  padding-top:32px;
  box-shadow:6px 0 34px rgba(77,56,66,.025);
}
.sidebar::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,#f7a6bd,#c6bbef,#a7cfee)}
.brand{gap:10px;white-space:normal}
.brand-icon{
  border:1px solid #e7cad0;border-radius:50%;width:47px;height:47px;
  color:#c781a6;background:radial-gradient(circle at 32% 24%,#fff,#ffe4f0 82%);
  box-shadow:0 5px 18px #ba7b9322;font-size:29px;
  animation:atelier-brand-breathe 7s ease-in-out infinite;
}
.brand-copy strong{font-family:var(--font-display);color:var(--ink);font-size:19px;font-weight:700;letter-spacing:-.55px;line-height:1.22}
.brand-copy small{font-family:var(--font-sans);font-size:8px;letter-spacing:1.55px;color:#b39d93;line-height:1.65}
.side-illustration{
  margin:33px 5px 36px;height:185px;border-radius:18px;
  background:radial-gradient(circle at 77% 22%,#fff 0,transparent 36%),linear-gradient(155deg,#ffeff7,#eeeaff 58%,#eaf7ff);
  border:1px solid #f0e5f4;
  box-shadow:0 12px 26px #93676d10;
}
.side-illustration::after{content:'';position:absolute;inset:8px;border:1px solid #fff9;border-radius:13px;pointer-events:none}
.side-illustration img{height:127px;max-width:125px;filter:drop-shadow(0 11px 12px #996d7330);animation:atelier-float 7s ease-in-out infinite}
.side-illustration>span:last-child{letter-spacing:1.8px;color:#a37885;font-size:9px;font-weight:700;margin-top:-3px}
.side-orbit.one{color:#c0969e;animation:atelier-twinkle 5.5s ease-in-out infinite}
.side-orbit.two{color:#c0a17e;animation:atelier-twinkle 5.5s 1.2s ease-in-out infinite}
.side-label{font-size:9px;font-weight:800;letter-spacing:2.2px;color:#b4a39c;margin-bottom:14px}
.side-nav{gap:7px}
.nav-link {
  color:#81767c;border-radius:13px;font-size:12px;font-weight:700;
  min-height:59px;padding:4px 13px;gap:10px;
  transition:color .25s,background .3s,transform .35s var(--spring),box-shadow .3s;
}
.nav-link:hover,.nav-link.active{
  transform:translateX(3px);background:linear-gradient(90deg,#ffeaf3,#f1eeff)!important;
  box-shadow:inset 0 0 0 1px #f1dce9!important;color:#b76d9e;
}
.nav-link.active::before{content:'';position:absolute;left:0;top:15px;bottom:15px;width:3px;border-radius:3px;background:#f2a3c2}
.nav-icon img{transition:transform .5s var(--spring),filter .4s}
.nav-link:hover .nav-icon img,.nav-link.active .nav-icon img{transform:translateY(-2px) rotate(-5deg) scale(1.09);filter:drop-shadow(0 4px 4px #b4758833)!important}
.nav-arrow{color:#bc9ba2;transition:transform .35s var(--spring),color .25s}
.nav-link:hover .nav-arrow{transform:translateX(3px);color:#ac5877}
.side-note{border-radius:15px;background:linear-gradient(145deg,#fff5fc,#f4f1ff);border:1px solid #f1e8f3;padding:18px;box-shadow:none}
.side-note-stars{font-size:14px;color:#ac8868}
.side-note p{font-weight:500;font-size:11px;color:#897b78}
.side-credit{font-size:8px;font-weight:700;letter-spacing:1.3px;color:#bdada8}
.side-credit span{color:#a14d6a}

/* Quiet topbar and coherent content rhythm. */
.topbar{
  height:80px;background:rgba(255,252,254,.9);border-color:#f0e8f2;
  backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);
}
.top-left{font-size:11px;font-weight:700;color:#93878a}
.crumb-flower{font-size:21px;color:#b78295;animation:atelier-slow-turn 21s linear infinite}
.search-box{
  height:45px;background:#fffaff;border:1px solid #f0e6f1;border-radius:13px;
  box-shadow:inset 0 1px 2px #5e3d4a05;
  transition:background .25s,border-color .25s,box-shadow .35s var(--spring),transform .35s var(--spring);
}
.search-box:hover{background:#fff;border-color:#e9c8e0}
.search-box:focus-within{background:#fff;border-color:#b9b1eb;transform:translateY(-1px);box-shadow:0 0 0 4px #f1eaff,0 6px 22px #92546e12}
.search-box input{font-size:12px;color:var(--ink);font-weight:500}
.search-box input::placeholder{color:#b3a4a3}
.search-box svg{color:#ab8292}
.search-hint{color:#b6a6a8}
.avatar{border:2px solid #fff;background:linear-gradient(145deg,#f5bdd6,#c7b7ef);box-shadow:0 0 0 1px #e8d8d9;color:#fff}
.main-content{padding-top:32px;padding-bottom:77px}
.footer{font-size:10px;font-weight:600;color:#ab9b98;border-color:#eadfdc}
.footer span:first-child{font-family:var(--font-display);font-size:14px;font-weight:600;color:#ab637a}

/* Main story-cover hero, with slow ambient motion and focused typography. */
.hero {
  min-height:350px;border-radius:26px;border:1px solid #f0e2f2;
  background:radial-gradient(ellipse 76% 124% at 94% 15%,#e9e6ff 0,transparent 73%),
    radial-gradient(ellipse 100% 140% at 9% 115%,#ffe1ef 0,transparent 70%),
    linear-gradient(110deg,#fff9fd 0%,#fceff8 48%,#e8ecff 100%);
  box-shadow:0 17px 45px #916c7020,0 2px 7px #a17b8110;
  padding:37px clamp(25px,4.6vw,65px);
}
.hero:not(.has-banner)::before {
  width:440px;height:440px;top:-125px;right:-10px;border:1px solid #ffffff93;
  box-shadow:0 0 0 29px #fff4,0 0 0 61px #fff3,0 0 0 92px #fff2;
  animation:atelier-orbit 25s linear infinite;
}
.hero:not(.has-banner)::after {
  content:'✧';left:auto;right:38%;top:14%;font-size:31px;color:#fffef6;
  text-shadow:0 0 15px #c69d99;animation:atelier-twinkle 4.8s ease-in-out infinite;
}
.hero-body{max-width:540px;width:61%;z-index:1}
.hero-chip{
  border:1px solid #edd9eb;background:#fffcffcf;border-radius:999px;
  padding:8px 14px;color:#a87daa;font-size:9px;font-weight:700;letter-spacing:1.7px;
  box-shadow:0 3px 11px #7e596508;
}
.hero h1{
  font-family:var(--font-display);font-size:clamp(35px,3.75vw,55px);
  font-weight:600;line-height:1.18;letter-spacing:-1.65px;
  color:#514767;margin:18px 0 16px;
}
.hero h1 em{font-style:italic;font-weight:600;color:#dd8eb4}
.hero p{font-size:12px;line-height:1.95;color:#776970;font-weight:500;max-width:395px}
.hero-buttons{margin-top:25px;gap:10px}
.btn-primary,.btn-secondary {
  border-radius:11px;min-height:43px;height:auto;padding:12px 18px;
  font-size:11px;font-weight:700;letter-spacing:.01em;
  transition:transform .4s var(--spring),box-shadow .35s,background .3s,border-color .3s;
}
.btn-primary{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(130deg,#f7b4ca,#dfb4ee);color:#59405f;
  box-shadow:0 8px 17px #d8a4d446;
}
.btn-primary::before{content:'';position:absolute;z-index:-1;inset:0;width:42%;transform:translateX(-170%) skewX(-22deg);background:linear-gradient(90deg,transparent,#ffffff56,transparent);transition:transform .7s var(--spring)}
.btn-primary:hover::before{transform:translateX(370%) skewX(-22deg)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 24px #d7abd35c}
.btn-secondary{background:#fffaff;color:#9a74a6;border:1px solid #e9dbea}
.btn-secondary:hover{background:#fff;transform:translateY(-3px);border-color:#d2bceb;box-shadow:0 8px 16px #9369791c}
.hero-art{right:5%;bottom:-33px;width:40%;height:113%;filter:drop-shadow(0 18px 20px #98757722)}
.hero-art img{max-height:420px;filter:drop-shadow(0 20px 21px #9d6c7950);animation:atelier-float 7.5s ease-in-out infinite}
.hero-sparkle{filter:drop-shadow(0 0 11px #fff);animation:atelier-twinkle 4s ease-in-out infinite}
.hero-sparkle.b{animation-delay:1.2s}.hero-sparkle.c{animation-delay:2.1s}
.hero.has-banner{background-image:linear-gradient(90deg,rgba(255,250,245,.93) 0%,rgba(255,250,245,.69) 38%,rgba(255,250,245,.06) 73%),var(--banner-image)}
.hero.has-banner::before,.hero.has-banner::after{display:none}
.hero.has-banner .hero-body{width:61%}

/* Section headings, elegant editorial hierarchy. */
.section{margin-top:43px}
.section-head{margin-bottom:18px}
.section-title{gap:12px;min-width:0}
.section-icon{flex:0 0 45px;width:45px;height:45px;font-size:24px}
.section-icon img{transition:transform .5s var(--spring);filter:drop-shadow(0 4px 6px #a48a8a18)!important}
.section-head:hover .section-icon img{transform:rotate(-7deg) scale(1.1)}
.section-title h2{font-family:var(--font-display);font-size:clamp(19px,1.65vw,24px);font-weight:600;letter-spacing:-.55px;color:#514767;line-height:1.27}
.section-title p{font-size:11px;color:#9b8d8d;font-weight:500;margin-top:6px;line-height:1.55}
.section-more{font-size:11px;font-weight:700;color:#ac597a;transition:color .2s,transform .3s var(--spring)}
.section-more:hover{color:#7d3155;text-decoration:none;transform:translateX(3px)}

/* Destination cards: restrained watercolor, precise textures and stronger contrast. */
.features{gap:17px}
.feature {
  border-radius:19px;min-height:158px;padding:19px;
  border:1px solid #e9dedc;box-shadow:0 8px 23px #81686b10;
  transform:translateZ(0);
  transition:transform .45s var(--spring),box-shadow .45s var(--spring),border-color .25s;
}
.feature.pink{background:linear-gradient(126deg,#fff2f8,#ffe5f0)}
.feature.blue{background:linear-gradient(126deg,#f3fbff,#dff2ff)}
.feature.yellow{background:linear-gradient(126deg,#fff9e9,#ffedc9)}
.feature.mint{background:linear-gradient(126deg,#f3fbff,#dff2ff)}
.feature::after{width:125px;height:125px;right:-39px;top:-40px;border:1px solid #fffa;box-shadow:0 0 0 17px #fff5,0 0 0 34px #fff3;transition:transform .8s var(--spring)}
.feature::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(230px circle at var(--pointer-x,50%) var(--pointer-y,45%),#fff8,transparent 70%);transition:opacity .35s}
.feature:hover::before{opacity:1}
.feature:hover,.feature:focus-visible{transform:translateY(-6px);border-color:#e0c9c9;box-shadow:0 21px 42px #95727d27}
.feature:hover::after{transform:translate(-17px,16px) rotate(12deg)}
.feature-emoji{flex:0 0 80px;width:80px;height:88px}
.feature-emoji img{width:103px;height:103px;max-width:130%;max-height:130%;transition:transform .6s var(--spring),filter .5s}
.feature:hover .feature-emoji img{transform:translateY(-5px) rotate(-7deg) scale(1.075);filter:drop-shadow(0 9px 8px #94757736)!important}
.feature-body small{font-size:9px;font-weight:700;letter-spacing:1.5px;color:#ad8e90}
.feature-body strong,.feature.yellow .feature-body strong{font-family:var(--font-display);font-size:20px;font-weight:600;line-height:1.25;color:#5f5472;margin:7px 0 6px;letter-spacing:-.25px}
.feature-body span{font-size:11px;font-weight:500;line-height:1.6;color:#8c7c81}
.feature-arrow,.feature.yellow .feature-arrow{color:#af7486;font-size:25px;right:15px;bottom:11px;transition:transform .35s var(--spring)}
.feature:hover .feature-arrow{transform:translateX(5px)}
.features.has-banner{padding:16px;border:1px solid #eadfdc;border-radius:20px}
.features.has-banner .feature{backdrop-filter:blur(10px);background:rgba(255,252,249,.88)}

/* Catalogue cards. User's item art always remains un-cropped. */
.card-grid{gap:17px}
.item-card{
  border:1px solid #f0e7f2;background:#fff;border-radius:18px;
  box-shadow:0 5px 15px #74565e0a;
  transition:transform .45s var(--spring),box-shadow .45s var(--spring),border-color .28s;
}
.item-card:hover,.item-card:focus-within{transform:translateY(-6px);box-shadow:0 20px 42px #74565e21;border-color:#e1cbd0}
.item-cover{background:#fff1f8;isolation:isolate}
.item-cover.pink{background:linear-gradient(130deg,#fff2f8,#f9e2f0)}
.item-cover.blue{background:linear-gradient(130deg,#f2fbff,#ddecfc)}
.item-cover.mint{background:linear-gradient(130deg,#f2fff9,#dff5ee)}
.item-cover.yellow{background:linear-gradient(130deg,#fff9e8,#faedcb)}
.item-cover.lilac{background:linear-gradient(130deg,#f6f3ff,#eae4ff)}
.item-cover::before{width:128px;height:128px;right:-15px;top:-24px;border:1px solid #fff9;box-shadow:0 0 0 16px #fff4,0 0 0 32px #fff2;transition:transform .65s var(--spring)}
.item-card:hover .item-cover::before{transform:rotate(20deg) scale(1.12)}
.item-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 18%,#fff5 50%,transparent 78%);transform:translateX(-130%);transition:transform .9s var(--spring);pointer-events:none;z-index:1}
.item-card:hover .item-cover::after{transform:translateX(130%)}
.item-cover img{transition:transform .65s var(--spring),filter .5s}
.item-card:hover .item-cover img{transform:translateY(-5px) scale(1.055);filter:drop-shadow(0 13px 11px #7d556047)}
.cover-label{border:1px solid #ffffffd9;background:#fffaf7e8;color:#a86980;font-size:9px;font-weight:700;backdrop-filter:blur(5px)}
.cover-floater{color:#fff9}
.item-body{padding:17px}
.tag,.tag.blue,.tag.mint,.tag.yellow,.tag.lilac{font-size:9px;font-weight:700;letter-spacing:.01em;border-radius:7px;padding:5px 8px}
.tag{color:#ad5877;background:#f9e9ec}
.tag.blue{color:#597f7f;background:#e8f2ef}
.tag.mint{color:#5d8a75;background:#e6f2e9}
.tag.yellow{color:#957136;background:#f8efd9}
.tag.lilac{color:#876b93;background:#f3eaf3}
.item-title{font-size:14px;color:#4c3c48;font-weight:800;line-height:1.52}
.item-desc{font-weight:500;font-size:11px;color:#8b7f83;line-height:1.75}
.item-bottom{border-top:1px solid #eee7e2}
.demo-badge{font-size:9px;color:#9c9190;font-weight:600}
.text-link{font-weight:700;font-size:11px;color:#ad5877}
.text-link:hover{color:#81344f;text-decoration:none}

/* Pages, tabs and grouped stages. */
.page-head {
  min-height:185px;border-radius:21px;border:1px solid #f1e8f3;
  background:linear-gradient(120deg,#fff0f7,#eeefff);padding:31px 34px;
  box-shadow:0 9px 25px #8c6b7014;
}
.page-head.events{background:linear-gradient(120deg,#fff0f7,#ffe3ef)}
.page-head.guides{background:linear-gradient(120deg,#f0faff,#dff2ff)}
.page-head.outfits:not(.has-banner){background:linear-gradient(120deg,#fff9e9,#ffedc9)}
.page-head.has-banner{background-image:linear-gradient(90deg,#fffaf5eb 0%,#fffaf5a6 44%,#fffaf51b 88%),var(--banner-image)}
.page-head::after{content:'✧';font-family:Georgia,serif;font-size:170px;right:55px;top:-42px;color:#fffcf4a8;animation:atelier-twinkle 8s ease-in-out infinite}
.page-head .eyebrow{font-size:10px;font-weight:700;letter-spacing:2.1px;color:#b27887}
.page-head h1,.page-head.outfits h1{
  font-family:var(--font-display);font-weight:600;
  color:#514767;font-size:clamp(28px,2.7vw,39px);letter-spacing:-.7px;
  margin:9px 0 9px;
}
.page-head.outfits h1{color:#79638b}
.page-head p{color:#81737a;font-weight:500;font-size:12px}
.head-motif{color:#d8acdd;font-size:80px;animation:atelier-float 8s ease-in-out infinite}
.toolbar{margin-bottom:19px;gap:13px}
.tabs{gap:8px}
.tab{
  font-size:11px;font-weight:700;padding:10px 16px;
  background:#fff;color:#877d9a;border:1px solid #eee7f2;
  transition:color .25s,background .25s,transform .35s var(--spring),border-color .25s,box-shadow .3s;
}
.tab:hover{border-color:#e9bad5;color:#b875a2;transform:translateY(-2px)}
.tab.active,body[data-page='outfits'] .tab.active{
  background:#f7b4ca;border-color:#f7b4ca;color:#614766;
  box-shadow:0 5px 12px #eaa4c742;
}
body[data-page='outfits'] .tab.active{background:#f8dda2;border-color:#f8dda2;color:#6b5872}
.toolbar-count{font-size:11px;font-weight:600;color:#a47a87}
.st-guide-category-heading h3{font-family:var(--font-display);font-size:22px;font-weight:600;color:#4f3c4d}
.st-guide-category-heading p{font-weight:500;font-size:11px;color:#8d8184}
.st-guide-category-heading>span{background:#fbefee;color:#9f687e;border:1px solid #ecdcd9}
.st-guide-groups{gap:12px}
.st-guide-group{border-radius:15px;border:1px solid #ebdfdc;box-shadow:0 5px 14px #715e6710;background:#fffdfa;transition:border-color .3s,box-shadow .4s var(--spring),transform .4s var(--spring)}
.st-guide-group:hover{transform:translateY(-2px);box-shadow:0 11px 22px #715e6718}
.st-guide-group[open]{border-color:#d7b5c0;box-shadow:0 16px 30px #936b7915}
.st-guide-group-head{transition:background .3s;min-height:87px}
.st-guide-group-head:hover{background:#fcf6f4}
.st-guide-group-copy strong{font-size:14px;color:#554450}
.st-guide-group-kind{font-size:10px;color:#a45e7a}
.st-guide-group-copy small{font-weight:500;color:#9c8b91}
.st-guide-group-image{border-radius:12px}
.st-guide-group[open] .st-guide-group-items{animation:atelier-accordion .45s var(--spring) both}
.st-guide-group-items{background:#fffdfa;border-color:#eee5e1}
.st-guide-group-chevron{transition:transform .45s var(--spring)}
.quick-link{background:#fff9f7;border-color:#eadfdd;color:#9e6480;border-radius:10px;font-size:11px;font-weight:700;transition:transform .25s,background .2s}
.quick-link:hover{background:#fae9ed;transform:translateY(-2px)}
.mini-banner{border:1px solid #f2e2ef;border-radius:17px;background:linear-gradient(125deg,#fff4fa,#f4ecff);box-shadow:0 7px 20px #78666b0a}
.mini-banner.mint{background:linear-gradient(125deg,#effff8,#dff6ef)}
.mini-banner strong{font-family:var(--font-display);font-weight:600;font-size:18px;color:#584851}
.mini-banner p{font-weight:500;color:#8a7b7e;font-size:11px}
.mini-banner i{animation:atelier-slow-turn 19s linear infinite}
.empty{background:linear-gradient(130deg,#fff9fd,#f5f2ff);border-color:#e9ddef}
.empty h3{font-family:var(--font-display);font-weight:600;color:#594653}
.empty p{font-weight:500}
.empty-symbol{border-radius:50%;background:#f5e3e6;color:#b66a88}


/* Event images stay fully visible: animation affects only the surrounding presentation. */
.st-event-group-card,.st-event-group-card.blue,.st-event-group-card.mint,.st-event-group-card.yellow,.st-event-group-card.lilac {
  border:1px solid #eee3f1;border-radius:18px;background:#fff;
  box-shadow:0 7px 24px #846d6d12;
  transition:transform .45s var(--spring),box-shadow .45s var(--spring),border-color .3s;
}
.st-event-group-card:hover{transform:translateY(-4px);box-shadow:0 17px 36px #846d6d21;border-color:#debfca}
.st-event-group-card h3{font-family:var(--font-display);font-size:20px;font-weight:600;color:#54414d}
.st-event-group-summary{font-weight:500;color:#8d7e82}
.st-event-slide-stage{background:#fbf6f4;border:1px solid #f0e5e1;border-radius:13px}
.st-event-slide-img{transition:filter .4s,transform .6s var(--spring)}
.st-event-slider:hover .st-event-slide-img{filter:saturate(1.06)}
.st-event-slide-arrow{border:1px solid #eddbdc;background:#fffdf9e8;color:#9f5476;border-radius:50%;width:34px;height:34px;font-size:24px;backdrop-filter:blur(9px);transition:transform .25s var(--spring),background .2s}
.st-event-slide-arrow.prev:hover{transform:translateY(-50%) translateX(-3px);background:#fff}
.st-event-slide-arrow.next:hover{transform:translateY(-50%) translateX(3px);background:#fff}
.st-event-slide-caption strong{color:#775766;font-weight:700}
.st-event-slide-caption span,.st-event-home-info span{color:#957e88;font-weight:500}
.st-event-home-compact .st-event-home-info strong{color:#6e5260}
.st-event-open{background:#f8e9ed;border:1px solid #f0dce3;color:#994e6d;border-radius:10px;transition:transform .3s var(--spring),background .25s}
.st-event-open:hover{background:#f2dce4;transform:translateY(-2px)}
.st-event-timeline-rail{border-color:#d9a8b6}
.st-event-rail-date{background:#fbf3ef;border-color:#ebdcd9;color:#ab6c84}
.st-event-node{background:#bb6c88;box-shadow:0 0 0 2px #e3bac5}
.st-event-milestone-image{background:#faf4f0;border-color:#ede0df}
.st-event-dialog-heading{background:linear-gradient(120deg,#fff0f7,#f1eaff)}
.st-event-dialog-heading h2{font-family:var(--font-display);font-weight:600;color:#513e4a}
.st-event-dialog-edition-heading{background:#fbf5f0!important;color:#a15d7c!important}
.st-event-edition-detail{border-color:#eadddc}

/* Detail view is a proper reading surface, not a separate color system. */
.detail-dialog {
  width:calc(100% - 24px);border-radius:20px;background:#fffdfa;
  border:1px solid #eadfdb;box-shadow:0 30px 100px #3e293e57;
}
/* Do not transform the scrollable dialog: it contains the position:fixed guide filter button. */
.detail-dialog[open]{animation:atelier-dialog-soft-enter .48s var(--spring) both}
.detail-dialog::backdrop{background:#32242e91;backdrop-filter:blur(8px);animation:atelier-backdrop-enter .3s ease both}
.dialog-close{background:#fffaf1eb;color:#855d6d;border:1px solid #ecdad9;box-shadow:0 4px 12px #69495720;transition:transform .4s var(--spring),background .2s}
.dialog-close:hover{transform:rotate(90deg);background:#fff}
.dialog-body h2{font-family:var(--font-display);font-size:27px;font-weight:600;color:#523d4a}
.dialog-body p{font-size:12px;font-weight:500;color:#84777e}
.dialog-meta span{background:#fbf5f0;border:1px solid #eee2de;color:#9b7987;font-weight:600}
.dialog-art.pink{background:linear-gradient(120deg,#f8e9e9,#f1dce1)}
.dialog-art.blue{background:linear-gradient(120deg,#edf6f2,#dcebe8)}
.dialog-art.mint{background:linear-gradient(120deg,#edf6ee,#daebe0)}
.dialog-art.yellow{background:linear-gradient(120deg,#fbf3e3,#f3e6cb)}
.dialog-art.lilac{background:linear-gradient(120deg,#f5edf2,#e8e2ed)}
.dialog-placeholder{border-color:#e9dcda;background:#fcf7f3;color:#92828a}
.st-entry{background:#fffdfa;border-color:#ece2df;border-radius:12px;transition:box-shadow .3s,border-color .3s}
.st-entry:hover{border-color:#e2cbd1;box-shadow:0 6px 18px #8b717013}
.st-guide-filter-form{border-radius:13px}
/* Floating filter: layered glow, soft lift, orbiting stardust and a responsive active state.
   Effects are confined to the button, not its fixed-position wrapper (drag-to-edge stays intact). */
.st-guide-filter-float.is-visible{animation:st-filter-arrive .45s ease-out both}
.st-guide-filter-toggle{
  position:relative;
  isolation:isolate;
  overflow:visible;
  z-index:1;
  border:2px solid rgba(255,255,255,.95);
  background:radial-gradient(circle at 28% 18%,#c4f6ffb8 0%,transparent 38%),
    linear-gradient(140deg,#8feeff 0%,#96dcff 48%,#f5f5ff 100%);
  color:#257ca9;
  box-shadow:0 0 0 4px #77d7f229,0 8px 22px #2086b65e,0 14px 34px #6c6bd633,
    inset 0 2px 2px #ffffff99,inset 0 -3px 6px #16548e55;
  transition:transform .48s var(--spring),box-shadow .38s ease,background .3s ease;
  animation:st-filter-breathe 3.5s ease-in-out infinite;
  -webkit-tap-highlight-color:transparent;
}
.st-guide-filter-toggle::before,
.st-guide-filter-toggle::after{content:'';position:absolute;pointer-events:none;border-radius:50%}
.st-guide-filter-toggle::before{
  inset:-7px;
  border:1.5px dashed #89e4ffad;
  box-shadow:0 0 13px #77d6ed40,inset 0 0 10px #aedfff20;
  animation:st-filter-orbit 13s linear infinite;
  transition:inset .45s var(--spring),border-color .35s,box-shadow .35s;
}
.st-guide-filter-toggle::after{
  inset:-14px;
  background:
    radial-gradient(circle at 10% 27%,#ffffff 0 2px,transparent 2.8px),
    radial-gradient(circle at 84% 7%,#8adfff 0 2px,transparent 2.8px),
    radial-gradient(circle at 98% 68%,#d0bbff 0 2.3px,transparent 3px),
    radial-gradient(circle at 26% 95%,#ffffff 0 1.6px,transparent 2.4px),
    radial-gradient(circle at 73% 103%,#8af1ff 0 1.5px,transparent 2px);
  filter:drop-shadow(0 0 3px #adf1ff);
  animation:st-filter-stardust 3.6s ease-in-out infinite;
}
.st-guide-filter-toggle svg{
  position:relative;z-index:1;
  filter:drop-shadow(0 2px 2px #124e8b66);
  animation:st-filter-icon-float 3.4s ease-in-out infinite;
  transition:transform .45s var(--spring),filter .4s ease;
}
.st-guide-filter-toggle:hover,.st-guide-filter-toggle:focus-visible{
  background:radial-gradient(circle at 30% 18%,#f2ffffac 0%,transparent 38%),
    linear-gradient(135deg,#65e1f3,#79cfff 46%,#f1f0ff);
  color:#246f9f;
  transform:translateY(-4px) rotate(-7deg) scale(1.12);
  box-shadow:0 0 0 6px #6bddf442,0 0 25px #2cceef99,0 15px 30px #247cbd70,
    inset 0 2px 3px #ffffffcc,inset 0 -2px 6px #2c57ac44;
  animation:st-filter-breathe 1.6s ease-in-out infinite;
}
.st-guide-filter-toggle:hover::before,.st-guide-filter-toggle:focus-visible::before{
  inset:-10px;border-color:#abebff;
  box-shadow:0 0 21px #7cdef885,inset 0 0 13px #a0e6f955;
  animation-duration:3.5s;
}
.st-guide-filter-toggle:hover::after,.st-guide-filter-toggle:focus-visible::after{
  animation-duration:1.7s;
}
.st-guide-filter-toggle:hover svg,.st-guide-filter-toggle:focus-visible svg{
  transform:rotate(-16deg) scale(1.12);
  animation:none;
  filter:drop-shadow(0 0 6px #e7ffff);
}
.st-guide-filter-toggle[aria-expanded="true"]{
  background:radial-gradient(circle at 28% 20%,#f8eeffb5 0%,transparent 42%),
    linear-gradient(140deg,#cbbbff 0%,#bfb8ff 46%,#3b9fd4 100%);
  color:#594f97;
  transform:scale(1.065) rotate(5deg);
  box-shadow:0 0 0 6px #b8a3f847,0 0 26px #9585f689,
    0 12px 25px #6960c46c,inset 0 2px 2px #ffffffb3;
  animation:st-filter-breathe-open 2.6s ease-in-out infinite;
}
.st-guide-filter-toggle[aria-expanded="true"] svg{transform:rotate(80deg) scale(.98);animation:none}
.st-guide-filter-toggle:active{
  transform:scale(.94) rotate(0deg);
  animation:none;
  box-shadow:0 0 0 7px #9adfff45,0 4px 11px #2977a35b,inset 0 2px 6px #0c59898c;
}
.st-guide-filter-float.is-snapping .st-guide-filter-toggle{
  animation:st-filter-snap .28s var(--spring) both;
}
.st-guide-filter-panel:not([hidden]){
  transform-origin:top left;
  animation:st-filter-panel-in .35s var(--spring) both;
  box-shadow:0 18px 52px #3f72963e,0 3px 14px #5992c41a;
}
.st-guide-filter-float.is-right .st-guide-filter-panel:not([hidden]){
  transform-origin:top right;
  animation-name:st-filter-panel-in-right;
}
/* Never let the generic card hover filter overwrite the suit background's blur. */
.item-cover.st-suit-cover img.st-suit-cover-blur,
.item-card:hover .item-cover.st-suit-cover img.st-suit-cover-blur,
.item-card:focus-within .item-cover.st-suit-cover img.st-suit-cover-blur{
  filter:blur(5px);
  opacity:1;
  transform:scale(1.35);
}


/* Mobile: preserve the original single-column flows and sticky bottom navigation. */
@media(max-width:1250px){
  .brand-copy strong{font-size:16px}
  .feature-body strong,.feature.yellow .feature-body strong{font-size:17px}
  .hero h1{font-size:clamp(34px,3.8vw,45px)}
}
@media(max-width:1020px){
  .feature-emoji{width:72px;flex-basis:72px;height:82px}
  .feature-emoji img{width:98px;height:98px}
  .feature{min-height:158px}
}
@media(max-width:800px){
  .topbar{min-height:73px;height:auto;position:relative;background:#fffdfaeb}
  .main-content{padding-top:23px;padding-bottom:105px}
  .mobile-nav{
    background:rgba(255,251,247,.94);border-top:1px solid #ebdfdc;
    box-shadow:0 -10px 30px #684f5720;backdrop-filter:blur(18px);
  }
  .mobile-nav a{color:#96858c;transition:color .3s,transform .4s var(--spring)}
  .mobile-nav a.active{color:#a64d72}
  .mobile-nav a.active::after{content:'';position:absolute;bottom:3px;width:17px;height:3px;border-radius:99px;background:#b66382}
  .mobile-nav a{position:relative}
  .mobile-nav a:hover{transform:translateY(-3px)}
  .mobile-nav a.active .mobile-nav-icon img{transform:translateY(-3px) scale(1.12)}
  .hero{min-height:325px}
  .hero-body{width:62%}
  .section-title h2{font-size:21px}
}
@media(max-width:640px){
  .topbar{padding:11px 15px}
  .main-content{padding:17px 14px 110px}
  .search-box{height:43px}
  .hero{padding:25px 20px;min-height:357px;border-radius:19px}
  .hero-body{width:78%}
  .hero.has-banner .hero-body{width:83%}
  .hero h1{font-size:clamp(29px,7.4vw,38px);letter-spacing:-.75px;line-height:1.21}
  .hero p{font-size:11px;line-height:1.8;max-width:270px}
  .hero-chip{font-size:8px;letter-spacing:1.1px;padding:7px 9px}
  .hero-buttons{max-width:230px;gap:8px;margin-top:16px}
  .hero-art{right:-35px;bottom:-35px;height:77%;width:55%;opacity:.88}
  .hero:not(.has-banner)::before{right:-260px}
  .btn-primary,.btn-secondary{font-size:10px;min-height:40px;padding:10px 12px}
  .section{margin-top:34px}
  .section-head{align-items:flex-start}
  .section-title h2{font-size:19px}
  .section-title p{font-size:10px;margin-top:4px}
  .section-icon{width:39px;height:39px;flex-basis:39px}
  .feature{min-height:108px;padding:13px 18px;gap:14px}
  .feature-body strong,.feature.yellow .feature-body strong{font-size:18px;margin:5px 0 4px}
  .feature-body span{font-size:10px}
  .feature-emoji{width:70px;height:70px;flex:0 0 70px}
  .feature-emoji img{width:90px;height:90px}
  .page-head{min-height:160px;padding:23px 19px}
  .page-head h1{font-size:30px}
  .page-head p{font-size:11px}
  .page-head::after{right:0;font-size:120px;top:-16px}
  .card-grid{gap:10px}
  .item-card{border-radius:13px}
  .item-body{padding:12px}
  .item-title{font-size:12px}
  .item-desc{font-size:10px}
  .st-guide-category-heading h3{font-size:20px}
  .st-event-group-card h3{font-size:18px}
  .dialog-body h2{font-size:24px}
  .st-guide-group-copy strong{font-size:12px}
  .mobile-nav a small{font-weight:700;letter-spacing:.01em}
}
@media(max-width:380px){
  .hero{min-height:380px}
  .hero-body{width:88%}
  .hero h1{font-size:29px}
  .hero-art{opacity:.48;width:65%}
  .hero-buttons{max-width:210px}
}

/* Viewport entrance: only enabled when our JS observes an element. */
.motion-enter{opacity:0;transform:translate3d(0,22px,0) scale(.986);filter:blur(2px);transition:opacity .76s var(--spring),transform .85s var(--spring),filter .75s ease;transition-delay:var(--reveal-delay,0ms)}
.motion-enter.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
/* Hover lift must win after an element has finished entering. */
.motion-enter.is-visible.feature:hover,.motion-enter.is-visible.item-card:hover,.motion-enter.is-visible.st-event-group-card:hover{transform:translateY(-6px)}
.atelier-scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1200;pointer-events:none;background:linear-gradient(90deg,#bd8090,#b75b7d,#c9a16b);transform:scaleX(0);transform-origin:left;box-shadow:0 2px 7px #aa5d7930}

@keyframes atelier-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1.5deg)}}
@keyframes atelier-twinkle{0%,100%{opacity:.63;transform:scale(.92) rotate(0)}50%{opacity:1;transform:scale(1.19) rotate(16deg)}}
@keyframes atelier-orbit{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes atelier-slow-turn{to{transform:rotate(360deg)}}
@keyframes atelier-brand-breathe{0%,100%{box-shadow:0 4px 15px #ba7b931c}50%{box-shadow:0 4px 24px #ba7b9344}}
@keyframes atelier-accordion{from{opacity:.65;transform:translateY(-9px)}to{opacity:1;transform:translateY(0)}}
@keyframes atelier-dialog-soft-enter{from{opacity:0;box-shadow:0 17px 55px #3e293e29}to{opacity:1;box-shadow:0 30px 100px #3e293e57}}
@keyframes atelier-backdrop-enter{from{opacity:0}to{opacity:1}}

@keyframes st-filter-arrive{
  from{opacity:0;filter:brightness(1.35)}
  to{opacity:1;filter:brightness(1)}
}
@keyframes st-filter-icon-float{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-2px) rotate(5deg)}
}
@keyframes st-filter-breathe{
  0%,100%{box-shadow:0 0 0 4px #77d7f229,0 8px 22px #2086b65e,0 14px 34px #6c6bd633,inset 0 2px 2px #ffffff99,inset 0 -3px 6px #16548e55}
  50%{box-shadow:0 0 0 7px #9ce8ff32,0 11px 28px #2086b67a,0 0 23px #4ed0ef6b,inset 0 2px 2px #ffffff99,inset 0 -3px 6px #16548e55}
}
@keyframes st-filter-breathe-open{
  0%,100%{box-shadow:0 0 0 5px #b8a3f847,0 0 24px #9585f689,0 12px 25px #6960c46c,inset 0 2px 2px #ffffffb3}
  50%{box-shadow:0 0 0 9px #b8a3f82e,0 0 30px #9585f6c9,0 12px 25px #6960c46c,inset 0 2px 2px #ffffffb3}
}
@keyframes st-filter-orbit{to{transform:rotate(360deg)}}
@keyframes st-filter-stardust{
  0%,100%{opacity:.58;transform:rotate(-6deg) scale(.94)}
  45%{opacity:1;transform:rotate(12deg) scale(1.12)}
  75%{opacity:.76;transform:rotate(4deg) scale(1.02)}
}
@keyframes st-filter-snap{
  0%{transform:scale(.92)}
  65%{transform:scale(1.17)}
  100%{transform:scale(1)}
}
@keyframes st-filter-panel-in{
  from{opacity:0;transform:translateX(-10px) translateY(6px) scale(.96)}
  to{opacity:1;transform:translateX(0) translateY(0) scale(1)}
}
@keyframes st-filter-panel-in-right{
  from{opacity:0;transform:translateX(10px) translateY(6px) scale(.96)}
  to{opacity:1;transform:translateX(0) translateY(0) scale(1)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .motion-enter{opacity:1!important;transform:none!important;filter:none!important}
}

/* Máy tính kim cương vui nhộn — exclusively on #home. */
.st-diamond-section{margin:0}
.st-diamond-calc{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:27px;border:1px solid #e9e0ed;
  background:radial-gradient(ellipse 57% 92% at 96% 0%,#e2f6ffab 0%,transparent 72%),
    radial-gradient(ellipse 55% 65% at 0% 100%,#ffe6e98a,transparent 72%),
    linear-gradient(135deg,#fffefc,#fffafa 52%,#f9f8ff);
  box-shadow:0 22px 58px #73607912,inset 0 1px 0 #fff;
  padding:27px 29px 30px;
  transition:box-shadow .45s var(--spring),border-color .4s ease;
}
.st-diamond-calc:hover{box-shadow:0 27px 65px #84718b1d,inset 0 1px 0 #fff;border-color:#e8d3e7}
.st-diamond-calc::before{content:'';position:absolute;z-index:-1;pointer-events:none;width:420px;height:420px;right:-220px;top:-235px;border-radius:50%;border:1px solid #ffffffbd;box-shadow:0 0 0 27px #ffffff24,0 0 0 56px #ffffff25;animation:st-diamond-halo 12s ease-in-out infinite}
.st-diamond-ambient{position:absolute;pointer-events:none;color:#99d4f1;opacity:.75;font-size:35px;z-index:0;text-shadow:0 0 12px #c9efffa6;animation:st-diamond-twinkle 4.8s ease-in-out infinite}
.st-diamond-ambient.one{right:172px;top:24px;font-size:22px}.st-diamond-ambient.two{right:34px;top:143px;animation-delay:1.7s}
.st-diamond-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:119px;position:relative}
.st-diamond-head-copy{position:relative;z-index:2}
.st-diamond-eyebrow{display:inline-block;color:#c17eaa;font-weight:800;letter-spacing:2.1px;font-size:9px;margin-bottom:9px}
.st-diamond-heading h2{font-family:var(--font-display);font-size:clamp(23px,2.3vw,32px);font-weight:700;letter-spacing:-.8px;line-height:1.25;margin:0;color:#624e69}
.st-diamond-heading h2 em{font-style:normal;color:#d885ad;background:linear-gradient(100deg,#d987ad,#a886d4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.st-diamond-heading p{font-size:11.5px;color:#988c9b;line-height:1.7;font-weight:500;margin:9px 0 0}
.st-diamond-jewel-wrap{height:118px;width:155px;flex:0 0 155px;display:grid;place-items:center;filter:drop-shadow(0 13px 17px #7db5e740);transform-origin:52% 74%;animation:st-diamond-floating 6s ease-in-out infinite}
.st-diamond-graphic{width:129px;height:124px;filter:drop-shadow(0 4px 4px #84d6f27d)}
.st-diamond-layout{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:18px;align-items:stretch;position:relative;z-index:1;margin-top:13px}
.st-diamond-controls{border:1px solid #f1e7ef;border-radius:18px;background:#ffffffc9;box-shadow:0 4px 19px #8a77930a;padding:24px 20px 20px;min-width:0}
.st-diamond-label{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;font-size:12px;font-weight:800;color:#726072;margin-bottom:11px}
.st-diamond-label span{font-size:9px;color:#c790ad;background:#fff0f6;padding:5px 8px;border-radius:99px}
.st-diamond-input-wrap{display:flex;align-items:center;gap:10px;border:1.5px solid #eadbe9;border-radius:13px;background:#fff;box-shadow:inset 0 2px 5px #75596b07,0 4px 15px #bda5ba0b;padding:0 13px;transition:border-color .26s,box-shadow .26s,transform .32s var(--spring)}
.st-diamond-input-wrap:focus-within{border-color:#c4b2ea;box-shadow:0 0 0 4px #d4c6f34f,0 7px 18px #bda5ba1d;transform:translateY(-1px)}
.st-diamond-input-wrap>span:first-child{color:#8edcf5;font-size:24px;text-shadow:0 2px 8px #8edcf59c}
.st-diamond-input-wrap input{width:100%;min-width:0;min-height:57px;font-family:var(--font-sans);font-size:25px;font-weight:800;color:#675475;border:0;background:transparent;outline:none!important;box-shadow:none!important;appearance:textfield;-moz-appearance:textfield}
.st-diamond-input-wrap input::-webkit-inner-spin-button,.st-diamond-input-wrap input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.st-diamond-unit{font-size:10px;font-weight:900;color:#b295b6}
.st-diamond-divider{height:1px;margin:22px 0;background:linear-gradient(90deg,transparent,#e8dce8 12%,#e8dce8 88%,transparent)}
.st-diamond-switch-line{display:flex;align-items:center;justify-content:space-between;gap:15px}
.st-diamond-switch-copy{display:flex;flex-direction:column;gap:6px;min-width:0}
.st-diamond-switch-copy strong{font-size:12px;color:#766078;font-weight:800}
.st-diamond-switch-copy small{font-size:10px;color:#a79aab;line-height:1.65;font-weight:500}
.st-diamond-switch{position:relative;flex:0 0 49px;height:29px;cursor:pointer}
.st-diamond-switch input{position:absolute;width:100%;height:100%;inset:0;opacity:0;cursor:pointer;z-index:2;margin:0}
.st-diamond-switch-track{display:block;width:49px;height:29px;border:1px solid #e9dfec;border-radius:99px;background:#e7e2ea;box-shadow:inset 0 1px 3px #705d7b19;transition:background .3s,border-color .3s,box-shadow .3s}
.st-diamond-switch-track::after{content:'✦';display:grid;place-items:center;color:#c2b1c3;font-size:9px;position:absolute;top:4px;left:4px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #69547230;transition:transform .35s var(--spring),color .3s}
.st-diamond-switch input:checked+.st-diamond-switch-track{background:linear-gradient(120deg,#a9dff5,#b9ace9);border-color:#a8cdea;box-shadow:0 0 0 3px #cae8f34d}
.st-diamond-switch input:checked+.st-diamond-switch-track::after{transform:translateX(20px) rotate(1turn);color:#96bedc}
.st-diamond-switch input:focus-visible+.st-diamond-switch-track{outline:2px solid #c6bbef;outline-offset:3px}
.st-diamond-settings{margin:17px 0 0;border-radius:12px;border:1px dashed #e8d9e9;background:linear-gradient(140deg,#fefbff,#f6f8ff);padding:13px 14px;animation:st-diamond-panel .32s var(--spring) both}
.st-diamond-settings[hidden]{display:none!important}
.st-diamond-settings summary{font-size:11px;font-weight:800;color:#9b77b1;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px}
.st-diamond-settings summary::-webkit-details-marker{display:none}
.st-diamond-settings .st-diamond-chev{font-size:17px;transition:transform .25s}
.st-diamond-settings[open] .st-diamond-chev{transform:rotate(180deg)}
.st-diamond-settings p{font-size:10px;line-height:1.6;color:#a497ad;margin:12px 0 10px}
.st-diamond-eligible-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.st-diamond-eligible{position:relative;display:block;cursor:pointer}
.st-diamond-eligible input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;margin:0}
.st-diamond-eligible span{display:grid;place-items:center;border:1px solid #e9dcea;border-radius:7px;min-height:29px;color:#b5a6b8;font-size:10px;font-weight:800;background:#fff;transition:background .2s,color .2s,transform .22s,box-shadow .22s}
.st-diamond-eligible input:checked+span{background:linear-gradient(120deg,#d9f5ff,#eee3ff);border-color:#c5d8f6;color:#866ba8;box-shadow:0 2px 8px #b0c9e733}
.st-diamond-eligible input:hover+span{transform:translateY(-2px)}
.st-diamond-eligible input:focus-visible+span{outline:2px solid #c6bbef;outline-offset:2px}
.st-diamond-results{background:linear-gradient(152deg,#fff8fb,#fff 50%,#f2faff);border:1px solid #f1e2ea;border-radius:18px;box-shadow:0 8px 28px #9c779312;min-height:380px;padding:21px 22px;position:relative;overflow:hidden}
.st-diamond-results::before{content:'';width:184px;height:184px;border-radius:50%;background:radial-gradient(circle,#f0dff7a0,transparent 70%);position:absolute;right:-80px;top:-86px;pointer-events:none}
.st-diamond-result-heading{position:relative;display:flex;justify-content:space-between;align-items:center}
.st-diamond-result-kicker{letter-spacing:1.4px;color:#c096ba;font-size:9px;font-weight:800}
.st-diamond-result-heading h3{font:700 22px/1.4 var(--font-display);color:#725772;margin:5px 0 0;letter-spacing:-.55px}
.st-diamond-result-heading h3 em{font-style:normal;color:#cb87b5}
.st-diamond-result-sparkle{font-size:25px;color:#d4b6e9;animation:st-diamond-twinkle 4s ease-in-out infinite}
.st-diamond-total{background:linear-gradient(125deg,#9b90d8,#a4b8e9 52%,#82d5ed);border-radius:15px;padding:16px 20px 15px;position:relative;overflow:hidden;margin:15px 0 14px;color:#fff;box-shadow:0 9px 19px #929ddd3b}
.st-diamond-total::before{content:'✧';font-size:110px;position:absolute;right:12px;top:-40px;color:#ffffff26;transform:rotate(14deg);pointer-events:none;animation:st-diamond-twinkle 8s ease-in-out infinite}
.st-diamond-total>span{font-size:10px;letter-spacing:.9px;font-weight:700;color:#fffef6e8;position:relative}
.st-diamond-total-number{font:800 clamp(35px,3.6vw,46px)/1.12 var(--font-sans);letter-spacing:-1.2px;margin:7px 0;position:relative;text-shadow:0 3px 12px #5663a54a}
.st-diamond-total-number small{display:inline-block;margin-left:10px;font-size:10px;font-weight:600;letter-spacing:0;color:#fffef6d7;white-space:nowrap}
.st-diamond-total p{position:relative;margin:0;font-size:10px;line-height:1.65;color:#f9f8ff}
.st-diamond-total p strong{color:#fff}
.st-diamond-stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.st-diamond-stat{background:#fff;border:1px solid #f0e8ef;border-radius:11px;padding:11px 10px;min-width:0;display:flex;flex-direction:column;gap:7px}
.st-diamond-stat small{font-size:9px;font-weight:700;color:#aa95a7;line-height:1.4}
.st-diamond-stat strong{font-size:clamp(14px,1.6vw,19px);font-weight:800;color:#a1759d;overflow-wrap:anywhere;line-height:1.1}
.st-diamond-stat-blue strong{color:#63aac6}.st-diamond-stat-jade strong{color:#c59b69}
.st-diamond-combo-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 0 10px}
.st-diamond-combo-title strong{font-size:11px;font-weight:800;color:#79627a}.st-diamond-combo-title span{font-size:9px;color:#aea1af}
.st-diamond-combo{display:flex;flex-direction:column;gap:7px;max-height:270px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#e9d5eb transparent}
.st-diamond-pack{display:flex;align-items:center;gap:9px;min-width:0;background:#fff;border:1px solid #f0e6ef;border-radius:11px;padding:9px 10px;transition:transform .28s var(--spring),border-color .28s,box-shadow .28s}
.st-diamond-pack:hover{transform:translateX(3px);border-color:#e4d2ed;box-shadow:0 4px 12px #ba9ac01f}
.st-diamond-pack-icon{display:grid;place-items:center;flex:0 0 29px;width:29px;height:29px;border-radius:10px;background:linear-gradient(130deg,#d2f2fc,#d7cafa);color:#8baee3;font-size:16px}
.st-diamond-pack-name{display:flex;flex-direction:column;gap:2px;font-size:11px;color:#99819a;font-weight:600;min-width:0;flex:1}
.st-diamond-pack-name strong{font-weight:900;font-size:14px;color:#795d89}
.st-diamond-pack-name small{color:#80b3c9;font-size:9px}
.st-diamond-pack-qty{font-size:13px;font-weight:800;color:#ad89c5;white-space:nowrap}
.st-diamond-pack-detail{min-width:100px;text-align:right;font-size:11px;color:#665774;font-weight:800;white-space:nowrap}
.st-diamond-pack-detail small{display:block;font-size:9px;font-weight:700;color:#c3a076;margin-top:4px}
.st-diamond-bonus-note{margin:11px 0 0;color:#92a0b4;font-size:10px;line-height:1.6}
.st-diamond-loading,.st-diamond-error{color:#a780a0;font-size:12px;line-height:1.8;padding:20px 4px}
.st-diamond-error{background:#fff5f7;border:1px solid #efd5db;border-radius:13px;padding:17px;color:#b87585}
.st-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes st-diamond-halo{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes st-diamond-floating{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-9px) rotate(4deg)}}
@keyframes st-diamond-twinkle{0%,100%{opacity:.55;transform:scale(.86) rotate(-12deg)}50%{opacity:1;transform:scale(1.14) rotate(9deg)}}
@keyframes st-diamond-panel{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.st-diamond-layout{grid-template-columns:minmax(0,1fr)}.st-diamond-jewel-wrap{width:124px;flex-basis:124px}.st-diamond-graphic{width:110px}}
@media(max-width:800px){.st-diamond-layout{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.st-diamond-calc{padding:20px}.st-diamond-controls{padding:18px 14px}.st-diamond-results{padding:18px 15px}.st-diamond-heading h2{font-size:clamp(23px,4vw,29px)}}
@media(max-width:680px){.st-diamond-calc{border-radius:19px;padding:17px 13px 15px}.st-diamond-heading{min-height:94px}.st-diamond-eyebrow{font-size:8px;letter-spacing:1.25px}.st-diamond-heading h2{font-size:23px}.st-diamond-heading p{font-size:10px;max-width:260px}.st-diamond-jewel-wrap{width:82px;height:93px;flex:0 0 82px}.st-diamond-graphic{width:83px;height:82px}.st-diamond-ambient.one{right:95px;top:4px}.st-diamond-ambient.two{right:3px;top:94px;font-size:22px}.st-diamond-layout{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:13px}.st-diamond-controls{padding:16px 14px}.st-diamond-results{padding:16px 14px;min-height:0}.st-diamond-input-wrap input{min-height:50px;font-size:23px}.st-diamond-total-number{font-size:38px}.st-diamond-stat strong{font-size:17px}.st-diamond-combo{max-height:unset}}
@media(max-width:365px){.st-diamond-heading h2{font-size:21px}.st-diamond-jewel-wrap{width:62px;flex-basis:62px}.st-diamond-graphic{width:68px}.st-diamond-stat-row{gap:5px}.st-diamond-stat{padding:10px 6px}.st-diamond-stat strong{font-size:14px}.st-diamond-pack-detail{min-width:83px;font-size:10px}.st-diamond-total-number small{margin-left:6px;font-size:9px}}

/* Two original-style home banners: the calculator lives in the dialog only. */
button.mini-banner.st-diamond-banner{width:100%;font:inherit;text-align:left;cursor:pointer;appearance:none;color:inherit;isolation:isolate;transition:transform .35s var(--spring),box-shadow .35s ease,border-color .35s ease;background:radial-gradient(ellipse at 89% 18%,#ecfaff 0%,transparent 60%),linear-gradient(125deg,#fff8e9,#f7ebff);border:1px solid #e9deed;box-shadow:0 8px 23px #a58db91a}
.mini-banner.st-diamond-banner::before{content:'';position:absolute;inset:-75% auto auto -35%;width:40%;height:240%;pointer-events:none;transform:translateX(-120%) rotate(22deg);background:linear-gradient(90deg,transparent,#ffffffad,transparent);transition:transform .8s ease}
.mini-banner.st-diamond-banner:hover,.mini-banner.st-diamond-banner:focus-visible{transform:translateY(-4px);box-shadow:0 15px 36px #ae9ec144;border-color:#d1c5ea;outline:none}
.mini-banner.st-diamond-banner:hover::before,.mini-banner.st-diamond-banner:focus-visible::before{transform:translateX(460%) rotate(22deg)}
.mini-banner.st-diamond-banner i{color:#9abeee;text-shadow:0 0 20px #c4eaff;animation:st-diamond-twinkle 4s ease-in-out infinite}
.mini-banner.st-diamond-banner:hover i{animation:st-diamond-twinkle 1.6s ease-in-out infinite}
.mini-banner.st-diamond-banner:focus-visible{outline:2px solid #9e93dc;outline-offset:3px}
.mini-banner.st-feature-slot{border-style:dashed;opacity:.84}
.detail-dialog.st-diamond-dialog{width:calc(100% - 24px);max-width:1030px;max-height:calc(100dvh - 26px);overflow-y:auto;overscroll-behavior:contain;padding:0;border-radius:26px}
.st-diamond-dialog #dialog-content{width:100%;min-width:0}
.st-diamond-dialog .st-diamond-calc{border:0;border-radius:26px;box-shadow:none;padding:24px 27px 28px;overflow:hidden}
.st-diamond-dialog .st-diamond-calc:hover{box-shadow:none;border-color:transparent}
.st-diamond-dialog .st-diamond-heading{padding-right:37px}
.st-diamond-dialog .dialog-close{position:absolute;right:14px;top:14px;margin:0;z-index:10}
.st-diamond-dialog .st-diamond-layout{margin-top:9px;align-items:start}
.st-diamond-dialog .st-diamond-divider{margin:22px 0}
@media(max-width:680px){.detail-dialog.st-diamond-dialog{border-radius:19px;max-height:calc(100dvh - 16px);width:calc(100% - 16px)}.st-diamond-dialog .st-diamond-calc{padding:17px 13px 17px}.st-diamond-dialog .st-diamond-heading{padding-right:20px}.st-diamond-dialog .dialog-close{top:8px;right:8px;margin:0}}
@media(prefers-reduced-motion:reduce){.mini-banner.st-diamond-banner,.mini-banner.st-diamond-banner::before,.mini-banner.st-diamond-banner i{animation:none!important;transition:none!important}}

/* Calculator is intentionally blank until a milestone is entered. */
.st-diamond-empty{min-height:240px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:10px;padding:22px 16px;color:#8e83a8}
.st-diamond-empty>span{font-size:50px;line-height:1;color:#bcb6ed;animation:st-diamond-twinkle 4s ease-in-out infinite}
.st-diamond-empty strong{font:700 18px/1.4 var(--font-display);color:#756b9a}
.st-diamond-empty p{margin:0;max-width:260px;font-size:11px;line-height:1.8;color:#998daa}
.st-diamond-input-wrap input::placeholder{font-size:16px;font-weight:500;color:#b7abc7;opacity:1}


/* Chỉ các NHÓM ngoài trang Hướng dẫn mới được xếp hai cột.
   Popup chi tiết (.st-guide-section) luôn dùng hàng đủ chiều ngang. */
.st-guide-category > .st-guide-groups {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:12px;
}
.st-guide-section > .st-guide-groups {
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}
.st-guide-category > .st-guide-groups > .st-guide-group {min-width:0;}
.st-guide-category > .st-guide-groups > .st-guide-group[open] {grid-column:1/-1;}
.st-guide-group-head {min-height:72px;gap:11px;padding:10px 13px;}
.st-guide-group-image {width:50px;height:50px;flex-basis:50px;border-radius:11px;font-size:25px;}
.st-guide-group-copy strong {font-size:13px;line-height:1.35;}
.st-guide-group-copy small {font-size:10px;}
.st-guide-group-chevron {font-size:21px;}
.st-guide-group-items {padding:14px;}
.st-guide-compact-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,242px),1fr));
  gap:10px;
}
.st-guide-compact-card {
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
  min-height:78px;
  width:100%;
  text-align:left;
  overflow:hidden;
  padding:8px 12px 8px 8px;
  cursor:pointer;
  color:#554d66;
  border:1px solid #eee8f3;
  border-radius:13px;
  background:linear-gradient(145deg,#fff,#fffcff);
  box-shadow:0 2px 10px #7773a00b;
  font-family:var(--font-sans);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
.st-guide-compact-card::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 20%,#ffffffa1 50%,transparent 76%);
  transform:translateX(-120%);
  transition:transform .65s ease;
}
.st-guide-compact-card:hover,
.st-guide-compact-card:focus-visible {
  transform:translateY(-3px);
  border-color:#c8d6f5;
  background:linear-gradient(120deg,#fff,#f4f9ff);
  box-shadow:0 9px 23px #869dc526;
}
.st-guide-compact-card:hover::after,.st-guide-compact-card:focus-visible::after {transform:translateX(120%);}
.st-guide-compact-card:focus-visible {outline:3px solid #acdfff;outline-offset:2px;}
.st-guide-compact-thumb {
  display:grid;
  place-items:center;
  width:60px;
  height:60px;
  flex:0 0 60px;
  overflow:hidden;
  border:1px solid #f5e9f7;
  border-radius:10px;
  background:linear-gradient(140deg,#fff1fa,#edf7ff);
}
.st-guide-compact-card.blue .st-guide-compact-thumb {background:linear-gradient(135deg,#ebf8ff,#dfeeff);}
.st-guide-compact-card.yellow .st-guide-compact-thumb {background:linear-gradient(135deg,#fff9eb,#fdf1d5);}
.st-guide-compact-card.mint .st-guide-compact-thumb {background:linear-gradient(135deg,#ecfff8,#ddf8ee);}
.st-guide-compact-card.lilac .st-guide-compact-thumb {background:linear-gradient(135deg,#f6f0ff,#e9e5ff);}
.st-guide-compact-thumb img {display:block;width:100%;height:100%;object-fit:contain;transition:transform .3s ease;}
.st-guide-compact-card:hover .st-guide-compact-thumb img {transform:scale(1.08);}
.st-guide-compact-copy {display:flex;flex:1;min-width:0;flex-direction:column;justify-content:center;gap:4px;}
.st-guide-compact-copy small {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#a18ab5;
  font-size:10px;
  font-weight:700;
  letter-spacing:.02em;
}
.st-guide-compact-copy strong {
  display:block;
  min-width:0;
  color:#5c526d;
  font-size:12px;
  font-weight:750;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.st-guide-compact-arrow {
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  flex:0 0 24px;
  border-radius:50%;
  background:#f2f0fc;
  color:#9b88bf;
  font-size:13px;
  transition:transform .25s ease,background .25s ease;
}
.st-guide-compact-card:hover .st-guide-compact-arrow,
.st-guide-compact-card:focus-visible .st-guide-compact-arrow {transform:translate(2px,-2px);background:#e4efff;}
@media(max-width:750px) {
  .st-guide-category > .st-guide-groups {grid-template-columns:1fr;gap:9px;}
  .st-guide-group-head {min-height:68px;padding:9px 11px;}
  .st-guide-group-image {width:47px;height:47px;flex-basis:47px;}
  .st-guide-group-items {padding:10px;}
  .st-guide-compact-grid {grid-template-columns:1fr;gap:8px;}
  .st-guide-compact-card {min-height:68px;gap:10px;}
  .st-guide-compact-thumb {width:52px;height:52px;flex-basis:52px;}
  .st-guide-compact-copy strong {font-size:12px;}
}
@media(prefers-reduced-motion:reduce) {
  .st-guide-compact-card,.st-guide-compact-card::after,.st-guide-compact-thumb img,.st-guide-compact-arrow {transition:none;}
  .st-guide-compact-card:hover,.st-guide-compact-card:focus-visible {transform:none;}
}

/* Hướng dẫn cá nhân · cửa sổ nhập mã và thư viện riêng */
.st-feature-slot{cursor:pointer;font-family:inherit;text-align:left;width:100%;}
.st-feature-slot:hover{transform:translateY(-4px);box-shadow:0 18px 38px #a5d7c545;}
.st-feature-slot:focus-visible{outline:3px solid #8edbc8;outline-offset:4px;}
.detail-dialog.st-personal-dialog{width:min(540px,calc(100vw - 22px));max-height:min(88dvh,820px);border:1px solid #e5f5f0;border-radius:26px;background:linear-gradient(145deg,#fffefd,#f6fffc);box-shadow:0 26px 75px #8eacaa50;overflow-y:auto;}
.st-personal-dialog .dialog-close{position:absolute;top:15px;right:15px;z-index:5;}
.st-personal-code-dialog{padding:clamp(22px,4vw,36px);}
.st-personal-hero{display:flex;gap:16px;align-items:start;margin:10px 30px 23px 0;}
.st-personal-sparkle{flex:0 0 58px;height:58px;display:grid;place-items:center;border-radius:20px;color:#76cbbb;font-size:30px;background:radial-gradient(circle at 25% 20%,#fff 0,transparent 40%),linear-gradient(135deg,#d4f9eb,#dcf1ff);box-shadow:0 9px 18px #97dbca38;animation:stPersonalFloat 3.5s ease-in-out infinite;}
.st-personal-overline{display:block;font-size:10px;letter-spacing:1.5px;color:#84b9ae;font-weight:850;margin-bottom:7px;}
.st-personal-hero h2{font:800 clamp(23px,4vw,31px)/1.2 var(--font-display);color:#6d8494;margin:0 0 10px;}
.st-personal-hero p{font-size:12px;line-height:1.85;color:#8c9ca9;margin:0;}
.st-personal-connected{background:#effcf6;color:#78a99a;border-radius:12px;padding:10px 13px;font-size:12px;line-height:1.5;margin-bottom:16px;}
.st-personal-code-form{display:grid;gap:10px;}
.st-personal-code-form label{color:#7e95a0;font-size:12px;font-weight:800;}
.st-personal-code-form input{width:100%;min-width:0;padding:16px 17px;background:#fff;border:1.5px solid #d8ede8;border-radius:14px;font:800 17px var(--font-sans);letter-spacing:1.7px;color:#628c91;transition:border-color .2s,box-shadow .2s;}
.st-personal-code-form input:focus{outline:none;border-color:#9addcc;box-shadow:0 0 0 4px #c9f2e45c;}
.st-personal-code-form input::placeholder{letter-spacing:0;font-size:13px;color:#b6c9c8;font-weight:500;}
.st-personal-code-form .btn-primary{width:100%;border-radius:13px;min-height:48px;background:linear-gradient(120deg,#8cdbc9,#a1d5ee);color:#fff;font-weight:800;box-shadow:0 8px 18px #9adac847;}
.st-personal-code-form .btn-primary:hover{transform:translateY(-2px);box-shadow:0 11px 20px #8ecbc859;}
.st-personal-code-form .btn-primary:disabled{opacity:.6;cursor:progress;}
#st-personal-code-feedback{min-height:16px;margin:0;font-size:11px;color:#c57e96;line-height:1.65;}
.st-personal-dialog-actions{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:17px;}
.st-personal-dialog-actions .btn-secondary{background:#f2fcf7;border-color:#dbf0e6;color:#78b7a4;border-radius:11px;padding:11px;}
.st-personal-unlink,.st-personal-change{border:0;background:none;color:#a8a0ad;font-size:12px;font-weight:750;padding:8px;cursor:pointer;}
.st-personal-unlink:hover,.st-personal-change:hover{color:#d593bc;}
.st-personal-library-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 1px 16px;color:#96b4aa;font-size:12px;font-weight:850;letter-spacing:.3px;}
.st-personal-group{border:1px solid #e2eeef;background:linear-gradient(145deg,#fff,#f8fffd);border-radius:18px;overflow:hidden;margin:0 0 12px;box-shadow:0 8px 19px #bdd8d71b;}
.st-personal-group-summary{list-style:none;display:flex;gap:13px;align-items:center;cursor:pointer;padding:17px 18px;transition:background .2s;}
.st-personal-group-summary::-webkit-details-marker{display:none;}
.st-personal-group-summary:hover{background:#eafaf77c;}
.st-personal-group-icon{width:48px;height:48px;display:grid;place-items:center;flex:none;border-radius:15px;background:linear-gradient(140deg,#fff0f8,#e5f7ff);color:#b8a8de;font-size:25px;}
.st-personal-group-title{flex:1;min-width:0;display:grid;gap:4px;}
.st-personal-group-title small{font-size:10px;color:#9bbfc0;font-weight:800;}
.st-personal-group-title strong{font:800 clamp(13px,2vw,16px) var(--font-display);color:#788699;overflow-wrap:anywhere;}
.st-personal-group-count{font-size:11px;color:#a1b0b7;background:#f1f9fb;padding:7px 9px;border-radius:10px;white-space:nowrap;}
.st-personal-group-arrow{color:#a3b7bf;font-size:25px;transition:transform .25s;}
.st-personal-group[open] .st-personal-group-arrow{transform:rotate(180deg);}
.st-personal-topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:8px;padding:4px 15px 16px;animation:stPersonalAppear .3s ease both;}
.st-personal-topic{border:1px solid #edf1f6;background:#fff;box-shadow:none;border-radius:12px;display:flex;align-items:center;gap:11px;padding:10px 12px;min-height:67px;text-align:left;cursor:pointer;transition:transform .22s,border-color .22s,box-shadow .22s;}
.st-personal-topic:hover{transform:translateY(-3px);border-color:#ccebe6;box-shadow:0 9px 20px #c0e9df45;}
.st-personal-topic-mark{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:#f1f1ff;color:#b2a2d8;font-size:20px;}
.st-personal-topic-name{min-width:0;display:grid;gap:3px;flex:1;}
.st-personal-topic-name strong{font-size:12px;color:#788297;line-height:1.5;overflow-wrap:anywhere;}
.st-personal-topic-name small{color:#acafbc;font-size:10px;}
.st-personal-topic-next{color:#aacdc8;font-size:18px;}
.st-personal-empty{padding:10px;color:#9cb2bb;font-size:12px;}
@keyframes stPersonalFloat{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-5px) rotate(7deg)}}
@keyframes stPersonalAppear{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:580px){.st-personal-code-dialog{padding:22px 17px}.st-personal-hero{gap:12px;margin-right:18px}.st-personal-sparkle{width:46px;height:46px;flex-basis:46px}.st-personal-topics{grid-template-columns:1fr;padding:4px 11px 13px}.st-personal-group-count{font-size:10px}.st-personal-group-summary{gap:9px;padding:14px 12px}.st-personal-group-icon{width:40px;height:40px;flex-basis:40px}}
@media(prefers-reduced-motion:reduce){.st-personal-sparkle,.st-personal-topics{animation:none}.st-personal-topic,.st-feature-slot{transition:none}}