/* Cong cu mien phi (cong-cu.php): khung chung, the cong cu, o nhap, hop thoai dang ky, in. Mau theo :root cua trang (lp.css dung chung). */
.cc-head { padding-top: 28px; padding-bottom: 8px; max-width: 900px; }
.cc-head h1 { font-size: clamp(30px, 4.6vw, 48px); margin: 14px 0 12px; }
.cc-head .lead { font-size: clamp(16px, 1.8vw, 18px); }
.cc-back { display: inline-block; font-weight: 700; font-size: 14px; text-decoration: none; color: var(--ink2); margin-bottom: 14px; }
.cc-main { padding-top: 18px; padding-bottom: 40px; }
.cc-sec { padding: 36px 0; }
.cc-h2 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 18px; }
.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.cc-grid.sm { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.cc-card { display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 20px; text-decoration: none; color: var(--ink); transition: transform .15s, box-shadow .15s; }
.cc-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -26px rgba(0,0,0,.35); }
.cc-card .ic { font-size: 30px; }
.cc-card h3 { font-size: 18px; margin-top: 4px; }
.cc-card p { margin: 0; color: var(--ink2); font-size: 14.5px; line-height: 1.5; }
.cc-card .go { margin-top: auto; padding-top: 8px; font-weight: 800; color: var(--pri); font-size: 14px; }
.cc-grid.sm .cc-card { padding: 16px; } .cc-grid.sm .cc-card h3 { font-size: 16px; } .cc-grid.sm .cc-card p { font-size: 13.5px; }

