:root{
  --pink:#f78db3;
  --pink-2:#f6a7c1;
  --radius:14px;
}

/* Cho phép click vào icon mắt khi dùng chung với UIkit */
.uk-form-icon.tb-toggle-pass { pointer-events: auto; z-index: 2; }
/* Tuỳ chọn: bo viền và bóng nhẹ cho giống ảnh mẫu */
.uk-card.uk-card-default { border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,.06); }

  .tb-toggle-pass{ cursor:pointer; user-select:none; }
  /* Mặc định input là password (ẩn): hiện eye-slash, ẩn eye */
  .tb-toggle-pass .eye { display:none; }
  .tb-toggle-pass .eye-off { display:inline-block; }
  /* Khi đang HIỆN mật khẩu (được JS thêm .is-on): đổi sang icon eye */
  .tb-toggle-pass.is-on .eye { display:inline-block; }
  .tb-toggle-pass.is-on .eye-off { display:none; }
/* Modal kích thước & ẩn an toàn */
.tb-auth-modal{display:none;}
.tb-auth-modal .uk-modal-dialog{max-width:560px !important}

/* Brand */
.tb-brand{display:flex;justify-content:center;gap:8px;font-weight:800;font-size:34px;margin:0 0 6px}
.tb-brand .word{background:linear-gradient(90deg,#ff2366,#ff9bd0);-webkit-background-clip:text;background-clip:text;color:transparent}
.tb-brand .word.b2{background:linear-gradient(90deg,#00a581,#4ad9ff);-webkit-background-clip:text;background-clip:text}
.tb-brand--image{display:flex;justify-content:center;margin:0 0 6px}
.tb-brand--image img{max-height:46px;width:auto;height:auto}

/* Titles */
.tb-title{text-align:center;margin:4px 0}
.tb-subtitle{text-align:center;color:#555;margin:6px 0 14px}

/* Tabs */
.tb-tabs{margin-bottom:10px}

/* Inputs & focus */
.tb-input{border-radius:10px}
.tb-input:focus{border-color:#ffc0da;box-shadow:0 0 0 4px #ffe7f2}




/* Helper, link & button */
.tb-helper{display:flex;justify-content:space-between;align-items:center;margin:8px 2px 12px}
.tb-link{color:#ff579b;text-decoration:none}
.tb-small{text-align:center;margin-top:12px}
.tb-btn{width:100%;border-radius:12px;padding:12px 16px;font-weight:700;background:linear-gradient(180deg,var(--pink),var(--pink-2));box-shadow:0 8px 24px rgba(255,87,155,.35)}

/* Fallback switcher (khi không dùng uk-switcher) */
.tb-panels .tb-panel{display:none}
.tb-panels .tb-panel.is-active{display:block}

/*
 * =================================================================
 * CSS TÙY CHỈNH CHO SLIDER TRUYỆN ĐANG ĐỌC / THEO DÕI
 * =================================================================
 */

/* 1. CSS CHO TIÊU ĐỀ TRUYỆN (CHO PHÉP 2 DÒNG) */

.gd-reading-card .gd-title a {
    font-size: 15px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 2.8em;
    line-height: 1.4em;
    font-weight: 700;
}

.uk-text-truncate{
  font-size: 11px !important;
}
/* 2. CSS CHO KHUNG ẢNH (KHI KHÔNG CÓ THUMBNAIL) */

/* * Đoạn mã PHP tôi cung cấp đã tự tạo ra một thẻ <div> với class "gd-cover"
 * khi không có ảnh. CSS dưới đây đảm bảo thẻ div đó có kích thước
 * và tỷ lệ giống hệt như ảnh thật.
 */

.gd-reading-card .gd-cover {
    width: 100%;
    /* Đây là thuộc tính quan trọng nhất để giữ các item đều nhau */
    aspect-ratio: 3 / 4;
    object-fit: cover; /* Đảm bảo ảnh bìa không bị méo */
    border-radius: 10px; /* Bo tròn góc như trong file gốc của bạn */
}