/* Thủy Kathy · Sắc Biển · supplied palette, 24 October 2026. */
:root{--brand-ocean:#02BFE3;--brand-coral:#E96D6F;--brand-deep:#062F3D;--brand-foam:#E8F9FC;--brand-pearl:#F7FAFB;--brand-text:#344F5C;--blue:var(--brand-ocean);--primary:var(--brand-ocean);--primary-light:var(--brand-ocean);--primary-dark:var(--brand-deep);--primary-soft:var(--brand-foam);--teal:var(--brand-ocean);--deep:var(--brand-deep);--sky:var(--brand-ocean);--navy:var(--brand-deep);--ink:var(--brand-deep);--text:var(--brand-text);--cream:var(--brand-pearl);--bg:var(--brand-pearl);--card:#fff;--soft:var(--brand-foam);--blush:var(--brand-foam);--secondary-bg:var(--brand-foam);--orange:var(--brand-coral);--peach:var(--brand-coral);--coral:var(--brand-coral);--accent:var(--brand-coral);--accent-soft:#FFF0F0;--muted:var(--brand-text);--line:#D0E6EC;--shadow:0 12px 34px #062F3D0A}
html,body{background-color:var(--brand-pearl);color:var(--brand-text)}
h1,h2,h3,h4{color:var(--brand-deep)}
body .tk-sidebar{background:#fff;color:var(--brand-deep);border-right-color:var(--line);box-shadow:6px 0 24px #062F3D04}
body .tk-sidebar-brand,body .tk-sidebar-sub,body .tk-side-link,body .tk-sidebar-footer,body .tk-sidebar-footer a{color:var(--brand-deep)}
body .tk-side-link .tk-side-icon{background:var(--brand-foam);color:var(--brand-deep);box-shadow:none}
body .tk-side-link:hover{background:var(--brand-foam);color:var(--brand-deep);box-shadow:none}
body .tk-side-link.active,body .tk-side-link:active{background:var(--brand-ocean);color:#fff;box-shadow:none}
body .tk-side-link.active .tk-side-icon,body .tk-side-link:active .tk-side-icon{background:transparent;color:#fff;box-shadow:none}
body .tk-sidebar-footer{border-top-color:var(--line)}
body .tk-sidebar-mark.has-logo{background:transparent;border:0;padding:0}
body .tk-rank-card{background:var(--brand-foam);border-color:var(--line);border-top:3px solid var(--brand-ocean);color:var(--brand-deep)}
body .tk-rank-card p,body .tk-rank-card small,body .tk-rank-card>span{color:var(--brand-text)}
.tk-coming{background:var(--brand-coral);color:#fff}
body .tk-app-header,body .tk-app-bottom{background:#fff;border-color:var(--line)}
body .tk-app-header button,body .tk-app-header label{background:var(--brand-foam);color:var(--brand-deep)}
body .tk-app-bottom a,body .tk-app-bottom label{color:var(--brand-text);border-radius:11px;transition:background .15s,color .15s}
body .tk-app-bottom a:nth-child(n) svg,body .tk-app-bottom label svg{background:transparent;color:inherit;box-shadow:none}
body .tk-app-bottom a.active,body .tk-app-bottom a.active svg,body .tk-app-bottom a:active,body .tk-app-bottom a:active svg{background:var(--brand-ocean);color:#fff;box-shadow:none}
body:has(#tk-menu-toggle:checked) .tk-app-bottom label,body:has(#tk-menu-toggle:checked) .tk-app-bottom label svg,body:has(#tk-menu-toggle:checked) .tk-app-menu{background:var(--brand-ocean);color:#fff}
.tk-app-greeting strong{color:var(--brand-deep)}
.tk-global-notices article{background:var(--brand-pearl)}.tk-global-notices article.unread{background:var(--brand-foam);border-color:var(--brand-ocean)}
.brand-home.hero,.page-hero,.hero-tools,.portal-main,.tools-main{background:var(--brand-pearl);color:var(--brand-text)}
.brand-home h1,.page-hero h1,.hero-tools h1,.portal-card h2,.catalog-intro h1,.ebook-product h2{color:var(--brand-deep)}
.brand-home .lead,.hero-tools p,.page-hero .lead,.crumbs{color:var(--brand-text)}
.brand-home .eyebrow,.hero-tools .eyebrow,.page-hero .eyebrow{color:var(--brand-deep)}
.blue-section{background:var(--brand-deep);color:#fff;border:0}.blue-section h2{color:#fff}.blue-section .kicker{color:var(--brand-ocean)}.blue-section .section-copy{color:var(--brand-foam)}
.test-callout,.credentials{background:var(--brand-foam);color:var(--brand-text)}
.brand-home .hero-photo img{border:3px solid var(--brand-ocean);box-shadow:none}
.hero-tools{border:1px solid var(--line);border-top:4px solid var(--brand-ocean)}
.btn,.portal-action,.button,button[type=submit],.submit,.free-skill-link{background:var(--brand-coral);color:#fff;font-weight:800;box-shadow:none}
.btn.secondary{background:#fff;color:var(--brand-deep);border:1px solid var(--brand-ocean)}
.footer{background:var(--brand-deep);color:var(--brand-foam);border-top:1px solid var(--line)}
.game-stage{background:var(--brand-pearl)!important}
.test-levels a>span{background:var(--brand-ocean);color:var(--brand-deep)}.test-levels strong{color:var(--brand-deep)}
.combo-offer{background:var(--brand-coral);color:#fff}.skill-image{background:var(--brand-foam)}.my-courses-link{background:var(--brand-foam);color:var(--brand-deep)!important}
.store-card h2,.store-coaching-copy,.free-muscle-heading h1,.fitness-intro h1,.fitness-question h2,.offer-hero h1{color:var(--brand-deep)}
.store-card>p,.fitness-intro p,.fitness-feedback,.free-muscle-heading p,.offer-intro{color:var(--brand-text)}
.store-card-icon,.fitness-tags span,.fitness-answer>b,.contact-link{background:var(--brand-foam);color:var(--brand-deep)}
.store-cover,.store-cover-coaching{background:linear-gradient(135deg,var(--brand-pearl),var(--brand-foam))}
.portal-card .portal-action:not(.soon),.store-card-action:not(.soon),.fitness-button,.offer-contact{background:var(--brand-coral);color:#fff}
.portal-card .portal-action.soon,.store-card-action.soon{background:#EDF2F4;color:#6A818C}
.fitness-eyebrow,.fitness-references a,.fitness-review summary{color:var(--brand-deep)}
.fitness-progress>span{background:var(--brand-ocean)}.fitness-countdown{background:linear-gradient(145deg,var(--brand-foam),var(--brand-ocean));color:var(--brand-deep)}.fitness-countdown strong{color:var(--brand-deep)}
.fitness-answer:hover:not(:disabled){background:var(--brand-foam);border-color:var(--brand-ocean)}
:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--brand-deep);outline-offset:3px}
/* Compact phone layout; content, card order and product formats stay intact. */
@media(max-width:900px){
 body.tk-app-shell .portal-main{padding:18px 14px 28px}
 body.tk-app-shell .portal-grid{gap:12px;margin-top:20px}body.tk-app-shell .store-grid{gap:12px}
 body.tk-app-shell .portal-card{padding:19px;min-height:0}body.tk-app-shell .portal-card h2{margin-top:13px}body.tk-app-shell .portal-card p{margin-bottom:16px}
 .home-page main>section{padding:28px 0}.home-page .brand-home.hero{padding:24px 0 28px}
 .home-page .hero-grid,.home-page .split,.home-page .test-callout-grid{gap:22px}
 .home-page .hero-grid h1{margin:12px 0 16px}.home-page .cards{margin-top:20px;gap:12px}.home-page .card{padding:20px}
 .home-page .test-levels{gap:10px}.home-page .test-levels a{padding:14px;gap:12px}.home-page .test-callout-copy p{margin-bottom:16px}
 body.tk-app-shell .fitness-main{padding:14px 12px 24px}.fitness-back{margin-bottom:8px;min-height:36px}
 .fitness-intro{gap:16px;padding:20px}.fitness-intro h1{margin:10px 0 13px}.fitness-intro p{margin-bottom:13px}.fitness-tags{margin:14px 0}
 .free-muscle-app{padding:16px 14px 28px}.free-muscle-heading{padding:7px 0 17px}.free-muscle-app .arena-grid{gap:12px}.free-muscle-app .arena-game-card{padding:20px}.free-muscle-app .quiz-head{padding-bottom:12px}
 .offer-main{padding:20px 16px 30px}.offer-hero{margin-top:12px;gap:20px}.offer-focus{margin-top:25px;padding-top:23px}.offer-focus-grid{gap:12px}
 .about-page .about-story{padding:22px 0}.about-intro{gap:26px}.credentials{margin-top:28px;padding:23px 18px}.credential-list{margin-top:20px;gap:10px}.credential-gallery,.workshop-gallery{gap:12px;margin-top:18px}.gallery-heading,.workshop-heading{margin-top:28px;padding-top:24px}
 .membership-section,.reward-history-section{margin-top:20px}.membership-grid,.rank-grid,.profile-stats{gap:12px}.profile-head{gap:16px}.member-form{margin-top:20px;gap:14px;padding:22px 18px}
 body.tk-app-shell .tk-sidebar-nav{gap:4px}.tk-side-link{min-height:46px;padding-block:8px}.tk-app-bottom a,.tk-app-bottom label{min-height:44px}.tk-app-bottom{gap:4px;padding-inline:8px}
}
@media(max-width:560px){.store-card-heading{margin-top:12px}.store-card>p{margin-top:8px;margin-bottom:12px}.portal-main h1{margin-bottom:12px}.portal-lead{font-size:1rem}.home-page .test-levels a>span{width:45px;height:45px;border-radius:13px}.home-page .test-levels a{grid-template-columns:45px minmax(0,1fr) 20px}.home-page .test-levels small{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tk-app-bottom a,.tk-app-bottom label{transition:none}}

.nav-links a.active,.nav-links a:active{background:var(--brand-ocean);color:#fff}

@media(max-width:900px){.fitness-main #fitness-quiz{scroll-margin-top:66px}.free-tests-page .store-card>p{min-height:3.1em}}

@media(max-width:560px){.home-page .brand-home h1{font-size:clamp(32px,8.5vw,42px);line-height:1.1}.home-page .brand-home .lead{font-size:16px;line-height:1.7}}

body .tk-app-bottom label.active,body .tk-app-bottom label.active svg{background:var(--brand-ocean);color:#fff}

/* Results and check-in use the same brand tokens; gold reward effects stay gold. */
.tk-result-shell{--result-blue:var(--brand-ocean);--result-deep:var(--brand-deep);--result-navy:var(--brand-deep);--result-coral:var(--brand-coral);background:radial-gradient(circle at 50% 5%,var(--brand-foam),var(--brand-ocean) 45%,var(--brand-deep) 100%)}
.tk-result-button:not(.secondary){background:var(--brand-coral);color:#fff}.tk-result-member-name,.tk-result-score-note{color:var(--brand-text)}
.tk-result-course{background:var(--brand-foam)}.checkin-card{background:linear-gradient(135deg,var(--brand-ocean),var(--brand-deep))}.checkin-card h2{color:#fff}