/* khoi lam viec cua cong cu */
.cc-box { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: clamp(16px, 3vw, 26px); box-shadow: 0 30px 60px -48px rgba(0,0,0,.4); }
.cc-box + .cc-box { margin-top: 16px; }
.cc-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.cc-row > * { min-width: 0; }
.cc-f { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ink2); }
.cc-f input, .cc-f select, .cc-f textarea, .cc-in { font: inherit; font-size: 16px; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.cc-f textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.cc-f input:focus, .cc-f select:focus, .cc-f textarea:focus, .cc-in:focus { outline: 2px solid var(--pri); outline-offset: 1px; border-color: transparent; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-chip { border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.cc-chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
button.btn { border: 0; cursor: pointer; font-family: inherit; }
button.btn:disabled { opacity: .55; cursor: default; transform: none; }
.cc-note { font-size: 13.5px; color: var(--ink2); }
.cc-quota { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; font-weight: 700; color: var(--ink2); background: var(--soft); padding: 6px 12px; border-radius: 99px; }
.cc-err { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; border-radius: 14px; padding: 12px 14px; font-size: 15px; }
.cc-ok { background: #F0FDF4; border: 1px solid #BBF7D0; color: #166534; border-radius: 14px; padding: 12px 14px; font-size: 15px; }
.cc-lock { background: linear-gradient(135deg, var(--soft), #fff); border: 1.5px dashed var(--pri); border-radius: 16px; padding: 16px; text-align: center; }
.cc-lock b { display: block; font-size: 17px; margin-bottom: 4px; }
.cc-spin { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--soft); border-top-color: var(--pri); animation: ccspin 1s linear infinite; margin: 0 auto; }
@keyframes ccspin { to { transform: rotate(360deg); } }
.cc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.cc-two > * { min-width: 0; }
@media (max-width: 760px) { .cc-two { grid-template-columns: 1fr; } }

/* loi moi dang ky giua trang */
.cc-up { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: center; background: var(--ink); color: #fff; border-radius: 28px; padding: clamp(24px, 4vw, 44px); }
.cc-up h2 { color: #fff; font-size: clamp(22px, 3vw, 32px); }
.cc-up .lead { color: rgba(255,255,255,.8); font-size: 16px; margin-top: 10px; }
.cc-up .btn.alt { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
.cc-up .cta-row { margin-top: 0; }
@media (max-width: 860px) { .cc-up { grid-template-columns: 1fr; } }

/* hop thoai */
.cc-modal { position: fixed; inset: 0; z-index: 60; background: rgba(15, 20, 35, .55); display: grid; place-items: center; padding: 16px; }
.cc-modal[hidden] { display: none; }
.cc-dlg { position: relative; background: var(--card); color: var(--ink); border-radius: 24px; max-width: 460px; width: 100%; padding: 26px 22px 22px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.5); max-height: 90vh; overflow: auto; }
.cc-x { position: absolute; right: 10px; top: 8px; border: 0; background: none; font-size: 28px; color: var(--ink2); cursor: pointer; line-height: 1; }
.cc-dlg h3 { font-size: 22px; margin: 0 0 8px; }
.cc-dlg ul { padding-left: 0; list-style: none; margin: 12px 0 16px; display: grid; gap: 8px; }
.cc-dlg li { display: flex; gap: 10px; font-size: 15px; color: var(--ink2); }
.cc-dlg li::before { content: '✓'; color: var(--pri); font-weight: 900; }
.cc-dlg .btn { width: 100%; margin-top: 8px; }
.cc-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 600; font-size: 15px; max-width: calc(100% - 32px); box-shadow: 0 20px 40px -16px rgba(0,0,0,.5); }

/* in: chi in vung .cc-print (phieu, de, TKB...) */
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff !important; font-size: 13pt; }
  .no-print, .nav, footer, .cc-head, .cc-sec, .sticky-cta, .cc-modal, .cc-toast { display: none !important; }
  .cc-main { padding: 0 !important; max-width: none !important; }
  body.cc-printing .cc-main > *:not(.cc-print-area) { display: none !important; }
  .cc-box { box-shadow: none !important; border: 0 !important; padding: 0 !important; }
  .cc-page-break { break-after: page; }
}
@media (max-width: 760px) { .cc-head { padding-top: 12px; } }

/* de kiem tra (assets/cc/exam.js): de-tuong-tu, de-thi */
.ex-paper { background: #fff; color: #111827; border-radius: 10px; padding: clamp(14px, 3vw, 28px); font-size: 16px; line-height: 1.55; }
.ex-title { font-size: 21px; text-align: center; margin: 0; }
.ex-sub { text-align: center; color: #4B5563; font-size: 14px; margin-top: 4px; }
.ex-name { margin-top: 12px; font-size: 15px; }
.ex-sec { margin-top: 20px; }
.ex-sh { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; border-bottom: 1.5px solid #E5E7EB; padding-bottom: 4px; }
.ex-pt { font-size: 13px; color: #6B7280; white-space: nowrap; }
.ex-pass { background: #F9FAFB; border-left: 3px solid var(--pri); padding: 10px 12px; margin-top: 10px; border-radius: 6px; font-size: 15px; }
.ex-box { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.ex-box span, .ex-box button { border: 1px solid #D1D5DB; border-radius: 8px; padding: 3px 10px; font: inherit; font-size: 15px; background: #fff; }
.ex-box button { cursor: pointer; } .ex-box button:disabled { opacity: .4; }
.ex-it { margin-top: 12px; padding: 8px 10px; border-radius: 10px; }
.ex-q { overflow-x: auto; }
.ex-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px 16px; margin-top: 4px; }
.ex-choose { display: grid; gap: 6px; margin-top: 6px; }
.ex-choose.row { grid-auto-flow: column; justify-content: start; gap: 18px; }
.ex-choose label { display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; border: 1px solid #E5E7EB; border-radius: 10px; cursor: pointer; }
.ex-choose label:has(input:checked) { border-color: var(--pri); background: var(--soft); }
.ex-tf4 { display: grid; gap: 6px; margin-top: 6px; }
.ex-st { display: flex; gap: 10px; align-items: center; } .ex-st span { flex: 1; } .ex-st label { white-space: nowrap; cursor: pointer; }
.ex-line { width: 100%; margin-top: 8px; } .ex-w { width: 100%; margin-top: 8px; font-size: 16px; }
.ex-lines i { display: block; border-bottom: 1px dotted #9CA3AF; height: 28px; } .ex-lines.short i { height: 24px; }
.ex-hints { margin: 6px 0; padding-left: 20px; color: #4B5563; font-size: 15px; }
.ex-match { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .ex-match ol { margin: 6px 0; padding-left: 22px; }
.ex-ans, .ex-ans-in { display: none; }
.show-ans .ex-ans { display: block; margin-top: 6px; background: #F0FDF4; border-radius: 8px; padding: 6px 10px; font-size: 14.5px; color: #166534; }
.show-ans .ex-ans-in { display: inline; font-weight: 800; color: #166534; margin-left: 6px; }
.show-ans .ex-opts .is-ans { font-weight: 800; color: #166534; }
.ex-why { color: #374151; font-size: 14px; margin-top: 4px; }
.ex-it.ok { background: #F0FDF4; } .ex-it.no { background: #FEF2F2; } .ex-it.ai { background: #FFFBEB; }
.ex-mark { margin-top: 6px; font-size: 14.5px; font-weight: 600; }
.ex-it.ok .ex-mark { color: #166534; } .ex-it.no .ex-mark { color: #991B1B; }
.ex-unlock { border: 0; background: none; color: var(--pri); font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; padding: 0; }
.ex-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
@media (max-width: 640px) { .ex-match { grid-template-columns: 1fr; } .ex-paper { font-size: 15px; } }
@media print { .ex-paper { padding: 0; font-size: 12.5pt; } .ex-it { break-inside: avoid; padding: 4px 0; } .ex-sec { break-inside: auto; } }

/* ---------- trang tong: tieu diem + noi bat + loc (cong-cu.php) ---------- */
.cc-hero { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: center; padding-top: 28px; padding-bottom: 12px; }
.cc-hero > * { min-width: 0; }
.cc-hero h1 { font-size: clamp(32px, 4.6vw, 52px); margin: 14px 0 12px; }
.cc-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.cc-badge { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 12.5px; font-weight: 800; padding: 4px 10px; border-radius: 99px; background: var(--soft); color: var(--ink); white-space: nowrap; }
.cc-badge.hot { background: #FFE1D6; color: #B4380B; }
.cc-badge.ai { background: #EDE6FF; color: #5B3BD6; }
.cc-badge.sm { font-size: 11.5px; padding: 3px 8px; }
.cc-spot { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 10px; align-items: center; text-decoration: none; color: #fff; border-radius: 28px; padding: clamp(20px, 3vw, 30px); overflow: hidden;
  background: radial-gradient(600px 300px at 90% 0%, #FF9A4D 0%, transparent 60%), linear-gradient(135deg, #E8590C, #C2410C); box-shadow: 0 30px 60px -30px rgba(194, 65, 12, .7); transition: transform .15s; }
.cc-spot:hover { transform: translateY(-3px); }
.cc-spot h2 { color: #fff; font-size: clamp(24px, 3vw, 32px); margin: 10px 0 8px; }
.cc-spot p { margin: 0; color: rgba(255,255,255,.9); font-size: 15.5px; }
.cc-spot ul { list-style: none; padding: 0; margin: 12px 0 16px; display: grid; gap: 6px; font-size: 14.5px; }
.cc-spot li::before { content: '✓  '; font-weight: 900; }
.cc-spot .btn { background: #fff; color: #C2410C; box-shadow: none; }
.cc-spot .cc-badge.hot { background: rgba(255,255,255,.95); }
.cc-spot-art { position: relative; display: grid; place-items: center; min-height: 0; padding: 4px 6px; }
/* dien thoai thang (nghieng lam vien rang cua), khong tai tho (de len chu man hinh), cat lay phan tren man ket qua cho chu to */
.cc-spot-art .phone { width: min(200px, 100%); aspect-ratio: 375 / 560; transform: none; padding: 8px; border-radius: 34px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.12) inset; }
.cc-spot-art .phone::before { display: none; }
.cc-spot-art .phone .scr { border-radius: 27px; }
.cc-float { position: absolute; z-index: 4; background: #fff; color: #1F2937; font-size: 12.5px; font-weight: 800; padding: 7px 10px; border-radius: 12px; box-shadow: 0 12px 26px -10px rgba(0,0,0,.4); white-space: nowrap; animation: floaty 4s ease-in-out infinite; }
.cc-float.s1 { left: 0; top: 14%; } .cc-float.s2 { left: 8px; bottom: 10%; animation-delay: -2s; color: #B91C1C; }
.cc-feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cc-fc { position: relative; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 20px; transition: transform .15s, box-shadow .15s; }
.cc-fc:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(0,0,0,.4); }
.cc-fc h3 { font-size: 19px; margin-top: 4px; }
.cc-fc p { margin: 0; color: var(--ink2); font-size: 14.5px; line-height: 1.5; }
.cc-fc .go { margin-top: auto; padding-top: 8px; font-weight: 800; color: var(--pri); font-size: 14.5px; }
.cc-fc.f-exam { background: linear-gradient(180deg, #E7F7F2 0, #fff 60%); } .cc-fc.f-exam .go { color: #0E9F86; }
.cc-fc.f-nx { background: linear-gradient(180deg, #E6F1FC 0, #fff 60%); } .cc-fc.f-nx .go { color: #0B7BD4; }
.cc-fc.f-sim { background: linear-gradient(180deg, #F0EAFF 0, #fff 60%); } .cc-fc.f-sim .go { color: #6D4AE8; }
/* hinh minh hoa nho bang CSS */
.cc-mock { height: 96px; border-radius: 14px; background: #fff; border: 1px solid rgba(0,0,0,.06); margin: 4px 0 6px; position: relative; overflow: hidden; }
.m-exam { padding: 14px 16px; display: grid; gap: 8px; align-content: start; }
.m-exam i { display: block; height: 6px; border-radius: 4px; background: #D9E7E3; width: 70%; } .m-exam i.s { width: 45%; }
.m-exam b { position: absolute; right: 14px; top: 14px; width: 56px; height: 56px; border-radius: 50%; border: 3px solid #DC2626; color: #DC2626; display: grid; place-items: center; font-size: 19px; transform: rotate(-10deg); font-family: 'Mali', cursive; }
.m-nx { padding: 10px 14px; display: grid; gap: 6px; }
.m-nx div { display: flex; gap: 8px; align-items: center; } .m-nx i { flex: 1; height: 6px; border-radius: 4px; background: #D6E4F3; }
.m-nx span { width: 22px; height: 16px; border-radius: 5px; background: #DCFCE7; color: #166534; font-size: 11px; font-weight: 800; display: grid; place-items: center; } .m-nx span.c { background: #FEF3C7; color: #92400E; }
.m-sim { display: flex; align-items: center; justify-content: center; gap: 14px; }
.m-sim .ph { font-size: 34px; } .m-sim .ar { font-size: 26px; color: #6D4AE8; font-weight: 900; }
.m-sim .pp { position: relative; width: 70px; height: 74px; background: #fff; border: 1px solid #E5E7EB; border-radius: 6px; padding: 10px 8px; display: grid; gap: 7px; align-content: start; box-shadow: 0 8px 18px -10px rgba(0,0,0,.3); }
.m-sim .pp i { height: 5px; border-radius: 3px; background: #E4DBFF; } .m-sim .pp em { position: absolute; right: -8px; top: -10px; font-style: normal; font-size: 20px; }
.cc-card { position: relative; }
.cc-card > .cc-badge { position: absolute; right: 12px; top: 12px; }
.cc-grid.top { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.cc-card.big { border-width: 1.5px; } .cc-card.big h3 { font-size: 17px; }
.cc-card.spot { background: linear-gradient(135deg, #FFF1E6, #fff); border-color: #FDBA8C; }
.cc-hide { display: none !important; }
.nav-dd .dd a.top { background: var(--bg); } .nav-dd .dd hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.nav-dd .dd { max-height: 75vh; overflow: auto; }
@media (max-width: 960px) { .cc-hero { grid-template-columns: 1fr; } .cc-feat { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .cc-feat { grid-template-columns: 1fr; }
  .cc-spot { grid-template-columns: 1fr; }
  .cc-spot-art { min-height: 0; display: none; }
  .cc-spot .btn { width: 100%; }
}
@media (max-width: 640px) {
  .cc-mock { height: 72px; } .m-exam b { width: 44px; height: 44px; font-size: 16px; top: 12px; } .m-sim .pp { height: 58px; }
  .nav-dd > summary { white-space: nowrap; font-size: 14px; padding: 8px 6px; }
  .cc-hero .eyebrow { font-size: 12.5px; }
}
@media (max-width: 640px) { .cc-hs { display: none; } }

/* ---------- slider "Noi bat" (xep theo nguoi dung, cong-cu.php + cc.js) ---------- */
.cc-car-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cc-car-h .cc-h2 { margin: 0; }
.cc-car-btns { margin-left: auto; display: flex; gap: 8px; }
.cc-car-nav { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.cc-car-nav:hover { border-color: var(--pri); color: var(--pri); }
.cc-car-nav:disabled { opacity: .35; cursor: default; }
.cc-car { position: relative; margin: 0 -20px; }
.cc-car-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; padding: 6px 20px 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.cc-car-track::-webkit-scrollbar { display: none; }
.cc-car-track > .cc-fc { flex: 0 0 calc((100% - 72px) / 3); scroll-snap-align: start; }
.cc-car-dots { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.cc-car-dots button { width: 8px; height: 8px; border-radius: 6px; border: 0; padding: 0; background: var(--line); cursor: pointer; transition: width .2s, background .2s; }
.cc-car-dots button.on { width: 22px; background: var(--pri); }
.cc-fc-bs { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }
.cc-fc.f-trinh-do-tieng-anh { background: linear-gradient(180deg, #FFF6DB 0, #fff 60%); } .cc-fc.f-trinh-do-tieng-anh .go { color: #B45309; }
.cc-fc.f-phieu-bai-tap { background: linear-gradient(180deg, #FFF3E0 0, #fff 60%); } .cc-fc.f-phieu-bai-tap .go { color: #C2410C; }
.cc-fc.f-phat-am { background: linear-gradient(180deg, #F0EAFF 0, #fff 60%); } .cc-fc.f-phat-am .go { color: #6D4AE8; }
.cc-fc.f-thoi-khoa-bieu { background: linear-gradient(180deg, #FDECF3 0, #fff 60%); } .cc-fc.f-thoi-khoa-bieu .go { color: #BE185D; }
.cc-fc.f-tinh-diem { background: linear-gradient(180deg, #ECEEFB 0, #fff 60%); } .cc-fc.f-tinh-diem .go { color: #4F46E5; }
.cc-fc.f-vong-quay { background: linear-gradient(180deg, #E6F1FC 0, #fff 60%); } .cc-fc.f-vong-quay .go { color: #0B7BD4; }
.cc-fc.f-de-thi { background: linear-gradient(180deg, #E7F7F2 0, #fff 60%); } .cc-fc.f-de-thi .go { color: #0E9F86; }
.cc-fc.f-nhan-xet-hoc-ba { background: linear-gradient(180deg, #E6F1FC 0, #fff 60%); } .cc-fc.f-nhan-xet-hoc-ba .go { color: #0B7BD4; }
.cc-fc.f-de-tuong-tu { background: linear-gradient(180deg, #F0EAFF 0, #fff 60%); } .cc-fc.f-de-tuong-tu .go { color: #6D4AE8; }
.m-lv { display: flex; align-items: flex-end; justify-content: center; gap: 8px; padding: 12px 40px 10px 14px; }
.m-lv span { flex: 1; text-align: center; font-size: 12px; font-weight: 800; color: #92400E; background: #FEF3C7; border-radius: 8px 8px 4px 4px; padding: 6px 0; }
.m-lv span:nth-child(1) { height: 30px; } .m-lv span:nth-child(2) { height: 44px; } .m-lv span:nth-child(3) { height: 58px; } .m-lv span:nth-child(4) { height: 72px; opacity: .5; }
.m-lv span.on { background: #F59E0B; color: #fff; } .m-lv b { position: absolute; right: 10px; top: 6px; font-size: 22px; }
.m-ws { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 14px 16px; font: 700 15px 'Be Vietnam Pro', sans-serif; color: #374151; align-content: center; }
.m-pa { display: grid; place-items: center; align-content: center; gap: 4px; } .m-pa b { font-size: 22px; } .m-pa span { font-size: 14px; color: #6B7280; font-family: 'Segoe UI', sans-serif; }
.m-tkb { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 14px; } .m-tkb i { display: block; border-radius: 6px; height: 28px; }
.m-calc { display: grid; place-items: center; align-content: center; gap: 2px; } .m-calc span { font-size: 13px; color: #6B7280; } .m-calc b { font-size: 28px; color: #4F46E5; }
.m-wheel { display: flex; align-items: center; justify-content: center; gap: 14px; }
.m-wheel .w { width: 72px; height: 72px; border-radius: 50%; background: conic-gradient(#F87171 0 60deg, #FBBF24 0 120deg, #34D399 0 180deg, #60A5FA 0 240deg, #A78BFA 0 300deg, #F472B6 0); box-shadow: inset 0 0 0 3px #fff, 0 4px 10px -4px rgba(0,0,0,.3); animation: ccspin 8s linear infinite; }
.m-wheel span { font-weight: 800; font-size: 15px; }
@media (max-width: 960px) { .cc-car-track > .cc-fc { flex-basis: calc((100% - 56px) / 2); } }
@media (max-width: 640px) {
  .cc-car-track > .cc-fc { flex-basis: 84%; }
  .cc-car-btns { display: none; }
  .m-wheel .w { width: 54px; height: 54px; } .m-tkb i { height: 18px; } .m-lv span:nth-child(4) { height: 56px; } .m-lv span:nth-child(3) { height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .m-wheel .w { animation: none; } }