/*
Theme Name: KhoTangTriThuc19
Theme URI: https://nxbxaydung.com.vn/
Author: Your Name
Description: Theme WordPress giao diện giống NXB Xây Dựng
Version: 1.0
Text Domain: nxbxaydung-theme
 
    /* --- COLORS (Màu sắc) --- */
    :root {
    --color-primary: #2876e2; /* Điều chỉnh màu primary để phù hợp với gradient hero-banner */
    --color-primary-dark: #1864c7; /* Màu xanh sẫm hơn cho hover của nút chính */
    --color-primary-light: #178bb9; /* Một sắc thái xanh tím nhạt hơn từ gradient */
    --color-primary-lighter: #4559e8; /* Một sắc thái xanh tím nhạt nhất từ gradient */
    --color-white: #fff;
    --color-white-transparent-15: rgba(255,255,255,0.15); /* Màu trắng trong suốt cho nút phụ */
    --color-background-light: #f6f6f6; /* Màu nền tổng thể của body */
    --color-background-panel: #f4f6f8; /* Nền cho các khu vực như tabs */
    --color-background-card: #fdfdfd; /* Nền cho các card như sách, excerpt */
    --color-background-meta: #f9f9f9; /* Nền cho meta data */
    --color-background-button-light: #f0f0f0; /* Nền cho nút màu xám nhạt */
    --color-background-button-light-hover: #e0e0e0; /* Nền hover cho nút màu xám nhạt */
    --color-background-hover-light: #f5f5f5; /* Nền hover cho các mục menu/link */
    --color-text-dark: #222; /* Màu chữ cho input search */
    --color-text-default: #333; /* Màu chữ mặc định, đậm vừa */
    --color-text-medium: #444; /* Màu chữ cho tiêu đề phụ */
    --color-text-black: #000; /* Màu đen tuyền */
    --color-text-muted: #aaa; /* Màu chữ xám mờ */
    --color-text-disabled: #888; /* Màu chữ cho trạng thái disabled */
    --color-text-disabled-alt: #555; /* Màu chữ cho trạng thái disabled dạng text */
    --color-error: #d32f2f; /* Màu cho thông báo lỗi */
    --color-shadow-blue: rgba(40, 118, 226, 0.10); /* Màu bóng đổ từ hero-searchbar, giữ nguyên để thống nhất */
    --color-shadow-primary: rgba(40, 118, 226, 0.06); /* Màu bóng đổ cho nút chính, có thể điều chỉnh sau */
    --color-border-light: #e0e0e0; /* Viền xám nhạt */
    --color-border-medium: #ccc; /* Viền xám trung bình */
    --color-border-faint: #eee; /* Viền xám rất nhạt */
    --color-border-dark: #ddd; /* Viền xám đậm hơn */
    --color-tab-border: #d1d5db; /* Viền cho tab */
    --color-tab-hover-bg: #e9ecef; /* Nền hover cho tab */
    --color-tab-hover-border: #ced4da; /* Viền hover cho tab */
    --color-tab-hover-text: #0056b3; /* Chữ hover cho tab */
    --color-shelf-wood: #6C381B; /* Màu gỗ cho kệ sách trên mobile */
    /* --- FONTS (Phông chữ) --- */
    --font-family-base: Arial, Helvetica, sans-serif;
    --font-size-base: 16px;
    --font-size-lg: 1.5rem; /* Kích thước cho tiêu đề lớn như hotline */
    --font-size-md: 15px; /* Cho cart-btn, login-btn */    
    --font-weight-medium: 500; /* Cho hero-hotline */
    --font-weight-bold: 600; /* Cho các nút và tiêu đề chính */

    /* --- SPACING (Khoảng cách) --- */
    --header-padding-x: 20px; /* Padding ngang cho header */
    --hero-bottom-height: 40px; /* Chiều cao của dải dưới hero banner */
    --banner-img-min-height: 220px; /* Chiều cao tối thiểu cho ảnh banner phụ */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 14px; /* Khoảng cách cho gap hero-actions */
    --spacing-lg: 24px; /* Cho padding left của searchbar */
    --spacing-xl: 72px; /* Cho padding-top của body, bằng chiều cao của hero-header-row */
    --spacing-section-default: 2px; /* Mới: Khoảng cách mặc định giữa các section */
    --spacing-tab: 18px; /* Mới: Cho margin-top của hero-tabs */
    --border-radius-sm: 7px; /* Bo góc nhỏ, ví dụ cho ảnh banner */
    --hero-wave-height: 20px; /* Mới: Chiều cao của hero-wave */

    /* --- BORDER RADIUS (Bo tròn góc) --- */
    --border-radius-base: 18px; /* Chung cho nhiều nút */
    --border-radius-pill: 38px; /* Cho hero-searchbar */
    --border-radius-input: 20px; /* Cho input trong searchbar */
    --border-radius-circle: 50%; /* Cho btn-search */
    --border-radius-tab: 12px; /* Mới: Cho hero-tab */

    /* --- TRANSITIONS (Hiệu ứng chuyển đổi) --- */
    --transition-speed-normal: 0.2s;
    --transition-speed-slow: 0.25s; /* Mới: Cho hero-tab */
}
/* --- RESET CƠ BẢN TOÀN TRANG --- */
html {
    height: 100%; /* Cần thiết để body có thể chiếm 100% chiều cao */
}
html, body { /* Chọn tất cả các phần tử <html> và <body> trên trang */
    /* !important được dùng để ghi đè các style có độ ưu tiên cao từ WordPress core hoặc plugins. */
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw;
    /* min-width: 100vw; */ /* Removed as it can cause issues with horizontal scrolling on some mobile browsers if content exceeds viewport */
    /* max-width: 100vw; */ /* Removed for the same reason, width: 100% is generally safer */
    overflow-x: hidden;
    font-family: var(--font-family-base);
    background: var(--color-background-light);

}
body {
    /* --- Sticky Footer: Bắt đầu --- */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Đảm bảo body chiếm ít nhất toàn bộ chiều cao màn hình */
    padding-top: calc(var(--spacing-xl) + var(--hero-wave-height)) !important; /* Tổng chiều cao header và wave */
}

