/*
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.1
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);
}

/* SỬA LỖI: Hợp nhất style cho nút giỏ hàng, đăng nhập và lời chào để đồng bộ giao diện */
.cart-btn, .login-btn, .user-greeting-toggle {
    font-size: 16px;
    padding: 10px 25px;
    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);
    display: inline-flex; /* Đảm bảo căn chỉnh nội dung bên trong nút */
    align-items: center;
}

.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-start; /* THAY ĐỔI: Căn các item lên trên cùng, để tiêu đề có không gian phát triển xuống dưới */
    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-col ul li a {
  color: inherit; /* Kế thừa màu chữ từ thẻ li */
  text-decoration: none;
  transition: color var(--transition-speed-normal);
}
.footer-col ul li a:hover {
  color: var(--color-primary); /* Đổi màu khi hover, sử dụng biến màu chính của bạn */
}

.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);
}
.btn-rent-book {
    background-color: #f0ad4e; /* Màu vàng cam */
    color: var(--color-white);
}
/* --- 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);
}

.dropdown-wallet-info {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border-faint);
    font-size: 0.9em;
    color: var(--color-text-medium);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.naptien-link-dropdown {
    color: var(--color-primary);
    font-weight: bold;
    text-decoration: none;
}
.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 */
}

/* --- CSS cho Modal Nạp Tiền --- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.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 */
}
/* --- CSS cho Modal Chi Tiết Sách --- */
.book-detail-modal-content {
  /* THAY ĐỔI: Áp dụng layout toàn màn hình giống PDF Viewer */
  width: 95%;
  max-width: 1400px;
  max-height: 95vh;
  background-color: var(--color-white); /* Thêm nền trắng cho modal */
  border-radius: 8px; /* Thêm bo góc cho đẹp */
  /* GIẢI PHÁP ĐÚNG: Layout block thông thường với max-height và thanh cuộn riêng. */
  overflow-y: auto; /* Thêm thanh cuộn cho TOÀN BỘ modal khi nội dung dài */
  padding: 0; /* Bỏ padding ngoài cùng để các phần tử con tự quản lý */
}

.book-detail-modal-content .book-modal-header {
  text-align: center;
  border-bottom: 1px solid var(--color-border-faint);
  padding: 20px 30px 15px 30px; /* THAY ĐỔI: Thêm padding */
  /* flex-shrink: 0; không còn cần thiết */
}

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

.book-detail-modal-content .book-modal-body-container {
  display: flex;
  gap: 25px;
  padding: 20px 30px 0 30px; /* Thêm padding cho khối body */
}

/* KHU VỰC NỘI DUNG CUỘN MỚI - Đã được xóa bỏ */


.book-detail-modal-content .book-modal-cover-column {
  /* THAY ĐỔI: Thu nhỏ ảnh bìa lại cho hợp lý hơn */
  flex: 0 0 150px; 
}

.book-detail-modal-content .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-detail-modal-content .book-modal-details-column {
  flex: 1;
  /* DỌN DẸP: Xóa các thuộc tính flex không còn cần thiết sau khi thay đổi cấu trúc HTML */
  /* display: flex; */
  /* flex-direction: column; */
}

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

.book-detail-modal-content .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-detail-modal-content .book-modal-actions .btn-read-sample,
.book-detail-modal-content .book-modal-actions .btn-buy-now,
.book-detail-modal-content .book-modal-actions .btn-rent-book {
    padding: 8px 15px; /* Điều chỉnh padding cho modal */
    font-size: 0.9rem;
}

/* CSS cho khu vực "Giới thiệu sách" mới */
.book-modal-introduction-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-faint);
    /* Thêm lại padding cho khu vực giới thiệu */
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 20px;
}
.book-modal-introduction-section h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.3rem;
    color: var(--color-text-medium);
}
.introduction-content-wrapper {
    line-height: 1.7;
    font-size: 0.95rem;
    padding-right: 15px; /* Tạo khoảng trống cho thanh cuộn, tránh nội dung bị che */
}

