/* Tap trung: giao dien (nen thien nhien, mau nhan) + che do toan man hinh */
:root{--tt-accent:#0d9488}
body[data-tt-accent="teal"]{--tt-accent:#0d9488}
body[data-tt-accent="purple"]{--tt-accent:#8b5cf6}
body[data-tt-accent="rose"]{--tt-accent:#f43f5e}
body[data-tt-accent="orange"]{--tt-accent:#f97316}
body[data-tt-accent="blue"]{--tt-accent:#3b82f6}
body[data-tt-accent="green"]{--tt-accent:#22c55e}
.tt-ring .fg{stroke:var(--tt-accent)}
#ttStart{background:var(--tt-accent)!important;border-color:var(--tt-accent)!important;color:#fff}

/* ===== lop nen ===== */
#ttBg{display:none;position:fixed;inset:0;z-index:-1;overflow:hidden;background-size:cover;background-position:center}
body[data-tt-scene] #ttBg,body.tt-full #ttBg{display:block}
body.tt-full #ttBg{z-index:9998}
body.tt-full:not([data-tt-scene]) #ttBg{background:linear-gradient(160deg,#0f172a,#134e4a)}
body[data-tt-scene] main{background:transparent!important}
#ttBg i{position:absolute;inset:0;display:block;pointer-events:none}

/* --- thac nuoc --- */
body[data-tt-scene="waterfall"] #ttBg{background:linear-gradient(180deg,#0b3d2e 0%,#145a45 45%,#0a2a22 100%)}
body[data-tt-scene="waterfall"] #ttBg i.a{inset:0 auto 0 0;width:38%;background:linear-gradient(90deg,#04120d,#0d3326);clip-path:polygon(0 0,100% 0,84% 22%,94% 46%,80% 72%,90% 100%,0 100%)}
body[data-tt-scene="waterfall"] #ttBg i.b{inset:0 0 0 auto;width:38%;background:linear-gradient(270deg,#04120d,#0d3326);clip-path:polygon(100% 0,0 0,16% 22%,6% 46%,20% 72%,10% 100%,100% 100%)}
body[data-tt-scene="waterfall"] #ttBg i.c{inset:0 auto 0 32%;width:36%;background-image:linear-gradient(180deg,rgba(255,255,255,.8) 0,rgba(190,235,255,.25) 12px,rgba(255,255,255,.6) 26px,rgba(255,255,255,.12) 40px,rgba(255,255,255,.7) 52px);background-size:100% 52px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);animation:ttFall .8s linear infinite}
body[data-tt-scene="waterfall"] #ttBg i.d{inset:auto auto -6% 18%;width:64%;height:34%;background:radial-gradient(ellipse at center,rgba(255,255,255,.7),transparent 70%);filter:blur(14px);animation:ttMist 4s ease-in-out infinite alternate}
@keyframes ttFall{to{background-position:0 52px}}
@keyframes ttMist{from{opacity:.55;transform:scale(1)}to{opacity:.95;transform:scale(1.08)}}

/* --- rung suong --- */
body[data-tt-scene="forest"] #ttBg{background:linear-gradient(180deg,#cfe8d5 0%,#7fb08a 35%,#2f6b4a 70%,#14392a 100%)}
body[data-tt-scene="forest"] #ttBg i.a{inset:auto 0 0 0;height:46%;background:#0f3323;clip-path:polygon(0 100%,0 60%,4% 30%,8% 60%,12% 20%,16% 55%,21% 25%,26% 58%,31% 15%,36% 55%,41% 28%,46% 60%,52% 18%,57% 55%,62% 30%,67% 60%,73% 22%,78% 56%,84% 28%,89% 60%,94% 25%,100% 55%,100% 100%)}
body[data-tt-scene="forest"] #ttBg i.b{inset:auto 0 0 0;height:30%;background:#0a2419;clip-path:polygon(0 100%,0 50%,6% 22%,12% 55%,19% 10%,26% 52%,34% 25%,41% 58%,49% 8%,57% 50%,64% 28%,72% 56%,80% 15%,88% 52%,94% 30%,100% 50%,100% 100%)}
body[data-tt-scene="forest"] #ttBg i.c{inset:30% auto auto 0;width:200%;height:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent 50%,rgba(255,255,255,.4),transparent);filter:blur(22px);animation:ttDrift 40s linear infinite}
body[data-tt-scene="forest"] #ttBg i.d{background:radial-gradient(circle at 82% -8%,rgba(255,250,200,.75),transparent 48%)}
@keyframes ttDrift{to{transform:translateX(-50%)}}

/* --- bien --- */
body[data-tt-scene="ocean"] #ttBg{background:linear-gradient(180deg,#9bd7f5 0%,#4aa8d8 40%,#0b5d8f 100%)}
body[data-tt-scene="ocean"] #ttBg i.a{background:radial-gradient(circle at 75% 22%,#fff8d6 0 4%,rgba(255,240,170,.5) 6%,transparent 22%)}
body[data-tt-scene="ocean"] #ttBg i.b,body[data-tt-scene="ocean"] #ttBg i.c,body[data-tt-scene="ocean"] #ttBg i.d{inset:auto 0 0 0;background-repeat:repeat-x;background-size:1200px 100%}
body[data-tt-scene="ocean"] #ttBg i.b{height:34%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60 Q150 0 300 60 T600 60 T900 60 T1200 60 V120 H0Z' fill='%23ffffff' fill-opacity='.30'/%3E%3C/svg%3E");animation:ttWave 18s linear infinite}
body[data-tt-scene="ocean"] #ttBg i.c{height:26%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60 Q150 0 300 60 T600 60 T900 60 T1200 60 V120 H0Z' fill='%230b5d8f' fill-opacity='.55'/%3E%3C/svg%3E");animation:ttWave 12s linear infinite reverse}
body[data-tt-scene="ocean"] #ttBg i.d{height:18%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60 Q150 0 300 60 T600 60 T900 60 T1200 60 V120 H0Z' fill='%23063c64' fill-opacity='.8'/%3E%3C/svg%3E");animation:ttWave 8s linear infinite}
@keyframes ttWave{to{background-position-x:1200px}}

/* --- mua --- */
body[data-tt-scene="rain"] #ttBg{background:linear-gradient(180deg,#1e293b,#0f172a 60%,#020617)}
body[data-tt-scene="rain"] #ttBg i.a{background-image:linear-gradient(105deg,transparent 0 48%,rgba(180,210,255,.55) 49% 50%,transparent 51%);background-size:26px 90px;animation:ttRainA .7s linear infinite}
body[data-tt-scene="rain"] #ttBg i.b{opacity:.5;background-image:linear-gradient(105deg,transparent 0 48%,rgba(180,210,255,.6) 49% 50%,transparent 51%);background-size:41px 130px;animation:ttRainB 1.1s linear infinite}
body[data-tt-scene="rain"] #ttBg i.c{background:linear-gradient(0deg,rgba(148,163,184,.3),transparent 40%)}
@keyframes ttRainA{to{background-position:-26px 90px}}
@keyframes ttRainB{to{background-position:-41px 130px}}

/* --- dem sao --- */
body[data-tt-scene="night"] #ttBg{background:linear-gradient(180deg,#020617,#0f1e4a 60%,#243b6b 100%)}
body[data-tt-scene="night"] #ttBg i.a{background-image:radial-gradient(1.5px 1.5px at 10% 20%,#fff,transparent),radial-gradient(1.5px 1.5px at 25% 60%,#fff,transparent),radial-gradient(2px 2px at 40% 15%,#fff,transparent),radial-gradient(1.5px 1.5px at 55% 45%,#fff,transparent),radial-gradient(2px 2px at 70% 25%,#fff,transparent),radial-gradient(1.5px 1.5px at 85% 55%,#fff,transparent),radial-gradient(1.5px 1.5px at 92% 12%,#fff,transparent);animation:ttTw 3s ease-in-out infinite alternate}
body[data-tt-scene="night"] #ttBg i.b{background-image:radial-gradient(1.5px 1.5px at 5% 50%,#fff,transparent),radial-gradient(2px 2px at 18% 35%,#fff,transparent),radial-gradient(1.5px 1.5px at 33% 32%,#fff,transparent),radial-gradient(1.5px 1.5px at 48% 70%,#fff,transparent),radial-gradient(2px 2px at 63% 10%,#fff,transparent),radial-gradient(1.5px 1.5px at 78% 40%,#fff,transparent),radial-gradient(1.5px 1.5px at 96% 35%,#fff,transparent);animation:ttTw 4.2s ease-in-out -1.5s infinite alternate}
body[data-tt-scene="night"] #ttBg i.c{inset:12% 14% auto auto;width:70px;height:70px;border-radius:50%;background:#fdf6d8;box-shadow:0 0 40px 10px rgba(253,246,216,.35)}
body[data-tt-scene="night"] #ttBg i.d{inset:auto 0 0 0;height:30%;background:#050a1a;clip-path:polygon(0 100%,0 55%,15% 30%,28% 55%,42% 20%,58% 55%,72% 32%,86% 58%,100% 40%,100% 100%)}
@keyframes ttTw{from{opacity:.35}to{opacity:1}}

/* --- hoang hon --- */
body[data-tt-scene="sunset"] #ttBg{background:linear-gradient(180deg,#2b1055 0%,#7a2f7e 28%,#f0586b 55%,#ffb36b 78%,#ffd89b 100%)}
body[data-tt-scene="sunset"] #ttBg i.a{inset:auto auto 22% 50%;width:150px;height:150px;margin-left:-75px;border-radius:50%;background:#fff3c4;box-shadow:0 0 80px 30px rgba(255,200,120,.6);animation:ttSun 6s ease-in-out infinite alternate}
body[data-tt-scene="sunset"] #ttBg i.b{inset:28% auto auto 0;width:200%;height:70px;background:radial-gradient(ellipse,rgba(255,255,255,.28),transparent 70%);background-size:25% 100%;filter:blur(8px);animation:ttDrift 60s linear infinite}
body[data-tt-scene="sunset"] #ttBg i.c{inset:auto 0 0 0;height:24%;background:linear-gradient(180deg,#3b1a4a,#150a24);clip-path:polygon(0 100%,0 50%,12% 28%,26% 55%,40% 22%,55% 52%,70% 30%,84% 56%,100% 35%,100% 100%)}
@keyframes ttSun{to{transform:translateY(14px)}}

/* --- anh cua ban --- */
body[data-tt-scene="custom"] #ttBg i.a{background:rgba(2,6,23,.35)}

@media (prefers-reduced-motion:reduce){#ttBg i{animation:none!important}}

/* ===== giao dien toi (kinh mo) khi co nen hoac toan man hinh ===== */
body.tt-dark .tt-wrap h1,body.tt-dark .tt-wrap>p{color:#fff!important;text-shadow:0 1px 8px rgba(0,0,0,.35)}
body.tt-dark .tt-card{background:rgba(15,23,42,.38);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;border:1px solid rgba(255,255,255,.15);box-shadow:0 10px 40px rgba(0,0,0,.25)}
body.tt-dark .tt-modes{background:rgba(255,255,255,.12)}
body.tt-dark .tt-modes button{color:rgba(255,255,255,.75)}
body.tt-dark .tt-modes button.active{background:rgba(255,255,255,.92);color:var(--tt-accent)}
body.tt-dark .tt-time b,body.tt-dark .tt-stats b{color:#fff}
body.tt-dark .tt-time span,body.tt-dark .tt-stats small,body.tt-dark .tt-set label,body.tt-dark .form-check-label{color:rgba(255,255,255,.78)}
body.tt-dark .tt-ring .bg{stroke:rgba(255,255,255,.2)}
body.tt-dark .tt-stats div{background:rgba(255,255,255,.1)}
body.tt-dark .tt-set input,body.tt-dark #ttTask{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff}
body.tt-dark #ttTask::placeholder{color:rgba(255,255,255,.6)}
body.tt-dark .tt-ctrl .btn-outline-secondary{color:#fff;border-color:rgba(255,255,255,.4)}

/* ===== thanh cong cu + bang chon giao dien ===== */
.tt-tools{display:flex;gap:8px;justify-content:center;margin-top:14px}
.tt-tools button{border:0;border-radius:10px;padding:8px 14px;font-weight:600;font-size:14px;background:#fff;color:var(--text-main);box-shadow:var(--shadow-sm)}
body.tt-dark .tt-tools button{background:rgba(255,255,255,.16);color:#fff}
.tt-panel{margin-top:12px;background:rgba(15,23,42,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:16px;padding:14px;color:#fff;text-align:left}
.tt-panel[hidden]{display:none}
.tt-sec{font-size:12px;opacity:.8;margin:6px 0}
.tt-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tt-chips button,.tt-chips label{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer;margin:0}
.tt-chips .on{background:#fff;color:#0f172a;border-color:#fff}
.tt-chips .tt-sw{width:28px;height:28px;border-radius:50%;padding:0;border:2px solid transparent}
.tt-chips .tt-sw.on{border-color:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.35)}

/* ===== toan man hinh ===== */
body.tt-full{overflow:hidden}
body.tt-full .tt-wrap{position:fixed;inset:0;z-index:9999;max-width:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
body.tt-full .tt-wrap>h1,body.tt-full .tt-wrap>p,body.tt-full .tt-set,body.tt-full .tt-card .form-check{display:none}
body.tt-full .tt-card{width:min(92vw,720px);background:transparent!important;box-shadow:none!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.tt-full .tt-ring{width:min(62vmin,520px);height:min(62vmin,520px)}
body.tt-full .tt-time b{font-size:min(15vmin,120px)}
body.tt-full .tt-time span{font-size:min(3vmin,18px)}
body.tt-full #ttTask{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.3);border-radius:0;font-size:20px}
body.tt-full .tt-ctrl .btn{padding:12px 32px;font-size:18px}
body.tt-full .tt-tools{position:fixed;top:14px;right:14px;margin:0;z-index:10000}
body.tt-full .tt-panel{position:fixed;top:58px;right:14px;width:min(92vw,340px);margin:0;z-index:10000}

/* ===== noi dung SEO ===== */
.tt-seo{max-width:760px;margin:28px auto 8px;background:#fff;color:#1e293b;border-radius:18px;padding:24px 22px;box-shadow:0 4px 14px rgba(0,0,0,.08);line-height:1.7}
.tt-seo h2{font-size:20px;font-weight:800;margin:22px 0 10px}
.tt-seo h2:first-child{margin-top:0}
.tt-seo a{color:#0d9488;font-weight:600}
.tt-faq{border-top:1px solid #e2e8f0;padding:10px 0}
.tt-faq summary{cursor:pointer;font-weight:700}
.tt-faq p{margin:8px 0 0;color:#475569}
body.tt-full .tt-seo{display:none}

/* ===== che do hit tho ===== */
.tt-modes button{white-space:nowrap}
@media (max-width:420px){.tt-modes button{font-size:12.5px;padding:8px 2px}}
.tt-modes.tt-bmode button.active:not(.tt-b-on){background:transparent!important;box-shadow:none!important;color:inherit!important;opacity:.75}
.tt-modes button.tt-b-on{background:#fff!important;color:var(--tt-accent)!important;box-shadow:var(--shadow-sm)}
#ttBreath{display:none}
.tt-card.tt-breathing #ttBreath{display:block}
.tt-card.tt-breathing>:not(.tt-modes):not(#ttBreath){display:none!important}
.tt-bsec{font-size:12px;color:var(--text-muted);margin:8px 0 6px;text-align:left}
.tt-bchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.tt-bchips button,.tt-bchips label{border:1px solid #cbd5e1;background:#fff;color:var(--text-main);border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer;margin:0}
.tt-bchips button.on{background:var(--tt-accent);border-color:var(--tt-accent);color:#fff}
.tt-bchips input{margin-right:4px}
body.tt-dark .tt-bsec,body.tt-dark .tt-bleft,body.tt-dark .tt-bnote{color:rgba(255,255,255,.78)}
body.tt-dark .tt-bchips button,body.tt-dark .tt-bchips label{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff}
body.tt-dark .tt-bchips button.on{background:var(--tt-accent);border-color:var(--tt-accent)}
.tt-bstage{position:relative;display:flex;align-items:center;justify-content:center;height:280px;margin:6px 0}
.tt-bcircle{width:240px;height:240px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),var(--tt-accent) 62%);box-shadow:0 0 50px 8px rgba(255,255,255,.22);transform:scale(.55);will-change:transform}
.tt-btext{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35);pointer-events:none}
.tt-bphase{font-size:24px;font-weight:800}
.tt-bcount{font-size:44px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.tt-bleft{min-height:20px;color:var(--text-muted);font-size:14px}
.tt-bnote{font-size:12px;color:var(--text-muted);margin:10px 0 0}
#ttBStart{background:var(--tt-accent)!important;border-color:var(--tt-accent)!important;color:#fff;border-radius:12px;font-weight:700;padding:10px 32px}
@media (prefers-reduced-motion:reduce){.tt-bcircle{transition:none!important}}
body.tt-full .tt-bopts,body.tt-full .tt-bnote{display:none}
body.tt-full .tt-bstage{height:min(70vmin,480px)}
body.tt-full .tt-bcircle{width:min(62vmin,440px);height:min(62vmin,440px)}
body.tt-full .tt-bphase{font-size:min(5vmin,32px)}
body.tt-full .tt-bcount{font-size:min(11vmin,72px)}

/* ===== noi dung SEO thu gon mac dinh ===== */
.tt-seomore>summary{cursor:pointer;font-weight:800;font-size:17px;color:var(--text-main)}
.tt-seomore[open]>summary{margin-bottom:8px}
.tt-seomore>h2:first-of-type{margin-top:14px}