/**
 * Theory "Vương Quốc Cờ Nhí" — SẢNH (Lobby) — HỆ SLOT (placeholder).
 *
 * STAGE tỉ lệ khoá 1672:941, nền = scene lâu đài (var --ck-royal-scene, đặt trên
 * shell). Mỗi .lp-slot đặt tuyệt đối theo % (left/top/width từ inline). Font dùng
 * cqw để scale theo bề rộng stage. Ảnh giữ đúng aspect-ratio (KHÔNG bóp méo).
 * Debug lưới slot + toạ độ: thêm ?ck_slots=1 (mỗi slot hiện viền + tên·toạ độ).
 * Juice: hover pop, idle float, CTA pulse, chữ cartoon gradient+outline+shimmer.
 */

/* ===== Ẩn chrome site (immersive) ===== */
body.view-theoriescourse.layout-lobby #sidebar-left,
body.view-theoriescourse.layout-lobby .sidebar-toggle-btn,
body.view-theoriescourse.layout-lobby #sidebar-right { display: none !important; }
/* Header có inline display:flex!important (không đè bằng display:none được) →
   visibility ẩn + R3: triệt luôn CHIỀU CAO (height 0) kẻo đẩy stage 100vh xuống,
   lộ dải trắng trên đầu màn full-screen. */
body.view-theoriescourse.layout-lobby header.ck-header {
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}
body.view-theoriescourse.layout-lobby section.body { padding-top: 0 !important; }
html body.view-theoriescourse.layout-lobby .content-body,
html.sidebar-collapsed body.view-theoriescourse.layout-lobby .content-body { margin: 0 !important; padding: 0 !important; }
/* R3: wrapper component có margin-top 15px (+ page-header đệm) → đẩy stage 100vh
   xuống, hở dải trắng trên đầu. Lobby full-screen: triệt mọi đệm quanh stage. */
body.view-theoriescourse.layout-lobby .education-management { margin: 0 !important; }
/* #system-message-container margin-top 25px (template .has-page-header) là first
   in-flow child → margin COLLAPSE lên content-body, đẩy stage xuống 25px.
   Message (nếu có) vẫn hiện — chỉ mất khoảng đệm. */
body.view-theoriescourse.layout-lobby #system-message-container { margin: 0 !important; }
body.view-theoriescourse.layout-lobby .content-body .page-header { display: none !important; }

/* ===== Shell = nền trời, canh giữa stage ===== */
.ck-royal-lobby.ck-theories-viewer-shell {
    position: relative;           /* chứa backdrop ::before full-bleed */
    min-height: 100vh;
    margin: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #4aa3e8 0%, #86c4f2 55%, #b7deba 100%) !important;
    overflow: hidden;
    font-family: 'Inter', 'Baloo 2', system-ui, sans-serif;
    color: var(--ck-royal-ink);
}

/* R3: backdrop blur rìa BỎ — stage giờ cover kín viewport, không còn letterbox
   để lộ rìa (đỡ 1 lớp blur 13px mỗi frame). */

/* ===== SKELETON khi tải (spec 9) =====
   Script inline trong stage thêm .is-loading rồi preload scene; ảnh xong/lỗi/
   timeout 4s → gỡ class. JS tắt → không bao giờ có class → hiện bình thường. */
.lp-stage.is-loading { background-image: none; }
.lp-stage.is-loading::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(120deg, #123058 0%, #1e4a80 45%, #123058 90%);
    background-size: 200% 100%;
    animation: lpSkelShimmer 1.2s linear infinite;
    z-index: 4;
}
.lp-stage > .lp-slot { transition: opacity .35s ease; }
.lp-stage.is-loading > .lp-slot { opacity: 0; }
@keyframes lpSkelShimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
    .lp-stage.is-loading::before { animation: none; }
    .lp-stage > .lp-slot { transition: none; }
}

/* ===== STAGE (tỉ lệ khoá, nền scene sắc nét, nổi trên backdrop) ===== */
/* R3 (polish-mockup, quyết định #10): FULL MÀN HÌNH như chessworld — bỏ
   letterbox contain 1672:941. Scene COVER kín viewport; slot % giờ tính theo
   viewport (cqw theo width thật). Tỉ lệ khác 16:9 → scene crop mép (cover),
   cụm slot vẫn đúng vị trí tương đối. */