/* Tùy chỉnh thanh cuộn cho đẹp hơn (hoạt động trên Chrome, Safari, Edge) */
/* THAY ĐỔI: Áp dụng thanh cuộn cho toàn bộ modal content */
.book-detail-modal-content::-webkit-scrollbar {
    width: 8px;
}
.book-detail-modal-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.book-detail-modal-content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

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

.front-page-book-title {
    font-size: 0.9em;
    color: var(--color-text-default);
    margin-top: 8px;
    padding: 0 5px;
    line-height: 1.3;
    /* THAY ĐỔI: Đảm bảo tiêu đề có cùng chiều rộng với ảnh bìa và căn giữa text bên trong */
    width: 120px; /* Bằng với chiều rộng của .sach-item */
    text-align: center; /* Căn giữa text bên trong khối */
    word-wrap: break-word; /* Cho phép từ dài xuống dòng */
    overflow-wrap: break-word; /* Tương tự word-wrap */
    box-sizing: border-box; /* Đảm bảo padding không làm tăng kích thước */
}

/* --- SỬA LỖI: Cho phép tiêu đề sách dài tự động xuống dòng --- */
.sach-item-link {
    display: flex; /* Chuyển thành flexbox để quản lý nội dung bên trong */
    flex-direction: column; /* Sắp xếp ảnh và tiêu đề theo chiều dọc */
    align-items: center; /* THÊM MỚI: Căn giữa các phần tử con (ảnh và tiêu đề) theo chiều ngang */
    width: 120px; 
    margin: 0 15px; /* Giữ lại khoảng cách giữa các sách */
    text-decoration: none; /* Bỏ gạch chân mặc định của link */
}
.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-detail-modal-content .book-modal-body-container {
        flex-direction: column;
    }
    .book-detail-modal-content .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; /* HOÀN TÁC: Trở về padding ban đầu */
    }

    .hero-hotline-title {
        flex-basis: 100%; /* Logo takes full width */
        text-align: center; /* Center the logo */
        margin-bottom: 10px; /* HOÀN TÁC: Trở về margin ban đầu */
        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; /* HOÀN TÁC: Trở về margin ban đầu */
    }

    .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; /* HOÀN TÁC: Trở về margin ban đầu */
    }
    /* 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-detail-modal-content .book-modal-actions {
        flex-direction: column; /* Stack buttons in book modal */
        gap: 10px;
    }
    .book-detail-modal-content .book-modal-actions .btn-read-sample,
    .book-detail-modal-content .book-modal-actions .btn-buy-now,
    .book-detail-modal-content .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) */
    }
}

/* 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; }

/* --- TRANG SÁCH CỦA TÔI (Bản dịch đã hoàn thành) --- */
.completed-translations-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Khoảng cách giữa các mục */
}

.completed-translation-item {
    display: flex;
    justify-content: space-between; /* Căn tiêu đề và nút ra 2 bên */
    align-items: center;
    gap: 20px;
    padding: 15px;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    background-color: var(--color-background-panel);
}

.completed-translation-item h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--color-text-default);
    font-weight: 500;
}

/* ==========================================================================
   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;
}
/* --- CSS cho Trình xem PDF (Cải tiến) --- */
.pdf-viewer-modal .nxb-modal-content {
    width: 95%;
    max-width: 1400px;
    height: 95vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: #525659; /* Nền xám tối cho không gian xung quanh PDF */
    margin: auto; /* QUAN TRỌNG: Ghi đè margin từ .nxb-modal-content chung để căn giữa đúng */
    box-shadow: none; /* Ghi đè box-shadow chung của modal */
    border: none;
}