/* -------- HERO BANNER FULL-WIDTH ---------- */
.hero-banner {
    /* !important được dùng để đảm bảo header luôn cố định trên cùng, ghi đè các quy tắc khác. */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    z-index: 1000 !important;
    margin: 0 !important;
    box-sizing: border-box;
    background: linear-gradient(120deg, #2876e2FF 0%, #178bb9FF 80%, #4559e8FF 100%); /* Sử dụng mã hex 8 chữ số cho màu với alpha, FF để hoàn toàn mờ đục */  
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%; 
    padding-top: 2px !important; /* Sửa lỗi thiếu đơn vị và giữ !important nếu cần */
    min-height: auto; /* Để chiều cao được quyết định bởi nội dung bên trong, chủ yếu là .hero-header-row */
}

.hero-search-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 500px;
    margin: 0 auto;
    flex: 1;
}
.hero-searchbar {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 500px;
    flex: 1;
    background: var(--color-white);
    border-radius: var(--border-radius-pill);
    box-shadow: 0 6px 36px var(--color-shadow-blue);
    padding: 10px 18px 10px var(--spacing-lg);
    position: relative;
}

.hero-searchbar input[type="text"] {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    font-size: 16px;
    color: var(--color-text-dark);
    padding: 0 var(--spacing-sm);
    border-radius: var(--border-radius-input);
}

.btn-search {
    background: none;
    border: none;
    cursor: pointer;
    margin-right: 7px;
    padding: 3px 5px 0 5px;
    border-radius: var(--border-radius-circle);
    display: flex;
    align-items: center;
}

.btn-main {
    background: var(--color-primary-light);
    color: var(--color-white);
    border: none;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    padding: 7px 30px;
    border-radius: var(--border-radius-base);
    margin-left: var(--spacing-section-default);
    box-shadow: 0 1px 8px var(--color-shadow-primary);
    cursor: pointer;
    transition: background var(--transition-speed-normal);
     white-space: nowrap; /* Ngăn chữ "Tìm kiếm" xuống dòng trên mobile */
}  

.btn-main:hover {
    background: var(--color-primary-dark);
}

.cart-btn, .login-btn {
    font-size: var(--font-size-md);
    padding: 8px 20px;
    border-radius: var(--border-radius-base);
    font-weight: var(--font-weight-bold);
    border: 1.5px solid var(--color-white);
    background: var(--color-white-transparent-15);
    color: var(--color-white);
    cursor: pointer;
    transition: all var(--transition-speed-normal);
}

.cart-btn:hover, .login-btn:hover {
    background: var(--color-white);
    color: var(--color-primary);
}
.hero-bottom {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: var(--hero-bottom-height);
    z-index: 3;
    pointer-events: none;
}

.hero-header-row {
    position: relative;
    width: 100vw;
    /* height: var(--spacing-xl); */ /* Changed to min-height for better responsiveness */
    min-height: var(--spacing-xl); /* Sử dụng biến cho chiều cao header */
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 var(--header-padding-x);
}
.hero-hotline-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold); 
    color: var(--color-white);
    z-index: 2;
    flex-shrink: 0;
}

.hero-actions {
    display: flex;
    gap: var(--spacing-md);
    z-index: 2;
    flex-shrink: 1; /* Allow actions to shrink on smaller screens */
    flex-wrap: wrap; /* Allow action buttons to wrap to the next line if space is limited */
}
.banner img {
    width: 100%;
    border-radius: var(--border-radius-sm);
    min-height: var(--banner-img-min-height);
    object-fit: cover;
}
/* --- KHỐI SÁCH NỔI BẬT, DANH SÁCH SÁCH --- */


.container {
    max-width: 1200px; /* Giới hạn chiều rộng tối đa của container */
    margin: 20px auto; /* Căn giữa container */
    padding: 0 15px; /* Padding ngang */
}

/* --- KỆ SÁCH TỔNG THỂ --- */

.bookshelf-section {
    background-color: var(--color-background-panel); /* Nền giống khung 2 để tạo cảm giác full-width */
    padding: var(--spacing-section-default) 0; /* Thêm padding trên dưới giống khung 2 */
    margin-top: var(--spacing-section-default);
    margin-bottom: var(--spacing-section-default);
    box-shadow: none; /* Loại bỏ đổ bóng */
}
/* --- MỖI HÀNG KỆ --- */
.shelf-row {
    display: flex;
    justify-content: center; /* Căn giữa các cuốn sách trên mỗi kệ */
    align-items: flex-end; /* Căn sách xuống đáy kệ */
    flex-wrap: wrap; /* Cho phép sách xuống hàng nếu không đủ chỗ */
    padding: 20px 15px; /* Padding cho mỗi hàng kệ */
    /* height: 250px; */ /* Chiều cao cố định cho mỗi hàng kệ - Removed, use min-height or auto */
    min-height: 250px; /* Use min-height to allow content to expand */
    position: relative; /* Để tạo đường phân chia giữa các kệ */
    background: var(--color-background-card);
    border-bottom: 1px solid var(--color-border-light); /* Đường phân chia kệ mảnh hơn, màu xám nhạt */
}
.shelf-row:last-child {
    border-bottom: none; /* Kệ cuối cùng không có đường phân chia dưới */
}


/* --- MỖI CUỐN SÁCH --- */
.sach-item {
    width: 120px; /* Chiều rộng cố định của mỗi cuốn sách */
    flex-shrink: 0;
    background: var(--color-background-card); /* Nền trắng hơn cho bìa sách */
    border-radius: 4px; /* Bo tròn ít hơn cho sách */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Bóng đổ cho từng cuốn sách */
    padding: 5px; /* Giảm padding để sách trông gọn hơn */
    text-align: center;
    margin: 0 15px; /* Khoảng cách hai bên sách */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Hiệu ứng hover */
    cursor: pointer;
    display: flex; /* Dùng flex để căn giữa ảnh */
    flex-direction: column;
    justify-content: center; /* Căn giữa ảnh theo chiều dọc trong khung sách */
    align-items: center; /* Căn giữa ảnh theo chiều ngang trong khung sách */
    height: 170px; /* Chiều cao tổng thể của item sách, bằng chiều cao ảnh */
}

