/* ==========================================================
   BỘ CHỮ ĐỘC QUYỀN TÂNG THIÊN TÀI · Samurai Một Chạm
   Bản 1.0 · 16/10/2026 · Dùng nội bộ hệ sinh thái Samurai
   ========================================================== */
@import url("fonts-chu.css"); /* phông Google Fonts tự lưu trên máy để chạy khi mất mạng: Montserrat 800/900, Playfair Display 700/900, nghiêng 600 */
:root{--tt-den:#0E0E0E;--tt-vang:#F7DC86;--tt-vang-kim:#D4AF37;--tt-vang-sub:#F4D67A;--tt-ruou:#7A1F2B;--tt-nga:#F8F6EF}

/* 1. TIÊU ĐỀ — kiểu "EDIT TỰ ĐỘNG": vàng đúc khối 7 lớp, viền đen, phát quang nhẹ */
.tt-title{font:900 clamp(22px,6.6vw,30px)/1.1 "Montserrat","Be Vietnam Pro",sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--tt-vang);
  -webkit-text-stroke:1.1px #000;paint-order:stroke fill;
  text-shadow:0 1px 0 #c9962c,0 2px 0 #b8891f,0 3px 0 #9a6a12,0 4px 0 #7a5010,0 5px 0 #5a3a08,0 6px 0 #3a2406,0 7px 0 #1a0e02,
    0 10px 14px rgba(0,0,0,.85),0 0 14px rgba(255,214,110,.5),0 0 28px rgba(255,200,90,.25)}

/* 2. THƯƠNG HIỆU — chữ "SAMURAI": đỏ rượu vang tươi, mặt ánh trắng ngọc trai, khối 3D 16 lớp, không viền, phát sáng đỏ */
.tt-brand{display:inline-block;font:900 clamp(30px,9vw,50px)/.95 "Playfair Display",Georgia,serif;letter-spacing:.34em;margin-right:-.34em;text-transform:uppercase;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFE3E9 16%,#FFB3C1 30%,#F0607A 46%,#C4223C 62%,#A51B31 76%,#D24660 90%,#7A1426 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#C4223C;
  filter:drop-shadow(0 1px 0 #4a0612) drop-shadow(0 1px 0 #450510) drop-shadow(0 1px 0 #40050f) drop-shadow(0 1px 0 #3c040e)
    drop-shadow(0 1px 0 #37040d) drop-shadow(0 1px 0 #33040c) drop-shadow(0 1px 0 #2e030b) drop-shadow(0 1px 0 #2a030a)
    drop-shadow(0 1px 0 #250209) drop-shadow(0 1px 0 #210208) drop-shadow(0 1px 0 #1c0207) drop-shadow(0 1px 0 #180106)
    drop-shadow(0 1px 0 #130105) drop-shadow(0 1px 0 #0f0004) drop-shadow(0 1px 0 #0a0003) drop-shadow(0 1px 0 #060002)
    drop-shadow(0 12px 16px rgba(0,0,0,.9)) drop-shadow(0 0 10px rgba(232,69,95,.75)) drop-shadow(0 0 26px rgba(196,34,60,.55))}
/* bản nhỏ trong dòng (vd. "SAMURAI Edit Một Chạm") */
.tt-brand.sm{font-size:clamp(17px,4.8vw,22px);letter-spacing:.12em;margin-right:.3em;
  filter:drop-shadow(0 1px 0 #4a0612) drop-shadow(0 1px 0 #40050f) drop-shadow(0 1px 0 #36040d) drop-shadow(0 1px 0 #2c030b)
    drop-shadow(0 1px 0 #230208) drop-shadow(0 1px 0 #190106) drop-shadow(0 1px 0 #0f0004) drop-shadow(0 1px 0 #060002)
    drop-shadow(0 4px 6px rgba(0,0,0,.8)) drop-shadow(0 0 8px rgba(232,69,95,.7))}

/* 3. PHỤ ĐỀ — kiểu "Edit Một Chạm": Playfair nghiêng 600, vàng kim #F4D67A */
.tt-sub{font:italic 600 clamp(17px,4.8vw,22px)/1.25 "Playfair Display",Georgia,serif;color:var(--tt-vang-sub);text-shadow:0 2px 6px rgba(0,0,0,.75)}

/* 4. NÚT CHẠM 8 BÁNH XE CUỘC ĐỜI — giữ nguyên thiết kế hiện tại (đế khối đứng yên · vành quay chậm · kim cương xoay nhanh ánh rượu vang) */
.tt-wheel{position:relative;width:min(68vw,300px);aspect-ratio:1;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .2s}
.tt-wheel:active{transform:translateY(4px) scale(.96)}
.tt-wheel img,.tt-wheel i{position:absolute;pointer-events:none}
.tt-wheel .tt-base,.tt-wheel .tt-ring{left:-6.25%;top:-6.25%;width:112.5%;height:112.5%}
.tt-wheel .tt-base{z-index:1;filter:drop-shadow(0 16px 22px rgba(0,0,0,.7))}
.tt-wheel .tt-core,.tt-wheel .tt-sweep{left:20.95%;top:20.95%;width:58.1%;height:58.1%;border-radius:50%}
.tt-wheel .tt-core{z-index:2;animation:ttSpin 1.6s linear infinite;filter:drop-shadow(0 0 16px rgba(196,34,60,.85)) drop-shadow(0 0 30px rgba(122,31,43,.9)) saturate(1.15)}
.tt-wheel .tt-sweep{z-index:3;mix-blend-mode:screen;animation:ttSpin 1.1s linear infinite reverse;
  background:conic-gradient(from 0deg,transparent 0 8%,rgba(232,69,95,.85) 16%,transparent 26%,transparent 50%,rgba(255,236,170,.75) 58%,transparent 66%,transparent 76%,rgba(196,34,60,.9) 84%,transparent 92%);
  -webkit-mask:radial-gradient(circle,#000 0 30%,rgba(0,0,0,.5) 55%,transparent 72%);mask:radial-gradient(circle,#000 0 30%,rgba(0,0,0,.5) 55%,transparent 72%)}
.tt-wheel .tt-ring{z-index:4;animation:ttRing 30s linear infinite}
@keyframes ttSpin{to{transform:rotate(360deg)}}@keyframes ttRing{to{transform:rotate(-360deg)}}
@media (prefers-reduced-motion:reduce){.tt-wheel .tt-core,.tt-wheel .tt-sweep,.tt-wheel .tt-ring{animation:none}}