.pdf-viewer-modal .nxb-modal-close {
    color: #fff; /* Nút X màu trắng trên nền tối */
    opacity: 0.8;
    z-index: 10; /* Đảm bảo nút X nằm trên tiêu đề */
}
.pdf-viewer-modal .nxb-modal-close:hover {
    color: #fff;
    opacity: 1;
}

.pdf-viewer-modal h2#pdf-viewer-title {
    color: #fff; /* Tiêu đề màu trắng */
    background-color: rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding: 10px 20px;
    margin: 0;
    font-size: 1.2rem;
    text-align: left;
}

.pdf-viewer-modal .nxb-modal-body {
    flex-grow: 1; /* Cho phép body chiếm hết không gian còn lại */
    padding: 0; /* Bỏ padding để iframe chiếm toàn bộ không gian */
    overflow: hidden; /* Ẩn thanh cuộn của body, iframe sẽ tự xử lý */
}

/* Khung chứa iframe, giờ sẽ chiếm toàn bộ không gian body của modal */
.pdf-iframe-container {
    width: 100%;
    height: 100%;
    /* Các thuộc tính mô phỏng A4 đã được loại bỏ để tối đa hóa không gian xem */
    /* aspect-ratio, max-width, margin, background-color, box-shadow, position */
}

.pdf-iframe-container iframe {
    /* Bỏ position: absolute vì container cha không còn là relative nữa */
    width: 100%;
    height: 100%;
    border: none;
}

/* Responsive cho Tablet và Mobile */
@media (max-width: 768px) {
    .pdf-viewer-modal .nxb-modal-content {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        background-color: #fff; /* Trở lại nền trắng trên mobile */
    }
    .pdf-viewer-modal .nxb-modal-close {
        color: #aaa; /* Trở lại màu tối cho text */
    }
    .pdf-viewer-modal .nxb-modal-close:hover {
        color: #000;
    }
    .pdf-viewer-modal h2#pdf-viewer-title {
        color: #333;
        background-color: transparent;
        border-bottom: 1px solid #eee;
        text-align: center;
    }

    .pdf-viewer-modal .nxb-modal-body {
        padding: 0; /* Bỏ padding trên mobile */
    }

    .pdf-iframe-container {
        width: 100%;
        height: 100%;
        max-width: none;
        box-shadow: none;
        /* Bỏ aspect-ratio trên mobile để nó chiếm toàn bộ không gian */
        aspect-ratio: auto;
        position: static; /* Reset position */
    }

    .pdf-iframe-container iframe {
        position: static; /* Reset position */
        width: 100%;
        height: 100%;
    }
}

/* --- CSS CHO MODAL SÁCH NÓI (AUDIOBOOK) --- */
.audiobook-modal .nxb-modal-content {
    width: 90%;
    max-width: 1280px; /* Rộng hơn để chứa video và playlist */
    height: 80vh; /* Chiều cao lớn hơn */
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: #282828; /* Nền tối giống YouTube */
}

.audiobook-modal h2#audiobook-title {
    color: #fff;
    background-color: rgba(0,0,0,0.2);
    padding: 10px 20px;
    margin: 0;
    font-size: 1.2rem;
    text-align: left;
    flex-shrink: 0; /* Không cho tiêu đề co lại */
}

.audiobook-modal .nxb-modal-body {
    flex-grow: 1; /* Body chiếm hết không gian còn lại */
    padding: 0;
    overflow: hidden;
}

.audiobook-iframe-container,
.audiobook-iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* --- ACCESSIBILITY (Hỗ trợ tiếp cận) --- */
.skip-link {
	position: absolute;
	top: -100px; /* Ẩn liên kết ra khỏi màn hình */
	left: 0;
	background: var(--color-primary-dark);
	color: var(--color-white);
	padding: 10px 15px;
	z-index: 100000; /* Đảm bảo nó nổi lên trên tất cả */
	text-decoration: none;
	transition: top 0.3s ease;
}

.skip-link:focus {
	top: 0; /* Hiện liên kết khi được focus (bằng phím Tab) */
}