.sach-item:hover {
    transform: translateY(-5px); /* Nhấc sách lên một chút khi hover */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3); /* Bóng đổ đậm hơn khi hover */
}

.sach-item img {
    width: 100%;
    height: 170px; /* Chiều cao cố định của ảnh bìa */
    object-fit: cover;
    border-radius: 3px;
    background: #fff;
    display: block; /* Đảm bảo ảnh không có khoảng trống dưới cùng */
}

/* CHÂN TRANG */

.footer {
  background: #fff;
  color: #222;
  padding: 15px 0 0 0;  
  /* --- Sticky Footer: Kết thúc --- */
  margin-top: auto; /* Tự động đẩy footer xuống dưới cùng khi nội dung trang ngắn */
}

.footer-container {
  max-width: 1450px;
  margin: 0 auto;
  display: flex;
  gap: 38px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer-col {
  flex: 1 1 230px;
  min-width: 210px;
}

.footer-logo {
  width: 140px;
  margin-bottom: 18px;
}

.footer-col h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 16px 0;  
  border-bottom: 2px solid var(--color-border-faint);
  padding-bottom: 6px;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col ul li {
  margin-bottom: 9px;
  font-size: 15px;
}

.footer-bottom {
  text-align: center;
  padding: 20px 0 12px 0;
  background: #cfb37d;
  font-size: 15px;
  margin-top: 15px;
  border-radius: 0 0 6px 6px;
}

.hero-wave {
    position: fixed;
    left: 0;
    width: 100vw;
    height: var(--hero-wave-height); /* Sử dụng biến */
    z-index: 1001;
    pointer-events: none; /* Để không cản trở click */
}
body.admin-bar .hero-wave {
    top: calc(72px + 32px); /* Chiều cao banner (72px) + chiều cao admin bar (32px) */
}
body:not(.admin-bar) .hero-wave {
    top: 72px; /* Chiều cao banner */
}
/* --- TRANG CHI TIẾT SÁCH (SINGLE BOOK) --- */
.book-detail-page {
    max-width: 1100px;
    margin: var(--spacing-section-default) auto;
    padding: 20px;
}

.book-single-entry {
    background-color: #fff;
    padding: 25px;
    border: 1px solid var(--color-border-light);
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.book-header {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--color-border-faint);
    padding-bottom: 20px;
}

.book-title {
    font-size: 2.2rem;
    color: var(--color-primary-dark);
    font-weight: 600;
}

.book-content-wrapper {
    display: flex;
    gap: 30px; /* Khoảng cách giữa cột ảnh và cột chi tiết */
    margin-bottom: 30px;
}

.book-cover-column {
    flex: 0 0 300px; /* Cột ảnh bìa, không co giãn, rộng 300px */
}

.book-cover-image {
    width: 100%;
    height: auto;
    border: 1px solid var(--color-border-medium);;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 4px;
}

.book-details-column {
    flex: 1; /* Cột chi tiết sách, chiếm phần còn lại */
}

.book-meta {
    margin-bottom: 25px;
    padding: 15px; /* Padding cho khối meta */
    background-color: var(--color-background-meta);
    border-radius: 4px;    
}

.book-meta p {
    margin-bottom: 10px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.book-meta strong {
    min-width: 120px;
    display: inline-block;
    color: var(--color-text-default);
}

.book-price {
    font-size: 1.4rem !important;
    font-weight: bold; 
    color: var(--color-primary);
    margin-top: 15px;
}
.book-price strong {
    color: var(--color-text-default) !important;
}


.book-actions {
    margin-bottom: 25px;
    display: flex;
    gap: 15px;
    align-items: center;
}

.btn-buy-now, .btn-add-to-cart, .btn-read-sample, .btn-rent-book {
    padding: 10px 20px;
    border-radius: var(--border-radius-base);
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid transparent; /* Thêm border transparent để không bị nhảy layout khi hover */
}

.btn-buy-now {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.btn-buy-now:hover {
    background-color: var(--color-primary-dark);
}

.btn-add-to-cart {
    background-color: var(--color-background-button-light);
    color: var(--color-text-default);
    border: 1px solid var(--color-border-medium);
}
.btn-add-to-cart:hover {
    background-color: var(--color-background-button-light-hover);
}

.book-description {
    line-height: 1.7;    
}
.book-description h3 {
    margin-bottom: 10px;
    font-size: 1.2rem;    
    color: var(--color-text-medium);
    border-bottom: 1px solid var(--color-border-faint);
    padding-bottom: 5px;
}

.book-excerpt-acf {
    margin-top: 15px;
    padding: 15px;
    background-color: var(--color-background-card);
    border-left: 3px solid var(--color-primary-light);
}

.btn-read-sample {
    border: 1px solid var(--color-primary);
    background-color: var(--color-white);
    color: var(--color-primary);
}

.btn-read-sample:hover {
    background-color: var(--color-primary-light);
    color: var(--color-white);
    border-color: var(--color-primary-light);
}
/* --- MENU NGƯỜI DÙNG (USER DROPDOWN) --- */
.user-menu-container {
    position: relative;
    display: flex; /* Chuyển sang flexbox để căn chỉnh */
    align-items: center; /* Căn giữa các item theo chiều dọc */
    gap: 15px; /* Khoảng cách giữa nút và khối thông tin */
}

.user-greeting {
    cursor: pointer;    
    font-size: var(--font-size-md); /* Giống .cart-btn */
    font-weight: var(--font-weight-bold); /* Giống .cart-btn */
    color: var(--color-white); /* Đảm bảo màu chữ trắng */
    display: inline-flex; /* Giúp căn chỉnh mũi tên tốt hơn nếu cần */
    align-items: center;
}

.dropdown-arrow {
    margin-left: 5px;
    font-size: 0.8em;
}

.user-dropdown-menu {
    display: none; /* Mặc định ẩn */
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;    
    border: 1px solid var(--color-border-medium);
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
    min-width: 150px; /* Độ rộng tối thiểu cho menu */
}

.user-dropdown-menu a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: var(--color-text-default);
    white-space: nowrap; /* Ngăn text xuống dòng */
}

.user-dropdown-menu a:hover {
    background-color: var(--color-background-hover-light);
}

.user-menu-container.active .user-dropdown-menu {
    display: block;
}
.user-info-block {
    /* Khối này bao bọc "Xin chào" và "Nạp tiền" */
    text-align: left; /* Đảm bảo text căn trái */
}
.hero-hotline-title img {
    height: 100px; /* Hoặc kích thước mong muốn */
    width: auto; /* Để giữ tỷ lệ khung hình */
    display: block; /* Hoặc inline-block tùy theo layout */
}
.user-greeting-link {
    text-decoration: none; /* Bỏ gạch chân mặc định của link */
}
.user-greeting-link:hover .user-greeting {
    text-decoration: underline; /* Thêm gạch chân khi hover để người dùng biết có thể click */
}
/* --- CSS cho Modal Nạp Tiền --- */
.nxb-modal {
  display: none; /* Ẩn theo mặc định, sẽ được đổi thành 'flex' bằng JS */
  z-index: 1050; /* Đảm bảo modal nằm trên hero-banner (1000) và hero-wave (1001) */
  position: fixed; /* Vị trí cố định so với viewport */  
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Cho phép cuộn nếu nội dung dài */
  background-color: rgba(0,0,0,0.6); /* Lớp phủ màu đen mờ */ 
  align-items: center;
  justify-content: center;
}

.nxb-modal-content {
  background-color: #fff;
  margin: auto; /* Căn giữa cho trình duyệt cũ, flex đã xử lý */
  padding: 25px 30px;  
  border: 1px solid var(--color-border-dark);
  width: 90%;
  max-width: 550px; /* Giới hạn chiều rộng tối đa */
  border-radius: 8px;
  position: relative;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  animation: nxb-modal-appear 0.3s ease-out;
}

@keyframes nxb-modal-appear {
  from {transform: scale(0.9); opacity: 0;}
  to {transform: scale(1); opacity: 1;}
}
.user-wallet-separator {
    color: var(--color-white); /* Màu trắng cho dấu phân cách */
    opacity: 0.7;
}
.nxb-modal-close {
  color: #aaa;
  position: absolute; /* Đặt nút X ở góc */
  top: 10px;
  right: 15px;
  font-size: 28px;
  font-weight: bold; /* Chữ đậm cho nút đóng */
  cursor: pointer;
  line-height: 1;
}

button.nxb-modal-close {
    position: static; /* Reset position */
    float: none;
    font-size: 1rem;
    font-weight: normal;
    color: var(--color-text-default);
    background-color: var(--color-background-button-light);
    border: 1px solid var(--color-border-medium);
}
button.nxb-modal-close:hover {
    background-color: var(--color-background-button-light-hover);
    color: var(--color-text-black);
}

.nxb-modal-close:hover,
.nxb-modal-close:focus {
  color: #000;
  text-decoration: none;
}

.nxb-modal-content h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.5em;
  color: var(--color-text-default);
}

.nxb-modal-body {
  margin-bottom: 20px;
  line-height: 1.6;
}
.nxb-modal-body label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}
.nxb-modal-body input[type="number"] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-border-medium);
    border-radius: 4px;
    box-sizing: border-box; /* Quan trọng để padding không làm tăng kích thước */
    margin-bottom: 15px;
}
.nxb-modal-body ul {
    list-style-position: inside;
    padding-left: 0;
}
.nxb-modal-body ul li {
    margin-bottom: 5px;
}

