/*! Jueyin · Bản C 1.7 (xem thử) · assets/c-skin.css
 * Lớp giao diện đặt lên bản A. Chỉ đổi cách trình bày: không thêm, bớt hay đổi nút, ô nhập, liên kết, phím tắt, dữ liệu.
 * Từ 1.7, art 6 trò chơi dùng chung với bản A (đã chốt): file này không còn lớp art riêng. Gỡ file này ra là về đúng bản A.
 */

/* ==========================================================================
   0. Chung
   ========================================================================== */
:root{--c-ink:#251711;--c-wine:#721f24;--c-wine-hi:#8d2c32;--c-gold:#b99054;--c-gold-hi:#e8c895;--c-paper:#faf7f1;--c-cream:#fffdf9;--c-line:rgba(58,37,27,.16);
  --c-shadow:0 1px 2px rgba(37,23,17,.05),0 14px 32px -20px rgba(37,23,17,.38);--c-glass:rgba(37,23,17,.72);--c-glass-edge:rgba(233,206,160,.42)}
::selection{background:rgba(185,144,84,.3)}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* ==========================================================================
   1. Nút nổi: chọn ngôn ngữ, Toki, nhãn bản xem thử
   ========================================================================== */
/* viên thuốc kính mờ gọn ở góc trên phải */
.portal-tools>label,.portal-tools label,.lang-box{min-height:36px!important;padding:0 12px 0 14px!important;border:1px solid var(--c-glass-edge)!important;border-radius:999px!important;
  background:var(--c-glass)!important;color:#fff8ee!important;box-shadow:0 12px 28px -16px rgba(0,0,0,.7)!important;-webkit-backdrop-filter:blur(14px) saturate(140%)!important;backdrop-filter:blur(14px) saturate(140%)!important;font-size:.78rem!important;letter-spacing:.02em}
.portal-tools select,.lang-box select{font-weight:650}
.portal-tools>a{width:38px!important;height:38px!important;border-radius:50%!important;border:1px solid var(--c-glass-edge)!important;background:var(--c-glass)!important;-webkit-backdrop-filter:blur(14px)!important;backdrop-filter:blur(14px)!important}
.portal-tools>label:hover,.lang-box:hover,.portal-tools>a:hover{border-color:rgba(233,206,160,.75)!important}
/* Toki nhỏ lại để không che nút và chữ (vẫn bấm được như cũ) */
.toki-floating-mascot{width:112px!important;height:91px!important}
@media (max-width:640px){.toki-floating-mascot{width:84px!important;height:68px!important}}
/* nhãn “Xem thử” của bản xem thử: gọn hơn */
#jydemo-pill{transform:scale(.86);transform-origin:left bottom;opacity:.94}

/* ==========================================================================
   2. Thư phòng (ThuPhong) · ngoài module Bàn học
   ========================================================================== */
/* đầu Thư phòng: ô mã ưu đãi cùng kiểu kính mờ với ô tìm, không còn khối trắng nổi */
.hero .library-redeem{border-color:rgba(233,206,160,.45)!important;background:rgba(37,23,17,.5)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero .library-redeem input{background:rgba(255,253,250,.1)!important;color:#fff8ee!important;border:1px solid rgba(233,206,160,.28)!important}
.hero .library-redeem input::placeholder{color:rgba(255,248,238,.62)!important}
.hero .library-redeem button{background:linear-gradient(180deg,#d9b67a,#b99054)!important}
/* thẻ tài liệu HSK: nút viền thanh thay cho khối đen nặng */
.documents .card{border-radius:12px;overflow:hidden;box-shadow:var(--c-shadow);transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s}
.documents .card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(37,23,17,.05),0 22px 40px -22px rgba(37,23,17,.45)}
.documents .card .photo{border-radius:0}
.documents .card-body{min-height:0;padding:20px 22px 22px}
.documents .card-body h3{margin-top:4px}
.documents .card-body p.vocab{margin-top:6px}
.documents .card-actions{padding-top:16px}
.documents .card-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border:1px solid rgba(37,23,17,.55)!important;border-radius:9px!important;background:transparent!important;color:var(--c-ink)!important;font-weight:700;letter-spacing:.01em;
  transition:background-color .15s,color .15s,border-color .15s}
.documents .card-actions .btn::after{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.documents .card-actions .btn:hover,.documents .card-actions .btn:focus-visible{background:var(--c-ink)!important;color:#fff8ee!important;border-color:var(--c-ink)!important}
.documents .card-actions:has(> .btn ~ .btn){grid-template-columns:repeat(auto-fit,minmax(0,1fr))!important}
.documents .card-actions:has(> .btn ~ .btn) .btn::after{display:none}
.documents .free{border-radius:4px}
/* “Jueyin hoạt động như thế nào”: biểu tượng nét mảnh thay cho ký tự ▤ ♫ ✎ */
.features{border-radius:14px;overflow:hidden}
.feature{transition:background-color .2s}
.feature:hover{background:#fffaf2}
.feature-head{align-items:center}
.feature-head>span:first-child{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(114,31,36,.28);border-radius:50%;font-size:0!important;color:transparent!important;background:#fffaf2}
.feature-head>span:first-child::before{content:"";width:20px;height:20px;background:var(--c-wine);-webkit-mask:var(--c-ic) center/contain no-repeat;mask:var(--c-ic) center/contain no-repeat}
.feature-head>span:last-child{font:500 1.05rem/1 "Palatino Linotype",Palatino,Georgia,serif;letter-spacing:.06em;color:var(--c-gold)}
.feature:nth-child(1){--c-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 4.8-9 4.8-9-4.8z'/%3E%3Cpath d='M3 12.2l9 4.8 9-4.8'/%3E%3Cpath d='M3 16.4l9 4.8 9-4.8'/%3E%3C/svg%3E")}
.feature:nth-child(2){--c-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15v-3a8 8 0 0 1 16 0v3'/%3E%3Crect x='3' y='14' width='4.5' height='7' rx='1.6'/%3E%3Crect x='16.5' y='14' width='4.5' height='7' rx='1.6'/%3E%3C/svg%3E")}
.feature:nth-child(3){--c-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 3.5c-2.8.9-8.6 6.6-10.8 9.6l1.7 1.7c3-2.2 8.7-8 9.1-11.3z'/%3E%3Cpath d='M8.6 14.3c-2.1-.1-3.6 1.4-3.6 3.5 0 .9-.6 1.7-1.6 2.2 3.4.7 6.6-1 6.9-4.2'/%3E%3C/svg%3E")}
.stats strong{font-variant-numeric:tabular-nums}

/* ==========================================================================
   3. Module Bàn học (jyh-*)
   ========================================================================== */
/* Bàn học: tab đang chọn có nền kem nhẹ; ô số liệu có đường vàng mảnh; bộ thẻ như gáy sách */
.jyh-tab[aria-selected="true"]{background:linear-gradient(180deg,rgba(185,144,84,0),rgba(185,144,84,.09))}
.jyh-stats{border-top-color:rgba(185,144,84,.55)!important}
.jyh-stats b{font-variant-numeric:tabular-nums}
.jyh-deck{background:linear-gradient(90deg,rgba(185,144,84,.07),transparent 38%),var(--jy-surface)!important}
.jyh-deck::before{width:6px!important;box-shadow:inset -1px 0 0 rgba(255,255,255,.35)}
.jyh-deck__name{font-family:var(--jy-font-title);font-weight:500;font-size:1.05rem}

/* ==========================================================================
   4. Trang bài HSK (2.0, 3.0, 4–9)
   ========================================================================== */
/* chữ phụ góc phải đầu trang không bị nút ngôn ngữ che */
.masthead>.eyebrow,.masthead .eyebrow{right:max(54px,184px)!important}
.foundation-eyebrow{right:max(54px,184px)!important}
@media (max-width:760px){
  .masthead>.eyebrow,.masthead .eyebrow{top:66px!important;right:18px!important}
}
/* thanh lọc từ vựng: một khối gọn, nút dạng viên thuốc */
#s-vo .tools:not(.vocab-pagination){gap:8px!important;padding:10px 12px!important;border:1px solid var(--c-line)!important;border-radius:12px!important;background:var(--c-cream)!important;box-shadow:var(--c-shadow)}
#s-vo .tools:not(.vocab-pagination) .mini{min-height:34px;padding:0 12px!important;border-radius:999px!important}
#s-vo .tools:not(.vocab-pagination) .mini[aria-pressed="true"],#s-vo .tools:not(.vocab-pagination) .mini.on{background:var(--c-ink)!important;color:#fff8ee!important;border-color:var(--c-ink)!important}
#s-vo .tools:not(.vocab-pagination) input[type=text],#s-vo .tools:not(.vocab-pagination) select{min-height:38px;border-radius:9px!important}
#s-vo .tools:not(.vocab-pagination) .cnt{margin-left:auto;font-variant-numeric:tabular-nums}
/* phân trang: một thanh mảnh */
.vocab-pagination{gap:8px!important;padding:8px 12px!important;border:1px solid var(--c-line)!important;border-radius:12px!important;background:rgba(255,253,249,.7)!important}
.vocab-pagination .mini{display:inline-flex;align-items:center;min-height:36px!important;border-radius:999px!important;padding:0 14px!important}
.vocab-pagination .cnt{font-variant-numeric:tabular-nums}
.vocab-page-jump input{border-radius:9px!important;text-align:center}
@media (max-width:620px){
  .vocab-pagination{flex-wrap:wrap!important;row-gap:8px!important}
  .vocab-pagination .mini{padding:0 12px!important;white-space:nowrap}
  .vocab-page-jump{flex:1 0 100%;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding-top:8px;border-top:1px dashed var(--c-line)}
}
/* dòng từ: nút nghe và nút thêm thẳng cột ở mép phải */
.vw .mn .meaning-text{flex:1 1 auto}
.vw .mn .vocab-audio{order:2}
.vw .mn .jyva-add{order:3}
.vw{border-radius:10px}
.vw:hover{background:rgba(238,231,222,.55)}
/* bảng: hàng xen màu, cuộn ngang trên điện thoại thay vì ép chữ */
.sec table tbody tr:nth-child(even)>td{background:rgba(238,231,222,.42)}
.sec table th{letter-spacing:.02em}
@media (max-width:700px){
  .sec table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .sec table th,.sec table td{min-width:6.6em}
  .sec table th:last-child,.sec table td:last-child{min-width:15em}
  .sec table th:first-child,.sec table td:first-child{position:sticky;left:0;z-index:1;background:#fbf8f3}
}
/* ghi chú trong trang: khung kem nằm gọn trong dòng chảy */
.sec p.note{border-left:3px solid var(--c-gold)!important;border-radius:0 10px 10px 0;background:#f6efe5!important;color:#3d2a20!important}
/* nút trong đầu trang bài học */
.doc-action{border-radius:9px!important}

/* ==========================================================================
   5. Hồ sơ, Quản lý (trang tài khoản)
   ========================================================================== */
body>header.top{padding-bottom:92px!important;min-height:270px!important}
body>header.top~main.wrap{margin-top:-44px!important}
body>header.top~main.wrap .card{border-radius:14px;box-shadow:0 1px 2px rgba(37,23,17,.05),0 18px 44px -24px rgba(37,23,17,.4)}
body>header.top~main.wrap .avatar-big{box-shadow:0 0 0 3px #fffdf9,0 0 0 4.5px var(--c-gold)}
body>header.top~main.wrap .field input,body>header.top~main.wrap .field textarea{min-height:44px;border-radius:9px}
body>header.top~main.wrap .btn{min-height:42px;border-radius:9px}
body:has(>header.top) a.back{border-radius:50%!important;border:1px solid var(--c-glass-edge)!important;background:var(--c-glass)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* ==========================================================================
   6. Toki (trang trò chuyện)
   ========================================================================== */
.toki-new{border-radius:10px!important}
.toki-welcome h1{letter-spacing:-.01em}

/* ==========================================================================
   7. Giảm chuyển động
   ========================================================================== */
@media (prefers-reduced-motion:reduce){.documents .card{transition:none!important}.documents .card:hover{transform:none}}