/* --- BLOG / ARCHIVE PAGES (index.php) --- */
.posts-list {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Khoảng cách giữa các bài viết */
}

.post-summary {
    background-color: var(--color-white);
    padding: 30px;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.post-summary .entry-title {
    margin-top: 0;
    font-size: 1.8rem;
}

.post-summary .entry-title a {
    text-decoration: none;
    color: var(--color-primary-dark);
    transition: color var(--transition-speed-normal);
}

.post-summary .entry-title a:hover {
    color: var(--color-primary);
}

.post-summary .post-thumbnail {
    margin: 20px 0;
}

.post-summary .post-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}

.post-summary .entry-summary {
    line-height: 1.7;
    color: var(--color-text-default);
}

/* Pagination Styles */
.pagination {
    margin-top: 40px;
    border-top: 1px solid var(--color-border-faint);
    padding-top: 30px;
}
.nav-links {
    display: flex;
    justify-content: center;
    gap: 8px;
}
.nav-links .page-numbers {
    display: inline-block;
    padding: 8px 15px;
    border: 1px solid var(--color-border-medium);
    border-radius: 4px;
    text-decoration: none;
    color: var(--color-text-default);
    transition: background-color 0.2s, color 0.2s;
}
.nav-links .page-numbers:hover {
    background-color: var(--color-background-hover-light);
    border-color: var(--color-border-dark);
}
.nav-links .page-numbers.current {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    font-weight: bold;
}

/* --- WOOCOMMERCE ARCHIVE PAGES (Shop, Category) --- */
.woocommerce-content-area {
    padding-top: 20px;
    padding-bottom: 20px;
}

.woocommerce-products-header {
    margin-bottom: 30px;
    padding: 20px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
}

.woocommerce-breadcrumb {
    font-size: 0.9rem;
    color: var(--color-text-medium);
    margin-bottom: 10px;
}

.woocommerce-breadcrumb a {
    color: var(--color-primary);
    text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
    text-decoration: underline;
}

.woocommerce-products-header__title {
    margin: 0;
    font-size: 2rem;
    color: var(--color-text-dark);
}

/* Căn chỉnh lại các sản phẩm cho đẹp hơn */
.woocommerce ul.products {
    margin: 0 -15px; /* Bù trừ padding của container */
}

/* --- SINGLE POST PAGE (single.php) --- */
.single-post-entry {
    background-color: var(--color-white);
    padding: 30px 40px;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.single-post-entry .entry-header {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border-faint);
}

.single-post-entry .entry-title {
    font-size: 2.5rem;
    color: var(--color-text-dark);
    margin-bottom: 10px;
}

.single-post-entry .entry-meta {
    font-size: 0.9rem;
    color: var(--color-text-medium);
}

.single-post-entry .entry-meta a {
    color: var(--color-primary);
    text-decoration: none;
}

.single-post-entry .entry-meta a:hover {
    text-decoration: underline;
}

.single-post-entry .entry-meta .byline,
.single-post-entry .entry-meta .posted-on {
    margin-right: 15px;
}

.single-post-entry .post-thumbnail {
    margin-bottom: 30px;
}

.single-post-entry .post-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}

.single-post-entry .entry-content {
    line-height: 1.8;
    font-size: 1.05rem;
}

.single-post-entry .entry-content h2,
.single-post-entry .entry-content h3,
.single-post-entry .entry-content h4 {
    color: var(--color-text-dark);
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}

.single-post-entry .entry-content p {
    margin-bottom: 1.2em;
}

.single-post-entry .entry-content a {
    color: var(--color-primary-dark);
}

.single-post-entry .entry-footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-faint);
    font-size: 0.9rem;
    color: var(--color-text-medium);
}

.single-post-entry .entry-footer .cat-links,
.single-post-entry .entry-footer .tags-links {
    display: block;
    margin-bottom: 10px;
}