.nxb-modal-footer {
  margin-top: 25px;
  text-align: right;
  border-top: 1px solid var(--color-border-faint);
  padding-top: 15px;
}
.nxb-modal-footer .nxb-btn {
  margin-left: 10px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
}
.nxb-btn-primary {
  background-color: var(--color-primary); /* Sử dụng biến màu */
  color: white;
}
.nxb-btn-primary:hover {
  background-color: var(--color-primary-dark); /* Sử dụng biến màu */
}

.user-wallet-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px; /* Điều chỉnh khoảng cách với dòng "Xin chào" phía trên */
}
.naptien-link {
    text-decoration: underline;
    color: var(--color-white); /* Đổi sang màu trắng */
    cursor: pointer; /* Con trỏ dạng pointer */
    font-weight: bold;
}
.naptien-link:hover {
    color: var(--color-white); /* Giữ màu trắng khi hover, hoặc một màu sáng khác */
}
.user-current-balance {
    font-size: 0.9em;
    color: var(--color-white); /* Đổi sang màu trắng */
}
/* --- KHUNG TABS DỌC 2 CỘT --- */
.vertical-tabs-section {
  padding-top: var(--spacing-section-default);
  padding-bottom: var(--spacing-section-default);
  background-color: var(--color-background-panel);  
  margin-top: var(--spacing-section-default);
}

.vertical-tabs-layout-container {
  display: flex;
  gap: 25px;
}

.tabs-navigation-column {
  flex: 0 0 240px;
}
.hero-tabs-vertical {
  display: flex;
  flex-direction: column; /* Quan trọng: Sắp xếp các tab theo chiều dọc */
  align-items: stretch;   /* Giúp các tab chiếm hết chiều rộng của .tabs-navigation-column */
}
.hero-tab-vertical {
  padding: 12px 18px;
  margin-bottom: 8px; /* Khoảng cách giữa các tab */
  text-decoration: none;
  color: var(--color-text-default); /* Màu chữ mặc định */
  background-color: var(--color-white); /* Nền trắng */
  border: 1px solid var(--color-tab-border); /* Viền cho tab */
  border-radius: 6px; /* Bo góc mềm mại hơn */
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  text-align: left; /* Căn chữ về bên trái */
  cursor: pointer; /* Biểu thị có thể click */
  font-weight: 500;
}

.hero-tab-vertical:hover {
  background-color: var(--color-tab-hover-bg);
  border-color: var(--color-tab-hover-border);
  color: var(--color-tab-hover-text);
}

.hero-tab-vertical.active {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  font-weight: bold;
}

.tabs-content-area-column {
  flex: 1; /* Cột nội dung chiếm phần không gian còn lại */
  background-color: var(--color-white); 
  padding: 25px;  
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
  min-height: 350px; /* Chiều cao tối thiểu để khung không bị xẹp khi ít nội dung */
}

.tab-pane {
  display: none; /* Mặc định ẩn tất cả nội dung tab */
}

