/* ==========================================================================
   class-layout2.css — chuyển bố cục class-showcase-card sang style "Image 2"
   - Hai nút hành động chia 50/50 (Vào học ngay vàng + Điểm danh xanh)
   - Nút điểm danh không co lại thành tròn vàng khi đã điểm danh
   - Bảng xếp hạng cá nhân chỉ giữ top 3 với row vàng / cam / cam đậm
   - Tinh chỉnh nhiệm vụ "Cần làm / Đã xong" cho khớp screenshot
   Nạp SAU editorial-apiary.css để đảm bảo override đúng thứ tự.
   ========================================================================== */

/* ---------- 1) Hai nút hành động chia 50/50 ---------- */
body.home-page .class-showcase-card__actions,
body.home-page .class-showcase-card__actions.is-attendance-completed,
body.home-page .class-showcase-card__actions.has-homework,
body.home-page .class-showcase-card__actions:has(.class-showcase-card__homework),
body.home-page .class-showcase-card__actions.has-homework.is-attendance-completed,
body.home-page .class-showcase-card__actions.is-attendance-completed:has(.class-showcase-card__homework) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.9rem;
}

/* Khi có thêm card nộp bài tập (homework slot), giữ 3 cột bằng nhau */
body.home-page .class-showcase-card__actions.has-homework,
body.home-page .class-showcase-card__actions:has(.class-showcase-card__homework),
body.home-page .class-showcase-card__actions.has-homework.is-attendance-completed,
body.home-page .class-showcase-card__actions.is-attendance-completed:has(.class-showcase-card__homework) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