.single-post-entry .entry-footer a {
    color: var(--color-primary);
    text-decoration: none;
}

.single-post-entry .entry-footer a:hover {
    text-decoration: underline;
}

/* --- CSS CHO KHUNG HOTLINE MỚI --- */
.header-hotline-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white-transparent-15); /* THAY ĐỔI: Nền trắng trong suốt */
    border: 1.5px solid var(--color-white); /* THÊM MỚI: Thêm viền trắng */
    border-radius: var(--border-radius-base); /* THAY ĐỔI: Bo góc giống nút đăng nhập */
    padding: 10px 25px; /* Padding cho hotline */
    /* SỬA LỖI: Cho phép hotline co giãn và xuống dòng trên mobile */
    flex-shrink: 1;
}

.header-hotline-box span {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-white); /* THAY ĐỔI: Chữ màu trắng */
}

/* --- ĐIỀU CHỈNH LẠI Ô TÌM KIẾM --- */
.hero-search-wrap {
    flex: 1; /* Cho phép ô tìm kiếm co giãn */
    min-width: 250px; /* Đặt chiều rộng tối thiểu */
}

/* --- RESPONSIVE CHO TABLET & MOBILE --- */
@media (max-width: 768px) {
    .header-hotline-box {
        flex-basis: 100%; /* Chiếm toàn bộ chiều rộng */
        margin-bottom: 10px; /* Tạo khoảng cách với các mục bên dưới */
        order: 1; /* Đưa hotline xuống dưới logo */
        order: 0; /* SỬA LỖI: Đưa logo lên đầu */
    }
    .hero-search-wrap {
        order: 2; /* Đưa ô tìm kiếm xuống dưới hotline */
    }
    .hero-actions {
        order: 3; /* Các nút tài khoản ở cuối cùng */
    }
}

/* --- CSS CHO NHÓM BÊN PHẢI (HOTLINE + TÀI KHOẢN) --- */
.header-right-group {
    display: flex;
    align-items: center;
    gap: 20px; /* Khoảng cách giữa hotline và nút tài khoản */
}

/* ==========================================================================
   TRANG PHÁT SÁCH NÓI (AUDIOBOOK PLAYER)
   ========================================================================== */

/* Khung nội dung chính, nằm trong .container */
.audiobook-content-wrapper {
    background-color: var(--color-background-panel);
    padding: 20px;
    margin-bottom: var(--spacing-section-default);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Header riêng của trang sách nói (nằm trong khung) */
.audiobook-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 20px 0; /* Bỏ padding ngang vì đã có ở wrapper */
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: 20px;
}
.audiobook-page-header h1 {
    font-size: 22px;
    margin: 0;
    color: var(--color-text-dark);
}
.audiobook-page-header .back-button {
    color: var(--color-text-default);
    text-decoration: none;
    padding: 8px 15px;
    background-color: #e4e6eb;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    font-weight: 600;
    transition: background-color 0.2s;
}
.audiobook-page-header .back-button:hover {
    background-color: #d8dbdf;
}

/* Layout chính (video và playlist) */
.audiobook-main-layout { /* Giờ đây là .vertical-tabs-layout-container */
    padding: 0; /* Bỏ padding vì đã có ở wrapper */
}

/* Cột phải: Video player (giống .tabs-content-area-column) */
.audiobook-main-layout .player-column {
    padding: 0; /* Bỏ padding mặc định của .tabs-content-area-column */
    background: none; /* Bỏ nền trắng mặc định */
    border: none; /* Bỏ viền mặc định */
    /* SỬA LỖI: Thay min-height bằng aspect-ratio để video responsive đúng trên mobile */
    aspect-ratio: 16 / 9;
}