.tab-pane.active {
  display: block; /* Chỉ hiển thị nội dung của tab đang active */
  animation: fadeInTab 0.5s ease-in-out; /* Hiệu ứng xuất hiện nhẹ nhàng */
}

@keyframes fadeInTab {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
#deposit-error {
    color: #d32f2f;
    font-size: 0.9em;
    margin-top: 5px;
    display: none;
}

#payment-qr-code {
    display: block;
    margin: 10px auto;
    max-width: 200px;
    height: auto;
}

/* --- CSS cho Tiêu đề bên trong Cột Nội dung Tab (Khung 2) --- */
.tabs-content-area-column .tab-pane h4 {
    font-size: 1.2rem;
    color: var(--color-primary-dark);
    background-color: transparent;
    margin-top: 0;
    margin-bottom: 20px;
    padding: 0 0 10px 15px;
    font-weight: bold;
    border-bottom: 2px solid var(--color-primary-light);
    text-align: left;
}

/* --- CSS cho các nút trigger sản phẩm (Gutenberg) --- */
/* Container chung cho các nhóm nút */
.tabs-content-area-column .wp-block-buttons,
.tabs-content-area-column .product-trigger-buttons-wrapper {
    flex-wrap: wrap;    
    gap: var(--spacing-sm); /* Sử dụng biến cho khoảng cách */
    justify-content: flex-start; /* Căn các nút về bên trái */
    display: flex;
    /* Biến cục bộ để tính toán flex-basis, mặc định là 3 cột */
    --product-trigger-basis: calc((100% - 2 * var(--spacing-sm)) / 3);
}

/* Modifier class cho layout 5 cột (áp dụng cho khối Buttons trong Gutenberg) */
.tabs-content-area-column .wp-block-buttons.is-5-columns,
.tabs-content-area-column .product-trigger-buttons-wrapper.is-5-columns {
    --product-trigger-basis: calc((100% - 4 * var(--spacing-sm)) / 5); /* Tính toán lại cho 5 cột */
}

/* Item chung cho mỗi nút (áp dụng cho cả 2 cấu trúc HTML) */
.tabs-content-area-column .wp-block-buttons .wp-block-button,
.tabs-content-area-column .product-trigger-buttons-wrapper > .load-products-trigger {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: var(--product-trigger-basis); /* Áp dụng flex-basis từ biến */    
    min-width: 120px;
}

/* Ghi đè margin mặc định của Gutenberg */
.tabs-content-area-column .wp-block-buttons .wp-block-button {
    margin: 0 !important; /* Ghi đè margin mặc định của Gutenberg cho .wp-block-button */
}
/* Kiểu dáng cho phần tử có thể click (<a> hoặc <button>) */
.tabs-content-area-column .product-trigger-buttons-wrapper > .load-products-trigger {
    display: block; /* Đảm bảo link chiếm toàn bộ không gian của .wp-block-button */
    width: 100%;
    box-sizing: border-box;    
    padding: 10px 15px;
    font-size: 0.9em; /* Kích thước chữ có thể điều chỉnh */
    font-weight: 500; /* Giống .hero-tab-vertical */    
    color: var(--color-text-default);
    background-color: var(--color-white);
    border: 1px solid var(--color-tab-border);
    border-radius: 6px; /* Giống .hero-tab-vertical */
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    text-align: center;
    line-height: 1.4; /* Line-height cho nút */
}

.tabs-content-area-column .load-products-trigger:hover {
    background-color: #e9ecef; /* Giống .hero-tab-vertical:hover */
    color: #0056b3; /* Giống .hero-tab-vertical:hover */
    border-color: #ced4da; /* Giống .hero-tab-vertical:hover */
}
.tabs-content-area-column .load-products-trigger.active-product-filter {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    font-weight: bold;
}

.tabs-content-area-column .wp-block-button.is-style-outline .wp-block-button__link.load-products-trigger {
    background-color: var(--color-white); /* Đảm bảo nền không trong suốt */
    color: var(--color-text-default);
    border: 1px solid var(--color-tab-border);
}
.tabs-content-area-column .wp-block-button.is-style-outline .wp-block-button__link.load-products-trigger:hover {
    background-color: var(--color-tab-hover-bg);
    color: var(--color-tab-hover-text);
    border-color: var(--color-tab-hover-border);
}

.bookshelf .ajax-loaded-title { /* Selector cụ thể hơn cho tiêu đề BÊN TRONG .bookshelf */
    font-size: 1.2rem; /* Kích thước chữ lớn hơn một chút */
    color: var(--color-primary-dark);
    margin-bottom: 20px; /* Khoảng cách với danh sách sản phẩm */
    padding-bottom: 10px;
    padding-left: 15px; /* Thêm khoảng cách với rìa trái, bạn có thể điều chỉnh giá trị 15px này */
    border-bottom: 2px solid var(--color-primary-light);
    text-align: left; /* Chuyển tiêu đề sang trái */
}
.bookshelf {
    display: flex;
    flex-direction: column; /* Xếp các kệ theo chiều dọc */
    background-color: var(--color-white); /* Nền trắng */    
    border: 1px solid var(--color-border-medium); /* Viền xám đậm hơn một chút */
    border-radius: 10px;
    overflow: hidden; /* Đảm bảo các góc bo tròn */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Bóng đổ lớn hơn cho toàn bộ kệ sách */
}
.btn-rent-book {
    background-color: #f0ad4e; /* Màu vàng cam */
    color: var(--color-white);
}
/* --- CSS cho Modal Chi Tiết Sách --- */
.book-detail-modal-content {
  max-width: 800px;
}

.book-modal-header {
  text-align: center;
  margin-bottom: 20px;  
  border-bottom: 1px solid var(--color-border-faint);
  padding-bottom: 15px;
}

.book-modal-header h2 {
  font-size: 1.8rem;
  color: var(--color-primary-dark);
  margin: 0;
}

.book-modal-body-container {
  display: flex;
  gap: 25px;
}

.book-modal-cover-column {
  flex: 0 0 250px; /* Điều chỉnh chiều rộng cột ảnh bìa */
}

.book-modal-cover-column img {
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border-dark);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border-radius: 4px;
}