/* ---------- 2) Nút Điểm danh xanh full-width ---------- */
body.home-page .class-showcase-card__attendance-btn {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 3.35rem;
    padding: 0.9rem 1rem;
    border-radius: 1.15rem !important;
    border: 0 !important;
    background: linear-gradient(135deg, #2a8a5b 0%, #1a6c44 100%) !important;
    color: #ffffff !important;
    font-size: 0.96rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    box-shadow: 0 14px 26px rgba(20, 93, 58, 0.28) !important;
}

body.home-page .class-showcase-card__attendance-btn:hover,
body.home-page .class-showcase-card__attendance-btn:focus-visible {
    background: linear-gradient(135deg, #309c66 0%, #1d7a4d 100%) !important;
    transform: translateY(-2px);
}

/* Khi đã điểm danh: KHÔNG co lại thành nút tròn nhỏ — vẫn full-width nhưng đổi sang trạng thái "đã hoàn thành" nhạt */
body.home-page .class-showcase-card__actions.is-attendance-completed .class-showcase-card__attendance-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0.9rem 1rem !important;
    border-radius: 1.15rem !important;
    font-size: 0.96rem !important;
    color: #145d3a !important;
    background: linear-gradient(135deg, #cfe9d7 0%, #b4dcc1 100%) !important;
    border: 1px solid rgba(20, 93, 58, 0.16) !important;
    box-shadow: 0 6px 14px rgba(20, 93, 58, 0.12) !important;
    cursor: default;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Tick xác nhận khi đã điểm danh, giữ nút full-width thay vì co thành icon. */
body.home-page .class-showcase-card__actions.is-attendance-completed .class-showcase-card__attendance-btn::before,
body.home-page .class-showcase-card__actions.is-attendance-completed .class-showcase-card__attendance-btn.is-completed::before {
    content: "\2713" !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.15rem;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    background: #2a8a5b;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
}

/* Đảm bảo nút "Vào học ngay" vẫn vàng nổi bật */
body.home-page .class-showcase-card__button.class-learn-now-link {
    background: linear-gradient(135deg, #ffdd42 0%, #ffc800 100%);
    color: #131313;
    box-shadow: 0 14px 26px rgba(255, 200, 0, 0.28);
}

/* ---------- 3) Bảng xếp hạng cá nhân — chỉ giữ top 3 ---------- */
body.home-page .class-showcase-card__leaderboard-list {
    --leaderboard-visible-items: 3;
    overflow: hidden;
    gap: 0.6rem;
}

/* Ẩn các dòng từ thứ 4 trở đi */
body.home-page .class-showcase-card__leaderboard-item:nth-child(n + 4) {
    display: none !important;
}

/* Bỏ sticky / shadow cho top 3 — không còn cuộn nên không cần */
body.home-page .class-showcase-card__leaderboard-item:nth-child(1),
body.home-page .class-showcase-card__leaderboard-item:nth-child(2),
body.home-page .class-showcase-card__leaderboard-item:nth-child(3) {
    position: static;
    box-shadow: 0 4px 10px rgba(31, 40, 73, 0.08);
}

/* Row vàng (top 1) */
body.home-page .class-showcase-card__leaderboard-item:nth-child(1) {
    background: linear-gradient(135deg, #ffe27a 0%, #ffd141 100%) !important;
    border-color: rgba(212, 154, 0, 0.32) !important;
    color: #3a2c00;
}

/* Row cam nhạt (top 2) */
body.home-page .class-showcase-card__leaderboard-item:nth-child(2) {
    background: linear-gradient(135deg, #ffc99a 0%, #ffae6b 100%) !important;
    border-color: rgba(204, 110, 36, 0.28) !important;
    color: #3d2200;
}

/* Row cam đậm (top 3) */
body.home-page .class-showcase-card__leaderboard-item:nth-child(3) {
    background: linear-gradient(135deg, #ff9f5c 0%, #ff7a30 100%) !important;
    border-color: rgba(167, 70, 14, 0.32) !important;
    color: #fff8ef;
}

/* Số hạng cho top 3 — giữ vòng tròn trắng để dễ đọc */
body.home-page .class-showcase-card__leaderboard-item:nth-child(1) .class-showcase-card__leaderboard-rank,
body.home-page .class-showcase-card__leaderboard-item:nth-child(2) .class-showcase-card__leaderboard-rank,
body.home-page .class-showcase-card__leaderboard-item:nth-child(3) .class-showcase-card__leaderboard-rank {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    color: #131313;
}

/* Tên + điểm trong row top 3: chữ in đậm cho rõ */
body.home-page .class-showcase-card__leaderboard-item:nth-child(-n + 3) .class-showcase-card__leaderboard-name,
body.home-page .class-showcase-card__leaderboard-item:nth-child(-n + 3) .class-showcase-card__leaderboard-score {
    font-weight: 800;
}

/* ---------- 4) Tinh chỉnh khu Nhiệm vụ Cần làm / Đã xong ---------- */
/* 2 cột bằng nhau, khoảng cách thoáng hơn cho khớp ảnh 2 */
body.home-page .class-showcase-card__todo-layout {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Tiêu đề CẦN LÀM / ĐÃ XONG canh giữa, in hoa nhẹ kiểu screenshot */
body.home-page .class-showcase-card__todo .class-todo-home__group-head {
    justify-content: center;
    gap: 0.6rem;
    border-bottom: 1px dashed rgba(19, 19, 19, 0.08);
    padding-bottom: 0.55rem;
}

body.home-page .class-showcase-card__todo .class-todo-home__group-head h5 {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    font-size: 0.95rem;
}

/* Pill số đếm trắng viền nhạt, khớp screenshot */
body.home-page .class-showcase-card__todo .class-todo-home__group-count {
    background: #ffffff;
    border: 1px solid rgba(19, 19, 19, 0.08);
    color: #5a5a6a;
    font-weight: 700;
    padding: 0.12rem 0.6rem;
}

/* ---------- 5) Responsive — quay lại 1 cột trên màn nhỏ ---------- */
@media (max-width: 720px) {
    body.home-page .class-showcase-card__actions,
    body.home-page .class-showcase-card__actions.is-attendance-completed,
    body.home-page .class-showcase-card__actions.has-homework,
    body.home-page .class-showcase-card__actions:has(.class-showcase-card__homework),
    body.home-page .class-showcase-card__actions.has-homework.is-attendance-completed,
    body.home-page .class-showcase-card__actions.is-attendance-completed:has(.class-showcase-card__homework) {
        grid-template-columns: 1fr;
    }
    body.home-page .class-showcase-card__todo-layout {
        grid-template-columns: 1fr;
    }
}