.audiobook-main-layout .player-column .video-wrapper {
    /* Giữ nguyên tỷ lệ 16:9 nhưng đảm bảo nó nằm gọn trong cột */
    position: relative;
    width: 100%;
    padding-top: 0; /* Bỏ padding-top để dùng height 100% */
    height: 100%; /* Cho video chiếm toàn bộ chiều cao của cột cha */
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.video-wrapper {
    /* Quy tắc chung này không còn cần thiết cho trang sách nói, 
       nhưng giữ lại để không ảnh hưởng đến các khu vực khác nếu có.
       Các style cần thiết đã được hợp nhất vào quy tắc ở trên. */
    position: relative;
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Cột trái: Danh sách phát (giống .tabs-navigation-column) */
.audiobook-main-layout .playlist-column {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    padding: 15px;
    /* THAY ĐỔI: Chuyển thành flexbox để quản lý header và khu vực cuộn */
    display: flex;
    flex-direction: column;
    /* Chiều cao tối đa của toàn bộ cột danh sách phát */
    max-height: 450px; /* Giữ chiều cao đồng bộ với min-height của video */
}
.playlist-header {
    padding: 15px;
    border-bottom: 1px solid var(--color-border-faint);
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    margin-bottom: 10px;
    flex-shrink: 0; /* Không cho header co lại */
}
.playlist-items {
    flex-grow: 1; /* Cho phép container này chiếm hết không gian còn lại */
    overflow: hidden; /* Ẩn thanh cuộn của container này */
    overflow-y: auto; /* THÊM MỚI: Bật thanh cuộn dọc khi cần */
}

/* Container mới để cuộn và tạo khoảng cách */
.playlist-scroll-container {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Khoảng cách giữa các mục trong danh sách */
    overflow-y: auto; /* QUAN TRỌNG: Thêm thanh cuộn vào đây */
    height: 100%; /* Chiếm toàn bộ chiều cao của .playlist-items */
    padding-right: 5px; /* Tạo khoảng trống nhỏ cho thanh cuộn */
}

/* Ghi đè lại .hero-tab-vertical để nó không có margin-bottom */
.playlist-items .playlist-item.hero-tab-vertical {
    text-align: center; /* SỬA LỖI: Căn giữa text và cho phép text tự xuống dòng */
    white-space: normal; /* QUAN TRỌNG: Cho phép tiêu đề dài tự động xuống dòng */
    display: block; /* Đảm bảo mỗi mục là một khối riêng biệt */
    flex-shrink: 0; /* Ngăn các mục tự co lại khi text dài */
    margin-bottom: 0 !important; /* QUAN TRỌNG: Ghi đè margin mặc định, để 'gap' xử lý khoảng cách */
}

/* Điều chỉnh lại phần sách mới cho phù hợp */
.audiobook-new-books {
    margin-top: 30px; /* Khoảng cách với khối player ở trên */
    padding: 0; /* Bỏ padding vì đã có ở wrapper */
}

/* Thông báo lỗi */
.audiobook-error {
    text-align: center;
    padding: 50px 20px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
}

/* Responsive cho trang sách nói */
@media (max-width: 992px) {
    /* Ghi đè lại layout của trang chủ để phù hợp với trang sách nói */
    .audiobook-main-layout.vertical-tabs-layout-container {
        flex-direction: column;
    }
    .audiobook-main-layout .playlist-column {
        max-height: 300px; /* Giảm chiều cao danh sách phát trên mobile */
    }
    .audiobook-main-layout {
        flex-direction: column;
    }
    .playlist-column {
        max-height: 300px; /* Giảm chiều cao danh sách phát trên mobile */
    }
    /* SỬA LỖI: Đảm bảo video và playlist chiếm toàn bộ chiều rộng và căn giữa */
    .audiobook-main-layout .player-column,
    .audiobook-main-layout .playlist-column {
        width: 100%;
    }
    /* SỬA LỖI: Ghi đè lại quy tắc chung, buộc playlist phải luôn là cột dọc */
    .playlist-column .playlist-scroll-container {
        flex-direction: column !important;
    }
}