.book-modal-details-column {
  flex: 1;
}

.book-modal-meta p {
  margin-bottom: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
}
.book-modal-meta strong {
  min-width: 100px; /* Điều chỉnh nếu cần */
  display: inline-block;
}
.book-modal-price {
  font-size: 1.2rem !important;
  font-weight: bold;
  color: var(--color-primary);
  margin-top: 10px;
}
.book-modal-price strong {
    color: var(--color-text-default) !important;
}

.book-modal-actions {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap; /* Cho phép nút xuống hàng nếu không đủ chỗ */
}

.book-modal-actions .btn-read-sample,
.book-modal-actions .btn-buy-now,
.book-modal-actions .btn-rent-book {
    padding: 8px 15px; /* Điều chỉnh padding cho modal */
    font-size: 0.9rem;
}


.book-modal-summary {
  line-height: 1.6;
  font-size: 0.9rem;
}
.book-modal-summary h3 {
  margin-bottom: 8px;
  font-size: 1.1rem;
  color: var(--color-text-medium);
}
.book-modal-summary .book-excerpt-acf {
    font-size: 0.85rem;
    padding: 10px;
}

.product-info-ajax h5 {
    text-align: center;
}

.front-page-book-title {
    text-align: center;
    font-size: 0.9em;
    color: var(--color-text-default);
    margin-top: 8px;
    padding: 0 5px;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.btn-read-sample.disabled {
    background-color: var(--color-background-button-light);
    color: var(--color-text-disabled);
    cursor: default; /* Con trỏ chuột mặc định, không phải pointer */
    /* pointer-events: none; */ /* Nếu muốn hoàn toàn vô hiệu hóa sự kiện chuột, nhưng JS đã xử lý việc này */
    text-decoration: none;
}

.btn-read-sample.disabled.text-like {
    background: none !important; /* !important để ghi đè */
    border: none !important; /* !important để ghi đè */
    padding-left: 0;
    padding-right: 0;
    color: var(--color-text-disabled-alt);
    cursor: default;
}

/* --- TRANG TÀI KHOẢN CỦA TÔI (WOOCOMMERCE) --- */
.woocommerce-account .woocommerce {
        display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Khoảng cách giữa 2 cột */
    max-width: 1200px;
    margin: 40px auto;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 0 0 250px;    
    background-color: #fff;
    border: 1px solid var(--color-border-light);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-radius: 8px;
    padding: 10px 0; /* Padding trên dưới, không có padding ngang */
    margin: 0;
    align-self: flex-start; /* Giữ cho menu ở trên cùng */
}

.woocommerce-account .woocommerce-MyAccount-content {
    flex: 1 1 auto;    
    min-width: 0;
    background-color: #fff;
    border: 1px solid var(--color-border-light);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-radius: 8px;
    padding: 25px 30px;
    margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid var(--color-border-faint);
    margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 12px 20px;
    text-decoration: none;    
    color: var(--color-text-default);
    font-weight: 500;
    transition: all 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background-color: var(--color-background-hover-light);
    color: var(--color-primary-dark);
    padding-left: 25px; /* Hiệu ứng thụt vào khi hover */
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: bold;
    box-shadow: inset 4px 0 0 var(--color-primary-dark); /* Thêm đường kẻ bên trái để nhấn mạnh */
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a:hover {
    background-color: var(--color-primary-dark);
    padding-left: 20px; /* Reset padding khi hover trên item active */
}
/* --- MEDIA QUERIES (RESPONSIVE) --- */

/* Lớn hơn 900px một chút */
@media (max-width: 900px) {
  .footer-container {
    flex-direction: column;
    gap: 20px;
    padding: 0 20px;
  }
  .footer-col { min-width: unset; }
}

/* Tablet */
@media (max-width: 768px) {
    /* Kệ sách */
    .shelf-row {
        padding: 15px 10px;
        /* height: 200px; */ /* Changed to min-height */
        min-height: 200px;       
        border-bottom: 1px solid var(--color-border-light); /* Viền dưới cho kệ */
    }
    .sach-item {
        width: 100px;
        height: 140px;
        margin: 0 10px;
        padding: 4px;
    }
    .sach-item img {
        height: 140px;
    }

    /* Trang chi tiết sách */
    .book-content-wrapper {
        flex-direction: column;
    }
    .book-cover-column {
        flex: 0 0 auto;
        max-width: 300px;
        margin: 0 auto 20px auto;
    }

    /* Modal chi tiết sách */
    .book-detail-modal-content {
        max-width: 90%;
    }
    .book-modal-body-container {
        flex-direction: column;
    }
    .book-modal-cover-column {
        flex: 0 0 auto;
        max-width: 200px;
        margin: 0 auto 15px auto;
    }

    /* Trang tài khoản WooCommerce */
    .woocommerce-account .woocommerce {
        flex-direction: column; /* Xếp 2 cột chồng lên nhau */
        gap: 20px;
        margin: 20px auto;
    }
    /* Adjust hero-wave top position for tablet */
    body.admin-bar .hero-wave {
        top: calc(165px + 32px); /* Header height (estimated 165px) + admin bar (32px) */
    }
    /* Allow hero-header-row height to be determined by content on tablet */
    .hero-header-row {
        min-height: auto;
    }
    /* Header adjustments for Tablet */
    .hero-header-row {
        flex-wrap: wrap; /* Allow main header elements to wrap */
        justify-content: center; /* Center elements when wrapped */
        padding: 0 15px; /* Adjust padding for tablet */
    }

    .hero-hotline-title {
        flex-basis: 100%; /* Logo takes full width */
        text-align: center; /* Center the logo */
        margin-bottom: 10px; /* Space below logo */
        font-size: 1.3rem; /* Slightly smaller font for hotline on tablet */
    }
    .hero-hotline-title img {
        max-height: 50px; /* Limit logo height on tablet */
        width: auto;
    }

    .hero-search-wrap {
        flex-basis: 100%; /* Search bar takes full width */
        max-width: 100%; /* Ensure it doesn't exceed 100% */
        margin-bottom: 10px; /* Space below search bar */
    }

    .hero-actions {
        flex-basis: 100%; /* Actions take full width */
        justify-content: center; /* Center action buttons */
        gap: var(--spacing-sm); /* Slightly smaller gap for actions */
        margin-bottom: 10px; /* Space below actions */
    }
    /* Vertical Tabs */
    .vertical-tabs-layout-container {
        flex-direction: column; /* Stack tabs and content */
    }
    .tabs-navigation-column {
        flex: 0 0 auto; /* Remove fixed width */
        width: 100%; /* Take full width */
    }
    .hero-tabs-vertical {
        flex-direction: row; /* Make tabs horizontal for better use of space */
        flex-wrap: wrap;
        justify-content: center; /* Center tabs */
        gap: 8px; /* Add gap between horizontal tabs */
    }
    .hero-tab-vertical {
        flex: 1 1 auto; /* Allow tabs to grow/shrink */
        max-width: 48%; /* Two columns for tabs */
        margin-bottom: 0; /* Remove vertical margin */
        text-align: center; /* Center text in horizontal tabs */
    }
    .tabs-content-area-column {
        padding: 15px; /* Reduce padding for content area */
    }
    .tabs-content-area-column .tab-pane h4 {
        padding-left: 0; /* Remove left padding for title */
        text-align: center; /* Center title */
    }
    .bookshelf .ajax-loaded-title {
        padding-left: 0; /* Remove left padding for title */
        text-align: center; /* Center title */
    }
    /* Product trigger buttons - adjust for 2 columns on tablet */
    .tabs-content-area-column .wp-block-buttons,
    .tabs-content-area-column .product-trigger-buttons-wrapper {
        --product-trigger-basis: calc((100% - var(--spacing-sm)) / 2); /* 2 columns */
    }
    .tabs-content-area-column .wp-block-buttons.is-5-columns,
    .tabs-content-area-column .product-trigger-buttons-wrapper.is-5-columns {
        --product-trigger-basis: calc((100% - var(--spacing-sm)) / 2); /* Still 2 columns for 5-column layout on tablet */
    }
    /* Rented books list */
    .rented-book-item {
        flex-direction: column; /* Stack book cover and details */
        text-align: center;
    }
    .rented-book-cover {
        flex: 0 0 auto;
        max-width: 150px; /* Limit cover width when stacked */
        margin: 0 auto 10px auto; /* Center cover */
    }
    .rented-book-details h4 {
        font-size: 1.1rem; /* Slightly smaller title */
    }
    .rented-book-details p {
        font-size: 0.85rem; /* Slightly smaller text */
    }
    .btn-read-book {
        width: 100%; /* Full width button */
        box-sizing: border-box;
    }
}
/* Mobile */
@media (max-width: 480px) {
    /* General adjustments for smaller phones */
    body {        
        /* Adjust padding-top for body to accommodate wrapped header */
        /* Estimated header height: ~150px (logo+margin + search+margin + actions+margin) */
        padding-top: calc(150px + var(--hero-wave-height)) !important; /* Estimated 150px for header + 20px wave = 170px */
    }
    .hero-header-row {        
        /* Allow hero-header-row height to be determined by content on mobile */
        min-height: auto;
        /* The previous min-height was calc(var(--spacing-xl) * 0.7) which is 50.4px. */
        padding: 0 10px; /* Reduce horizontal padding */
    }
    .hero-hotline-title {
        font-size: 1.2rem; /* Smaller font for hotline */
    }
    .hero-actions {
        gap: var(--spacing-xs); /* Smaller gap for buttons */
        margin-bottom: 8px; /* Slightly less space below actions */
    }
    .hero-hotline-title img {
        max-height: 40px; /* Ensure logo doesn't make header too tall */
    }
    .hero-searchbar {
        padding: 8px 12px 8px var(--spacing-md); /* Adjust searchbar padding */
    }
    .hero-searchbar input[type="text"] {
        font-size: 14px; /* Smaller font for search input */
    }
    .btn-search {
        margin-right: 4px; /* Smaller margin for search button */
    }
    .shelf-row {
        padding: 10px 8px;
        min-height: 170px;
        border-bottom: 1px solid var(--color-border-light); /* Sửa: Làm đường kẻ mỏng và nhạt màu giống desktop */
    }
    .sach-item {
        width: 80px;
        height: 110px;
        margin: 0 8px;
        padding: 3px;
    }
    .sach-item img {
        height: 110px;
    }
    /* Product trigger buttons - adjust for 1 column on mobile */
    .tabs-content-area-column .wp-block-buttons,
    .tabs-content-area-column .product-trigger-buttons-wrapper {
        --product-trigger-basis: 100%; /* 1 column */
    }
    .tabs-content-area-column .wp-block-buttons.is-5-columns,
    .tabs-content-area-column .product-trigger-buttons-wrapper.is-5-columns {
        --product-trigger-basis: 100%; /* Still 1 column for 5-column layout on mobile */
    }
    .hero-tab-vertical {
        max-width: 100%; /* Full width for tabs on very small screens */
    }
    .book-modal-actions {
        flex-direction: column; /* Stack buttons in book modal */
        gap: 10px;
    }
    .book-modal-actions .btn-read-sample,
    .book-modal-actions .btn-buy-now,
    .book-modal-actions .btn-rent-book {
        width: 100%; /* Full width buttons */
        box-sizing: border-box;
    }
    
    .user-greeting, .naptien-link, .user-current-balance {
        font-size: 0.85rem; /* Match cart/login buttons for consistency */
    }
    /* Adjust hero-wave top position for mobile */
    body.admin-bar .hero-wave {
        top: calc(150px + 32px); /* Header height (150px) + admin bar (32px) */
    }
    body:not(.admin-bar) .hero-wave {
        top: 150px; /* Header height (150px) */
    }
    body:not(.admin-bar) .hero-wave {
        top: 165px; /* Header height (165px) */
    }
}

/* Modal trên màn hình rất nhỏ */
@media (max-width: 400px) {
    .nxb-modal-content {
        width: 95%;
        padding: 15px;
    }
    .nxb-modal-content h2 {
        font-size: 1.2rem;
    }
    
    .nxb-modal-footer {
        flex-direction: column; /* Stack modal buttons */
        gap: 10px;
    }
    .nxb-modal-footer .nxb-btn {
        margin-left: 0; /* Remove left margin */
        width: 100%; /* Full width buttons */
        box-sizing: border-box;
    }
}

/* --- TÙY CHỈNH GIAO DIỆN TRANG VÍ (TERAWALLET) --- */

/* Tiêu đề chính của trang "Ví của tôi" */
.woocommerce-MyAccount-content h3 {
    font-size: 1.5rem;
    color: var(--color-primary-dark);
    border-bottom: 2px solid var(--color-border-faint);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Khu vực hiển thị số dư */
.woo-wallet-balance-container {
    background-color: var(--color-background-panel);
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    font-size: 1.1rem;
}

.woo-wallet-balance-container .wallet-balance-amount {
    color: var(--color-primary);
    font-size: 1.3rem;
    font-weight: bold;
}

/* Các tab nhỏ bên trong trang ví (như "Wallet topup", "Giao dịch") */
.woo-wallet-transactions-container ul.subsubsub {
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.woo-wallet-transactions-container ul.subsubsub li a {
    text-decoration: none;
    color: var(--color-text-default);
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.woo-wallet-transactions-container ul.subsubsub li a:hover {
    background-color: var(--color-background-hover-light);
}

.woo-wallet-transactions-container ul.subsubsub li a.current {
    background-color: var(--color-primary-light);
    color: var(--color-white);
}

/* Bảng lịch sử giao dịch */
.woo-wallet-transactions-container table.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 0.95rem;
}

.woo-wallet-transactions-container table.shop_table th,
.woo-wallet-transactions-container table.shop_table td {
    border: 1px solid var(--color-border-light);
    padding: 12px;
    text-align: left;
}

.woo-wallet-transactions-container table.shop_table th {
    background-color: var(--color-background-panel);
    font-weight: bold;
}
/* --- TRANG SÁCH CỦA TÔI --- */
.rented-books-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.rented-book-item {
    display: flex;
    gap: 20px;
    padding: 15px;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background-color: var(--color-background-panel);
    align-items: center;
}

.rented-book-cover {
    flex: 0 0 100px; /* Chiều rộng cố định cho ảnh bìa */
}

.rented-book-cover img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

.rented-book-details {
    flex: 1;
}

.rented-book-details h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.2rem;
    color: var(--color-text-default);
}

.rented-book-details p {
    margin: 0 0 15px 0;
    font-size: 0.9rem;
}

.btn-read-book, .btn-read-book.disabled { display: inline-block; padding: 8px 18px; background-color: var(--color-primary); color: var(--color-white); text-decoration: none; border-radius: var(--border-radius-base); font-weight: bold; transition: background-color 0.2s ease; }
.btn-read-book:hover { background-color: var(--color-primary-dark); }
.btn-read-book.disabled { background-color: var(--color-background-button-light); color: var(--color-text-disabled); cursor: not-allowed; }

/* ==========================================================================
   CẢI THIỆN GIAO DIỆN MODAL
   ========================================================================== */

/* Lớp phủ nền cho modal */
.nxb-modal {
    background-color: rgba(0, 0, 0, 0.6); /* Làm nền tối hơn một chút để nổi bật modal */
}

/* Khung nội dung chính của modal */
.nxb-modal-content {
    background-color: #ffffff;
    margin: 10% auto; /* Giảm margin top để modal không bị đẩy xuống quá thấp */
    padding: 25px 30px; /* Tăng padding để nội dung thoáng hơn */
    border: 1px solid #ddd;
    width: 90%; /* Responsive trên mobile */
    max-width: 500px; /* Tăng chiều rộng tối đa cho modal */
    border-radius: 8px; /* Bo góc mềm mại hơn */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Thêm hiệu ứng đổ bóng */
    position: relative;
    animation: fadeInModal 0.3s ease-out; /* Thêm hiệu ứng xuất hiện */
}

/* Animation cho modal */
@keyframes fadeInModal {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tiêu đề modal */
.nxb-modal-content h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 24px; /* Tăng kích thước chữ tiêu đề */
    color: #333;
    text-align: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

/* Phần thân modal */
.nxb-modal-body {
    margin-bottom: 25px;
}

/* Nhãn (label) cho ô nhập liệu */
.nxb-modal-body label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
}

/* Ô nhập liệu số tiền */
#deposit-amount-input {
    width: 100%;
    padding: 12px 15px; /* Tăng padding cho ô input */
    font-size: 20px; /* Tăng kích thước chữ trong ô input */
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Quan trọng để padding không làm vỡ layout */
    text-align: center; /* Căn giữa số tiền */
}

#deposit-amount-input:focus {
    border-color: #0073aa; /* Màu của WordPress */
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
    outline: none;
}

/* Phần chân modal (chứa các nút) */
.nxb-modal-footer {
    display: flex; /* Sử dụng Flexbox để căn chỉnh nút */
    justify-content: flex-end; /* Đẩy các nút về phía bên phải */
    gap: 10px; /* Tạo khoảng cách giữa các nút */
    border-top: 1px solid #eee;
    padding-top: 20px;
}

/* Style chung cho các nút trong modal */
.nxb-modal-footer .nxb-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: background-color 0.2s, transform 0.1s;
}

/* Nút phụ (Quay lại, Đã hiểu) */
.nxb-modal-footer .nxb-btn-secondary {
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
}

.nxb-modal-footer .nxb-btn-secondary:hover {
    background-color: #e0e0e0;
}

/* Nút chính (Đồng ý, Tôi đã thanh toán) */
.nxb-modal-footer .nxb-btn-primary {
    background-color: #0073aa; /* Màu xanh dương đặc trưng của WordPress */
    color: white;
}

.nxb-modal-footer .nxb-btn-primary:hover {
    background-color: #005a87;
}

.nxb-modal-footer .nxb-btn:active {
    transform: translateY(1px); /* Hiệu ứng nhấn nút */
}

/* Cải thiện modal thông tin chuyển khoản */
#payment-info-modal .nxb-modal-content {
    max-width: 600px; /* Cho phép modal này rộng hơn một chút */
}

#payment-info-modal ul {
    list-style-type: none;
    padding-left: 0;
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 15px;
    background-color: #f9f9f9;
}

#payment-info-modal ul li {
    padding: 5px 0;
}