.lp-stage {
    position: relative;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    aspect-ratio: auto;
    background: var(--ck-royal-scene, none) center / cover no-repeat;
    container-type: inline-size;
    overflow: hidden;
}

/* ===== Slot chung (đặt tuyệt đối theo %) ===== */
.lp-slot { position: absolute; box-sizing: border-box; }

/* ===== Debug lưới slot (?ck_slots=1) ===== */
.lp-stage.is-slots .lp-slot { outline: 2px dashed rgba(255, 40, 40, .9); background: rgba(255, 0, 0, .06); }
.lp-stage.is-slots .lp-slot::after {
    content: attr(data-slot);
    position: absolute; left: 0; top: -1.4cqw;
    font: 900 1cqw/1 'Inter', sans-serif;
    color: #fff; background: rgba(200, 0, 0, .85);
    padding: 1px 4px; border-radius: 4px; white-space: nowrap; z-index: 99;
}

/* ============================ IMAGE slot ============================ */
.lp-img { line-height: 0; }
.lp-img img { width: 100%; height: auto; display: block; filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .3)); }
.lp-img.is-circle {
    aspect-ratio: 1; border-radius: 50%; overflow: hidden;
    background: linear-gradient(180deg, #eaf3ff, #cfe0f7);
    border: .35cqw solid var(--ck-royal-gold);
    box-shadow: 0 .3cqw 0 var(--ck-royal-gold-deep);
    display: flex; align-items: flex-end; justify-content: center;
}
.lp-img.is-circle img { width: 90%; filter: none; }
.lp-anim-owl img { transform-origin: bottom center; animation: lp-owl-bob 3.4s ease-in-out infinite; }
.lp-anim-pawn img { transform-origin: bottom center; animation: lp-pawn-bob 3.9s ease-in-out infinite; }
@keyframes lp-owl-bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@keyframes lp-pawn-bob { 0%,100% { transform: translateY(0) rotate(1deg); } 50% { transform: translateY(-5px) rotate(-2deg); } }

/* ============================ TEXT slot ============================ */
.lp-text { display: flex; align-items: center; }
.lp-text--name {
    background: linear-gradient(180deg, var(--ck-royal-parchment-hi), var(--ck-royal-parchment));
    border: .35cqw solid var(--ck-royal-gold);
    border-radius: var(--ck-royal-radius-btn);
    padding: .3cqw 1.2cqw;
    font-weight: var(--ck-royal-weight); color: var(--ck-royal-blue-deep);
    box-shadow: 0 .3cqw 0 var(--ck-royal-gold-deep);
    font-size: 1.5cqw; white-space: nowrap; overflow: hidden;
    justify-content: flex-start;
}

/* ============================ BAR slot ============================ */
.lp-bar {
    height: 2.4cqw;
    border-radius: var(--ck-royal-radius-btn);
    background: rgba(60, 40, 10, .45);
    border: .35cqw solid var(--ck-royal-gold);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center; gap: .3em;
    box-shadow: inset 0 2px 4px rgba(30, 15, 0, .5);
}
.lp-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, var(--ck-royal-blue-hi), var(--ck-royal-blue) 70%, var(--ck-royal-blue-deep)); border-radius: var(--ck-royal-radius-btn); transition: width .6s cubic-bezier(.2, 1, .3, 1); }
.lp-bar-num { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .3em; font-weight: var(--ck-royal-weight); font-size: 1.15cqw; color: #fff; text-shadow: 0 1px 2px rgba(10, 30, 80, .9); }

/* ============================ PILL slot (resource) ============================ */
.lp-respill {
    display: flex; align-items: center; justify-content: center; gap: .3em;
    background: linear-gradient(180deg, #6b4a24, #4e3213);
    border: .35cqw solid var(--ck-royal-gold);
    border-radius: var(--ck-royal-radius-btn);
    padding: .25cqw .8cqw;
    font-weight: var(--ck-royal-weight); color: #fff; font-size: 1.25cqw;
    box-shadow: 0 .3cqw 0 rgba(40, 25, 5, .6), inset 0 2px 0 rgba(255, 255, 255, .15);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5); white-space: nowrap;
}

/* ============================ TITLE slot ============================ */
/* R1 fix TRÀN CHỮ (audit): bỏ aspect-ratio cứng — banner ảnh vẫn vẽ 100%/100%,
   chữ overflow:hidden + font co (rule dưới); min-height giữ dáng khi tên ngắn.
   Slot frame_banner (9-slice Bộ E) về thì thay hẳn khung. */
.lp-title {
    min-height: 5.2cqw;
    background-size: 100% 100%; background-repeat: no-repeat;
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 1.1cqw 2.2cqw 1.4cqw;
    overflow: hidden;
    animation: lp-drop .6s cubic-bezier(.2, 1.5, .4, 1) both;
}
@keyframes lp-drop { 0% { opacity: 0; transform: translateY(-20px) scale(.92); } 100% { opacity: 1; transform: none; } }
/* Tiêu đề: chữ XANH-ĐẬM đặc (tương phản cao trên nền kem) + viền vàng-đậm cartoon,
   BỎ gradient-vàng + shimmer (review: gold-trên-kem contrast thấp + động khó đọc). */
.lp-title-txt {
    position: relative;
    /* R1: dùng cqw nhỏ hơn khi tên dài không vừa (line-clamp 2 + khung co) */
    font-weight: 900; font-size: clamp(0.85rem, 2.02cqw, 1.6rem); line-height: 1.12; letter-spacing: .1px;
    color: var(--ck-royal-blue-deep);
    -webkit-text-fill-color: var(--ck-royal-blue-deep);
    text-shadow: 0 2px 0 rgba(255, 255, 255, .55);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lp-title-txt::before {
    content: attr(data-text);
    position: absolute; left: 0; top: 0; right: 0;
    -webkit-text-stroke: .5cqw var(--ck-royal-gold-deep); color: transparent; z-index: -1;
    text-shadow: 0 3px 0 rgba(120, 80, 20, .3);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ============================ RAIL slot ============================ */
.lp-rail-btn {
    aspect-ratio: 109 / 102;
    background-size: 100% 100%; background-repeat: no-repeat;
    display: flex; align-items: center; justify-content: center;
    transition: transform .12s ease, filter .12s ease;
}
.lp-rail-btn img { width: 58%; height: auto; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
.lp-rail-btn:hover { transform: scale(1.12) rotate(-3deg); filter: drop-shadow(0 0 10px rgba(255, 230, 140, .9)); }
.lp-rail-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 12px; }

/* ============================ PORTAL slot ============================ */
.lp-portal { display: flex; flex-direction: column; align-items: center; text-decoration: none; transition: transform .14s cubic-bezier(.2, 1.3, .4, 1); }
a.lp-portal:hover { transform: translateY(-8px); }
a.lp-portal:focus-visible { outline: 4px solid #fff; outline-offset: 4px; border-radius: 18px; }
/* R3 (audit "cổng tàng hình"): khoá/sắp-mở vẫn PHẢI đọc được — chỉ giảm nhẹ,
   ổ khoá + nhãn giữ tương phản đầy đủ. */
.lp-portal.is-locked, .lp-portal.is-soon { filter: saturate(.55) opacity(.85); cursor: not-allowed; }

/* R3 (spec 9): cổng KHUYẾN NGHỊ (đích CTA) — glow vàng thở + badge */
.lp-portal.is-reco .lp-portal-frame {
    animation: lpRecoGlow 2.2s ease-in-out infinite;
    border-radius: 8%;
}
@keyframes lpRecoGlow {
    0%, 100% { filter: drop-shadow(0 0 0.4cqw rgba(246, 201, 69, 0.55)); }
    50% { filter: drop-shadow(0 0 1.1cqw rgba(246, 201, 69, 0.95)); }
}
.lp-portal.is-reco::after {
    content: "Bắt đầu!";
    position: absolute;
    top: -1.1cqw;
    right: -0.6cqw;
    padding: 0.25cqw 0.8cqw;
    border-radius: 999px;
    background: linear-gradient(180deg, #ff8a5c, #e85d3d);
    color: #fff;
    font-size: 0.95cqw;
    font-weight: 900;
    box-shadow: 0 0 0 0.18cqw #f6c945, 0 0.3cqw 0.6cqw rgba(120, 40, 20, 0.4);
    z-index: 3;
    animation: lpRecoBadge 1.6s ease-in-out infinite;
}
@keyframes lpRecoBadge { 0%, 100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
    .lp-portal.is-reco .lp-portal-frame, .lp-portal.is-reco::after { animation: none; }
}
.lp-portal-frame {
    position: relative; width: 100%; aspect-ratio: 340 / 335;
    background-size: 100% 100%; background-repeat: no-repeat;
    display: flex; align-items: flex-end; justify-content: center;
    filter: drop-shadow(0 8px 14px rgba(20, 40, 90, .4)); transition: filter .14s ease; overflow: visible;
}
a.lp-portal:hover .lp-portal-frame { filter: drop-shadow(0 10px 16px rgba(20, 40, 90, .45)) drop-shadow(0 0 18px rgba(255, 230, 140, .9)); }
.lp-portal-frame::before { content: ""; position: absolute; inset: 16% 15% 17% 15%; border-radius: 14px; background: radial-gradient(circle at 50% 40%, var(--tone-hi, var(--ck-royal-blue-hi)), var(--tone, var(--ck-royal-blue)) 88%); opacity: .5; z-index: 0; }
.lp-portal.is-locked .lp-portal-frame::after { content: "🔒"; position: absolute; z-index: 2; top: 40%; left: 0; right: 0; text-align: center; font-size: 3cqw; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .4)); }
.lp-portal-art {
    position: relative; z-index: 1; width: 84%; height: auto; margin-bottom: 4%;
    filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3)); transform-origin: bottom center;
    animation: lp-float 3.6s ease-in-out infinite;
}
.lp-portal--green .lp-portal-art { animation-delay: .5s; }
.lp-portal--violet .lp-portal-art { animation-delay: .9s; }
@keyframes lp-float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(1deg); } }
a.lp-portal:hover .lp-portal-art { animation: none; transform: scale(1.13) translateY(-8px) rotate(-2deg); }
.lp-portal-badge { position: absolute; z-index: 3; top: 9%; right: 12%; font-size: 1.6cqw; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); }
.lp-portal-pill {
    margin-top: -9%; position: relative; z-index: 4;
    padding: .35cqw 1cqw; border-radius: var(--ck-royal-radius-btn);
    font-weight: var(--ck-royal-weight); color: #fff; border: .3cqw solid var(--ck-royal-gold);
    background: linear-gradient(180deg, var(--tone-hi, var(--ck-royal-blue-hi)), var(--tone, var(--ck-royal-blue)));
    box-shadow: 0 .35cqw 0 rgba(0, 0, 0, .22), inset 0 2px 0 rgba(255, 255, 255, .4);
    white-space: nowrap; font-size: 1.45cqw;
    -webkit-text-stroke: .09cqw var(--ck-royal-text-stroke); paint-order: stroke fill;
    transition: transform .14s ease;
}
a.lp-portal:hover .lp-portal-pill { transform: translateY(-3px) scale(1.06); }
.lp-portal--blue { --tone: var(--ck-royal-blue); --tone-hi: var(--ck-royal-blue-hi); }
.lp-portal--green { --tone: var(--ck-royal-green-mid); --tone-hi: var(--ck-royal-green-hi); }
.lp-portal--grey { --tone: #8a8f98; --tone-hi: #c4c9d0; }
.lp-portal--violet { --tone: #7c4bd0; --tone-hi: #b48cf0; }
.lp-portal--amber { --tone: #d98a1f; --tone-hi: #f6c945; } /* R3: cổng Kết Quả & Thưởng */

/* ============================ CTA / MANAGE ============================ */
/* CTA "Vào Học Ngay" = PRIMARY (xanh) — role semantic (đổi từ đỏ). Consume token. */
.lp-cta {
    display: flex; align-items: center; justify-content: center; gap: .35em;
    text-decoration: none; height: 6.2cqw; border-radius: var(--ck-royal-radius-btn);
    font-weight: var(--ck-royal-weight); font-size: 2cqw; color: #fff;
    background: var(--ck-royal-btn-primary);
    border: .4cqw solid var(--ck-royal-gold);
    box-shadow: 0 .5cqw 0 var(--ck-royal-btn-primary-shade), 0 1cqw 1.6cqw -.4cqw rgba(28, 63, 134, .55), inset 0 2px 0 rgba(255, 255, 255, .35);
    -webkit-text-stroke: .08cqw var(--ck-royal-text-stroke); paint-order: stroke fill;
    text-shadow: 0 2px 3px rgba(10, 25, 60, .5);
    transition: transform .1s ease, box-shadow .1s ease, filter .1s ease;
    animation: lp-cta-pulse 2.2s ease-in-out infinite;
}
@keyframes lp-cta-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.lp-cta:hover { animation: none; filter: brightness(1.06); transform: scale(1.05); }
.lp-cta:active { animation: none; transform: translateY(var(--ck-royal-press-travel)); box-shadow: 0 2px 0 var(--ck-royal-btn-primary-shade), inset 0 2px 0 rgba(255, 255, 255, .3); }
.lp-cta:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
/* CTA vô hiệu (khoá chưa có nội dung) — xám, không pulse, không bấm được. */
.lp-cta.is-disabled {
    background: linear-gradient(180deg, #d9d2c4, #bcb3a2) !important;
    color: #6b6355 !important;
    border-color: #b8a98a !important;
    box-shadow: 0 .4cqw 0 #9a8f78, inset 0 2px 0 rgba(255, 255, 255, .3) !important;
    text-shadow: none; -webkit-text-stroke: 0;
    animation: none !important; cursor: not-allowed; pointer-events: none;
}
/* Quản Lý = SECONDARY (gold, chữ xanh đậm) — role semantic (đổi từ xanh). */
.lp-manage {
    display: flex; align-items: center; justify-content: center; gap: .35em;
    text-decoration: none; height: 5cqw; border-radius: var(--ck-royal-radius-btn);
    font-weight: var(--ck-royal-weight); color: var(--ck-royal-blue-deep); font-size: 1.45cqw;
    background: var(--ck-royal-btn-secondary);
    border: .3cqw solid var(--ck-royal-gold);
    box-shadow: 0 .4cqw 0 var(--ck-royal-btn-secondary-shade), inset 0 2px 0 rgba(255, 255, 255, .5);
    -webkit-text-stroke: .06cqw rgba(120, 90, 20, .35); paint-order: stroke fill;
    white-space: nowrap; transition: transform .12s ease;
}
.lp-manage:hover { transform: translateY(-3px) scale(1.05); }
.lp-manage.is-locked { background: linear-gradient(180deg, #9aa0a8, #6b7078); color: #fff; -webkit-text-stroke: 0; box-shadow: 0 .4cqw 0 #4a4e55; cursor: not-allowed; }
.lp-manage.is-locked:hover { transform: none; }

/* ============================ MASCOT bong bóng ============================ */
.lp-bubble {
    background: var(--ck-royal-parchment-hi); border: .3cqw solid var(--ck-royal-gold);
    border-radius: 18px 18px 4px 18px; padding: .8cqw 1cqw;
    font-weight: 700; font-size: 1.1cqw; color: var(--ck-royal-ink);
    box-shadow: var(--ck-royal-shadow); line-height: 1.32;
    animation: lp-bubble-in .5s ease .3s both;
}
@keyframes lp-bubble-in { 0% { opacity: 0; transform: translateY(8px) scale(.9); } 100% { opacity: 1; transform: none; } }
.lp-bubble b { color: var(--ck-royal-blue-deep); }

/* ============================ A11y ============================ */
@media (prefers-reduced-motion: reduce) {
    .lp-anim-owl img, .lp-anim-pawn img, .lp-portal-art, .lp-cta, .lp-title, .lp-title-txt, .lp-bubble { animation: none !important; }
    .lp-portal, .lp-cta, .lp-bar-fill, .lp-rail-btn, .lp-portal-art, .lp-portal-pill, .lp-manage { transition: none !important; }
}

/* ---------------- P3-DAILY → R4: card "Nhiệm vụ hôm nay" ----------------
   Style dời sang theory-daily-card.css (layout theory.daily_card tự enqueue —
   dùng chung Sảnh + Khu Vực). */

/* ---------------- P4-ONBOARD: chào bé lần đầu (ckob) ---------------- */
.ckob {
  position: fixed;
  inset: 0;
  z-index: 9600; /* trên lp-daily(40), dưới cktrans(99999) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 28, 66, 0.5);
  animation: ckobFade 0.25s ease-out both;
}
.ckob.is-leaving { animation: ckobFade 0.22s ease-in reverse both; }
@keyframes ckobFade { from { opacity: 0; } to { opacity: 1; } }
.ckob.is-step2 {
  align-items: flex-end;
  padding-bottom: 5vh;
  background: rgba(16, 28, 66, 0.28);
  /* Fix review HIGH: cổng được chỉ phải BẤM ĐƯỢC THẬT. .lp-stage tạo stacking
     context (z-index:1) nhốt z-index con → z 9601 vô dụng. Giải pháp đúng:
     overlay bỏ nhận chuột, card bật lại → click xuyên tới cổng <a> thật. */
  pointer-events: none;
}
.ckob.is-step2 .ckob-card { pointer-events: auto; }
.ckob-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(92vw, 460px);
  max-height: 86vh;
  overflow-y: auto;
  padding: 22px 20px 16px;
  background: linear-gradient(180deg, #fffdf3, #f7edc8);
  border-radius: 22px;
  box-shadow: 0 0 0 3px #b9821f, 0 0 0 6px #f6c945, 0 22px 50px -14px rgba(5, 15, 45, 0.7);
  text-align: center;
  animation: ckobPop 0.34s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes ckobPop { from { transform: scale(0.6) translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.ckob-mascot { width: 92px; height: 92px; object-fit: contain; }
.ckob-mascot--sm { width: 60px; height: 60px; }
.ckob-title { font-size: clamp(1.1rem, 4vw, 1.4rem); font-weight: 900; color: #1c3f86; }
.ckob-sub { font-weight: 700; color: #6b5b33; }
.ckob-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; width: 100%; margin-top: 6px; }
.ckob-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #f6c945;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.ckob-avatar:hover { transform: translateY(-3px); }
.ckob-avatar.is-picked { border-color: #2f68c9; box-shadow: 0 0 0 3px rgba(47, 104, 201, 0.4); }
.ckob-avatar img { width: 58px; height: 58px; object-fit: contain; }
.ckob-avatar-name { font-size: 0.75rem; font-weight: 900; color: #23324d; }
.ckob-go {
  min-height: 48px;
  margin-top: 8px;
  padding: 0 26px;
  border: 3px solid #f6c945;
  border-radius: 14px;
  background: linear-gradient(180deg, #6fc95a, #4e9a3e);
  color: #fff;
  font-weight: 900;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 3px 0 #2f6a23;
}
.ckob-skip {
  border: 0;
  background: none;
  color: #8a6a1f;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  min-height: 38px;
}
/* Cổng được chỉ: vòng sáng thở (bên NGOÀI overlay — element lp-portal). */
.lp-portal.ckob-focus {
  animation: ckobFocusGlow 1s ease-in-out infinite;
  border-radius: 14px;
}
@keyframes ckobFocusGlow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.55), 0 0 24px 8px rgba(253, 224, 71, 0.45); }
  50% { box-shadow: 0 0 0 8px rgba(251, 191, 36, 0.8), 0 0 40px 14px rgba(253, 224, 71, 0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .ckob, .ckob-card, .lp-portal.ckob-focus { animation: none; }
}
.ckob-note { color: #b45309; font-weight: 800; font-size: 0.85rem; }