/* =================================================================
   SBM ALPHA PAGE STYLES (v10.0 - Clean & Optimized Architecture)
   ================================================================= */

/* =================================================================
   1. ROOT VARIABLES & GLOBAL OVERRIDES
   ================================================================= */
:root {
    --sbm-primary: #ef4444;       
    --sbm-primary-color: #ef4444; 
    --sbm-accent: #f59e0b;        
    --sbm-text-main: #1f2937;
    --sbm-text-secondary: #6b7280;
    --sbm-green: #4ea875;
}

/* ÉP FONT ROBOTO CHO MỌI THỨ (Trừ các icon) */
.sbmalpha-container,
.sbmalpha-container *:not(i):not([class*="icon-"]):not([class*="fa-"]):not(svg):not(path) {
    font-family: 'Roboto', sans-serif !important;
}

/* XÓA BỎ CHẾ ĐỘ IN HOA (UPPERCASE) MẶC ĐỊNH CỦA THEME */
.sbmalpha-container, .sbmalpha-container h1, .sbmalpha-container h2, 
.sbmalpha-container h3, .sbmalpha-container h4, .sbmalpha-container h5, 
.sbmalpha-container h6, .sbmalpha-container button, .sbmalpha-container .button,
.sbmalpha-container a, .sbmalpha-container span, .sbmalpha-container p,
.sbmalpha-container div, .sbmalpha-container .uppercase {
    text-transform: none !important;
}

/* Viết hoa chữ cái đầu (Capitalize) */
.sbmalpha-tab-btn, .sbm-quick-btn .title, .sbmalpha-action-btn,
.sbm-news-heading, .sbm-featured-toggle-btn {
    text-transform: capitalize !important; 
}
.sbm-quick-btn .badge { text-transform: uppercase !important; }

/* =================================================================
   2. HEADER, AUTH & SEARCH FORM
   ================================================================= */
#sbm-main-content-area {
    width: 100%; display: flex; flex-direction: column; align-items: center;
    transition: opacity 0.3s ease, max-height 0.5s ease;
}

.sbmalpha-container.is-searching #sbm-main-content-area {
    opacity: 0; pointer-events: none; max-height: 0; overflow: hidden; margin: 0; padding: 0;
}

/* LỜI CHÀO ĐỘNG (GREETING) */
.sbmalpha-greeting-wrapper { text-align: center; margin-bottom: 1.5rem; animation: sbmFadeInUp 0.8s ease-out forwards; }
.sbmalpha-greeting-text { font-size: 1.1rem; color: var(--sbm-text-secondary); margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.sbmalpha-greeting-name { font-weight: 600; color: var(--sbm-primary); }
.sbmalpha-action-hint { font-size: 0.9rem; color: var(--sbm-accent); font-weight: 500; cursor: pointer; transition: all 0.2s ease; }
.sbmalpha-action-hint:hover { opacity: 0.8; text-decoration: underline; }
.sbm-pulse-icon { display: inline-block; animation: sbmPulse 2s infinite; }

/* FIX LỖI LỆCH KÍNH LÚP TẬN GỐC */
#sbm-ajax-search-form {
    position: relative !important; display: flex !important; align-items: center !important;
    width: 100%; margin: 0 !important; padding: 0 !important;
}
#sbm-ajax-search-form .sbmalpha-search-input {
    width: 100% !important; margin: 0 !important; padding-right: 55px !important; 
}
#sbm-ajax-search-form .sbmalpha-search-button {
    position: absolute !important; right: 15px !important; top: 50% !important; transform: translateY(-50%) !important; 
    margin: 0 !important; padding: 0 !important; background: transparent !important;
    border: none !important; box-shadow: none !important; height: 100% !important; 
    display: flex !important; align-items: center !important; justify-content: center !important;
}
#sbm-ajax-search-form .sbmalpha-search-button svg { margin: 0 !important; display: block !important; color: var(--sbm-text-secondary); }

/* =================================================================
   3. BENTO GLASS GRID (Spatial Design) - V2 (FIXED LAYOUT)
   ================================================================= */
.sbm-bento-nav-grid {
    display: grid !important; 
    grid-template-columns: repeat(12, 1fr) !important; 
    gap: 1.5rem !important;
    width: 100% !important;
    max-width: 1000px !important;
    padding-top: 15px !important; 
    margin: -15px auto 3rem !important; 
    
    perspective: 1000px;
}

/* THIẾT KẾ KÍNH MỜ NGUYÊN KHỐI (Glassmorphism) */
.sbm-bento-item {
    text-decoration: none !important;
    position: relative;
    border-radius: 20px !important; /* Bo góc cong mềm mại kiểu Apple */
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(16px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    overflow: hidden !important;
    color: var(--sbm-text-main) !important;
    cursor: pointer !important;
}

/* Tương thích nền tối */
.sbmalpha-container.sbmalpha-bg-image .sbm-bento-item {
    background: rgba(255, 255, 255, 0.2) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.6) !important;
    color: #fff !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15) !important;
}

/* -------------------------------------------
   KÍCH THƯỚC VÀ BỐ CỤC BÊN TRONG TỪNG Ô
------------------------------------------- */

/* HÀNG 1: 3 Nút Chính (Nằm ngang: Icon Trái - Chữ Phải) */
.sbm-bento-item.primary-item {
    grid-column: span 4 !important; /* Chiếm 4/12 cột */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Canh lề trái */
    padding: 1.5rem 1.2rem !important;
    min-height: 110px !important;
}

/* HÀNG 2: 4 Nút Phụ (Nằm dọc: Icon Trên - Chữ Dưới) */
.sbm-bento-item.secondary-item {
    grid-column: span 3 !important; /* Chiếm 3/12 cột */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 1.2rem 1rem !important;
    min-height: 120px !important;
    height: 100% !important; /* [FIX QUAN TRỌNG] Ép các nút (đặc biệt là thẻ button) cao bằng nhau */
}

/* KIỂM SOÁT CHỮ: KHÔNG ĐỂ RỚT DÒNG VÔ DUYÊN */
.bento-text { 
    display: flex !important; 
    flex-direction: column !important; 
    text-align: left !important; 
    overflow: hidden !important;
}
.bento-title { 
    font-weight: 800 !important; 
    font-size: 1.1rem !important; 
    line-height: 1.3 !important; 
    white-space: nowrap !important; /* Ép chữ không được rớt dòng */
}
.bento-desc { 
    font-size: 0.85rem !important; 
    color: var(--sbm-text-secondary) !important; 
    margin-top: 4px !important; 
    opacity: 0.8 !important; 
    white-space: nowrap !important; 
}
.sbmalpha-container.sbmalpha-bg-image .bento-desc { color: rgba(255,255,255,0.8) !important; }

/* ICON CỦA NÚT CHÍNH */
.bento-icon { 
    font-size: 2.2rem !important; 
    margin-right: 15px !important; 
    flex-shrink: 0 !important; /* Không cho icon bị ép méo */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)) !important; 
    transition: transform 0.3s ease !important; 
}

/* ICON CỦA NÚT PHỤ */
.bento-icon-svg {
    width: 48px !important; 
    height: 48px !important; 
    border-radius: 50% !important;
    background: rgba(255,255,255,0.8) !important; /* Làm nền vòng tròn sáng hơn một chút */
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
    margin-bottom: 10px !important; 
    transition: transform 0.3s ease !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; /* Thêm bóng đổ cho icon nổi bật */
}
.bento-icon-svg svg { 
    width: 24px !important; 
    height: 24px !important; 
}
.sbmalpha-container.sbmalpha-bg-image .bento-icon-svg { 
    background: rgba(255,255,255,0.2) !important; 
    border: 1px solid rgba(255,255,255,0.4) !important;
}
.sbmalpha-container.sbmalpha-bg-image .bento-icon-svg svg {
    stroke: #ffffff !important; /* Ép tất cả nét vẽ thành màu trắng tinh */
    fill: none !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important; /* Thêm viền đen nhạt để tách khỏi nền */
}
.bento-badge {
    position: absolute !important; top: 12px !important; right: 12px !important; background: var(--sbm-primary) !important; color: white !important;
    font-size: 0.65rem !important; font-weight: 800 !important; padding: 3px 8px !important; border-radius: 6px !important;
    animation: sbmPulse 2s infinite !important; box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4) !important;
}

/* MICRO-INTERACTIONS (Hiệu ứng khi di chuột) */
.sbm-bento-nav-grid:hover .sbm-bento-item { opacity: 0.6 !important; transform: scale(0.98) !important; }
.sbm-bento-nav-grid .sbm-bento-item:hover {
    opacity: 1 !important;
    transform: translateY(-8px) scale(1.02) !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 0 20px rgba(255, 255, 255, 0.5) !important;
    z-index: 10 !important;
}
.sbmalpha-container.sbmalpha-bg-image .sbm-bento-nav-grid .sbm-bento-item:hover { background: rgba(255, 255, 255, 0.4) !important; }

.sbm-bento-item:hover .bento-icon { transform: scale(1.15) rotate(-5deg) !important; }
.sbm-bento-item:hover .fire-icon { animation: fireFlicker 0.5s infinite alternate !important; }
.sbm-bento-item:hover .shake-icon { animation: clockShake 0.4s ease-in-out infinite alternate !important; }
.sbm-bento-item:hover .bento-icon-svg { transform: scale(1.15) !important; background: #fff !important; }
.sbmalpha-container.sbmalpha-bg-image .sbm-bento-item:hover .bento-icon-svg { background: rgba(255,255,255,0.9) !important; }

@keyframes fireFlicker { 0% { transform: scale(1.1) skewY(-2deg); filter: drop-shadow(0 0 5px #ef4444); } 100% { transform: scale(1.2) skewY(2deg); filter: drop-shadow(0 0 15px #f59e0b); } }
@keyframes clockShake { 0% { transform: rotate(-10deg); } 100% { transform: rotate(10deg); } }

/* CAROUSEL KHỐI FEATURED */
.sbmalpha-featured-wrapper { position: relative; overflow: hidden; }
.sbm-story-progress-bar { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background-color: rgba(0, 0, 0, 0.05); z-index: 10; border-radius: 4px; overflow: hidden; }
.sbm-story-progress-fill { height: 100%; background-color: var(--sbm-primary); width: 0%; transition: width 0.1s linear; }
.sbm-story-nav { position: absolute; top: 0; bottom: 0; cursor: pointer; z-index: 5; }
.sbm-story-nav.prev { left: 0; width: 30%; }
.sbm-story-nav.next { right: 0; width: 70%; } 
#sbm-featured-content-display { padding-top: 24px !important; } /* Căn lề tránh đè progress bar */
.sbmalpha-featured-actions, .sbm-review-actions, .sbmalpha-quote-actions { position: relative; z-index: 20 !important; pointer-events: auto; }
.sbmalpha-featured-content { transition: opacity 0.4s ease, transform 0.4s ease; }
.sbmalpha-featured-content.is-animating { opacity: 0; transform: translateY(10px); }

/* =================================================================
   4. NEWS SECTION & CARDS
   ================================================================= */
.sbm-news-section {
    width: 100%; max-width: 1100px; margin: 1.5rem auto 3rem;
    display: flex; flex-direction: column; align-items: center;
}
.sbm-news-header {
    width: 100%; text-align: center; margin-bottom: 2rem;
    display: flex; flex-direction: column; align-items: center;
}
.sbm-news-heading {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #111827; margin-bottom: 1.5rem; position: relative;
}
.sbm-news-heading::after {
    content: ''; display: block; width: 60px; height: 3px;
    background: var(--sbm-primary-color); position: absolute; bottom: -10px;
    left: 50%; transform: translateX(-50%); border-radius: 3px;
}
.sbmalpha-container.sbmalpha-bg-image .sbm-news-heading { color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }

.sbm-filter-row {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: 0.8rem; width: 100%;
}
#sbm-source-filters { margin-bottom: 1rem; }

.sbm-filter-row .sbm-cat-btn { 
    padding: 6px 18px !important; /* [QUAN TRỌNG] Giảm padding trên/dưới xuống 6px để nút mỏng lại */
    font-size: 0.9rem !important; /* Thu nhỏ font một xíu cho cân đối */
    border-radius: 30px !important; /* Ép bo tròn tuyệt đối */
    background: rgba(255,255,255,0.8); 
    border: 1px solid rgba(0,0,0,0.1); 
    backdrop-filter: blur(4px); 
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap !important; /* Ép chữ luôn nằm trên 1 hàng ngang */
    flex-shrink: 0 !important;      /* Chống bóp méo nút khi màn hình quá hẹp */
}
.sbm-filter-row .sbm-cat-btn.is-active {
    background: #4ea875 !important;
    border-color: #4ea875 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(78, 168, 117, 0.3) !important;
}
.sbm-filter-row.sbm-drag-scroll-container { gap: 10px !important; padding-bottom: 5px !important; margin-bottom: 1rem !important; }
.sbm-drag-scroll-container.is-smart-centered { justify-content: center !important; }

.sbm-featured-toggle-btn.is-active { background-color: var(--sbm-green) !important; border-color: var(--sbm-green) !important; color: #fff !important; }
.sbm-btn-saved { color: var(--sbm-primary) !important; border-color: #fee2e2 !important; background: #fef2f2 !important; }
.sbm-btn-saved.is-active { background: var(--sbm-primary) !important; color: #fff !important; }

.sbm-news-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; width: 100%;
}
.sbm-news-card {
    background: #fff; border-radius: 16px; overflow: hidden; position: relative; cursor: pointer;
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.05); transition: all 0.3s;
    border: 1px solid rgba(0,0,0,0.05); display: flex; flex-direction: column;
}
.sbm-news-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px -5px rgba(0,0,0,0.1); }

.sbm-news-thumb-wrapper {
    width: 100%; aspect-ratio: 16/10;
    padding: 10px 12px 6px;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.sbm-news-thumb {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.6s;
    display: block;
}
.sbm-news-card:hover .sbm-news-thumb { transform: scale(1.05); }

.sbm-news-content { padding: 1.2rem; flex-grow: 1; display: flex; flex-direction: column; }
.sbm-news-title {
    font-size: 1.05rem; font-weight: 700; line-height: 1.4; margin: 0 0 0.5rem 0; color: #1f2937;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sbm-news-excerpt {
    font-size: 0.9rem; color: #6b7280; line-height: 1.6; margin: 0 0 1rem 0; flex-grow: 1;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sbm-news-footer {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.8rem; color: #9ca3af; padding-top: 0.75rem; border-top: 1px solid #f3f4f6;
}
.sbm-news-source-badge { background: #f0fdf4; color: #166534; padding: 4px 10px; border-radius: 20px; font-weight: 600; font-size: 0.75rem; }

.sbm-news-bookmark {
    width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 50% !important;
    padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important;
    position: absolute; top: 15px; right: 15px; z-index: 5;
    background: rgba(255,255,255,0.95) !important; backdrop-filter: blur(4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; border: none !important; color: #9ca3af; transition: all 0.2s ease;
}
.sbm-news-bookmark:hover, .sbm-news-bookmark.is-saved { color: var(--sbm-primary-color); transform: scale(1.1); }
.sbm-news-bookmark svg {
    width: 20px !important; height: 20px !important; 
    display: block !important; margin: 0 !important;
    stroke: currentColor !important; /* [QUAN TRỌNG] Ép hiển thị viền SVG */
}

.sbm-news-pagination { width: 100%; display: none; justify-content: center; margin-top: 3rem; }
.sbm-load-more-btn { 
    background: #fff; color: #374151; border: 2px solid #e5e7eb; 
    padding: 10px 32px !important; /* [QUAN TRỌNG] Ép giảm chiều cao từ 1rem xuống 10px */
    border-radius: 50px; font-weight: 600; 
    font-size: 0.95rem !important; /* Thu nhỏ chữ lại một chút cho thanh lịch */
    cursor: pointer; transition: all 0.3s ease;
    line-height: 1.5 !important;
    display: inline-flex; align-items: center; justify-content: center;
}
.sbm-load-more-btn:hover { 
    border-color: var(--sbm-primary-color); color: var(--sbm-primary-color); 
    box-shadow: 0 5px 15px rgba(239, 68, 68, 0.15); transform: translateY(-3px); 
}
.sbm-load-more-btn:disabled { opacity: 0.7; cursor: not-allowed; }

/* =================================================================
   5. POPUP DETAIL
   ================================================================= */
.sbm-news-popup-container { max-width: 950px !important; width: 95% !important; }
.sbm-news-popup-container .sbm-popup-content-grid { grid-template-columns: 1fr !important; display: block !important; padding: 0 !important; }
.sbm-news-popup-container .sbm-product-col-left, .sbm-news-popup-container .sbm-product-col-right { display: none !important; }

.sbm-news-detail { padding: 2.5rem 3rem !important; max-width: 100%; margin: 0 auto; }
.sbm-news-detail-title { font-size: 2.4rem !important; font-weight: 900 !important; line-height: 1.25 !important; color: var(--sbm-text-main) !important; margin: 0.5rem 0 1.5rem !important; letter-spacing: -0.5px !important; }
.sbm-news-detail-meta { display: flex; align-items: center; gap: 20px; margin-bottom: 2rem; font-size: 0.95rem; color: var(--sbm-text-secondary); flex-wrap: wrap; }
.sbm-news-bookmark.in-popup {
    position: static !important; /* Ngoan ngoãn xếp hàng ngang cùng nút Aa */
    background: #f3f4f6 !important;
    box-shadow: none !important;
}

.sbm-news-detail-body { font-size: 1.125rem !important; line-height: 1.8 !important; color: var(--sbm-text-main) !important; }
.sbm-news-detail-body p { margin-bottom: 1.5rem !important; text-align: justify; }
.sbm-news-detail-body h2, .sbm-news-detail-body h3 { margin-top: 3rem; margin-bottom: 1.2rem; font-weight: 800; color: var(--sbm-text-main); }
.sbm-news-detail-body blockquote { border-left: 5px solid var(--sbm-primary); padding: 1.5rem 2rem; margin: 2rem 0; background-color: #fef2f2; color: var(--sbm-text-main); font-style: italic; font-size: 1.2rem; border-radius: 8px; }

/* Hình ảnh trong bài viết */
.sbm-news-detail-body img, .sbm-news-detail-body figure { display: block !important; margin: 2.5rem auto !important; max-width: 100% !important; height: auto !important; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-radius: 12px; }
.sbm-news-detail-body figure { overflow: hidden !important; padding: 0 !important; line-height: 0 !important; }
.sbm-news-detail-body .fig-picture, .sbm-news-detail-body [class*="fig-picture"] { display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; line-height: 0 !important; }
.sbm-news-detail-body .fig-picture picture, .sbm-news-detail-body .fig-picture img, .sbm-news-detail-body figure picture, .sbm-news-detail-body figure img { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border-radius: 12px 12px 0 0; box-shadow: none !important; }
.sbm-news-detail-body figure figcaption, .sbm-news-detail-body figcaption { display: block !important; line-height: 1.5 !important; font-size: 0.85rem !important; color: var(--sbm-text-secondary) !important; text-align: center !important; font-style: italic !important; padding: 0.5rem 1rem 0.75rem !important; background: #f9fafb !important; border-radius: 0 0 12px 12px !important; margin: 0 !important; }

.sbm-news-detail-excerpt { padding: 1.5rem 2rem; margin: 2rem 0; border-left: 5px solid var(--sbm-primary); background-color: #fef2f2; color: var(--sbm-text-main); font-style: italic; font-size: 1.2rem; line-height: 1.7; font-weight: 500; border-radius: 0 8px 8px 0; }
.sbm-news-detail-featured-image { display: block; width: 100%; height: auto; margin: 2.5rem 0; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); object-fit: cover; }

.sbm-news-related { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid #f3f4f6; }
.sbm-news-related h4 { font-size: 1.5rem; font-weight: 800; margin-bottom: 2rem; color: var(--sbm-text-main); }
.sbm-news-related-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1.5rem; padding-bottom: 20px; }
.sbm-related-item { flex-shrink: 0; width: 300px; scroll-snap-align: start; text-decoration: none; color: inherit; background: #fff; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: all 0.2s ease; overflow: hidden; }
.sbm-related-item:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.sbm-related-item img { width: 100%; aspect-ratio: 16/9; object-fit: cover; margin: 0 !important; }
.sbm-related-item h5 { font-size: 1rem; font-weight: 700; line-height: 1.4; padding: 1.2rem; margin: 0; color: var(--sbm-text-main); }

/* Keyframes */
@keyframes sbmFadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sbmPulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); color: var(--sbm-primary); } 100% { transform: scale(1); } }


/* =================================================================
   6. MOBILE RESPONSIVE (Gộp toàn bộ vào cuối file)
   ================================================================= */
@media (max-width: 768px) {
    .sbm-bento-nav-grid {
        display: grid !important;
        grid-template-columns: repeat(12, 1fr) !important; /* Khôi phục lưới 12 cột */
        gap: 8px !important; /* Thu nhỏ khoảng cách giữa các nút */
        padding: 15px 10px !important; 
        margin-top: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .sbm-bento-item {
        width: 100% !important;
        margin: 0 !important;
        min-height: 85px !important;
        flex: none !important;
    }

    /* HÀNG 1: 3 Nút chính (Mỗi nút chiếm 4/12 cột) */
    .sbm-bento-item.primary-item {
        grid-column: span 4 !important;
        padding: 10px 4px !important;
        flex-direction: column !important; /* Đẩy Icon lên trên chữ */
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }
    .sbm-bento-item.primary-item .bento-icon {
        margin: 0 0 5px 0 !important;
        font-size: 1.6rem !important;
    }

    /* HÀNG 2: 4 Nút phụ (Mỗi nút chiếm 3/12 cột) */
    .sbm-bento-item.secondary-item {
        grid-column: span 3 !important;
        padding: 10px 2px !important;
        flex-direction: column !important; /* Đẩy Icon lên trên chữ */
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }
    .sbm-bento-item.secondary-item .bento-icon-svg {
        margin: 0 0 5px 0 !important;
        width: 32px !important;
        height: 32px !important;
    }

    /* Căn chỉnh lại Chữ bên trong nút cho vừa màn hình */
    .bento-title {
        font-size: 0.75rem !important; /* Thu nhỏ chữ */
        white-space: normal !important; /* Cho phép rớt dòng gọn gàng bên trong nút */
        line-height: 1.2 !important;
        text-align: center !important;
    }
    
    /* Ẩn các dòng mô tả phụ ("Cập nhật hàng ngày...") để các nút trông thoáng hơn */
    .bento-desc {
        display: none !important;
    }
    .bento-icon-svg { width: 36px; height: 36px; margin-bottom: 6px; }
    .bento-icon-svg svg { width: 18px; height: 18px; }
    
    /* Vô hiệu hóa hiệu ứng Focus mờ trên Mobile để tránh chạm nhầm */
    .sbm-bento-nav-grid:hover .sbm-bento-item { opacity: 1; transform: none; }
    .sbm-bento-nav-grid .sbm-bento-item:hover { transform: translateY(-3px); }

    /* Lưới tin tức */
    .sbm-news-section { margin: 2.5rem auto 2rem; }
    .sbm-news-header { align-items: center; text-align: center; }
    .sbm-news-heading { font-size: 1.5rem; margin-left: 0; }
    .sbm-news-heading::after { left: 50%; transform: translateX(-50%); }
    .sbm-news-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; padding: 0 0.5rem; }
    .sbm-news-card { border-radius: 12px; }
    .sbm-news-content { padding: 0.75rem; }
    .sbm-news-title { font-size: 0.875rem; margin-bottom: 0.25rem; -webkit-line-clamp: 3; }
    .sbm-news-excerpt { display: none; } 
    .sbm-news-footer { font-size: 0.7rem; padding-top: 0.5rem; }
    .sbm-news-source-badge { padding: 3px 8px; }

    /* Popup Mobile */
    .sbm-news-popup-container { width: 100vw !important; max-width: 100vw !important; height: 100vh !important; border-radius: 0 !important; margin: 0 !important; top: 0 !important; left: 0 !important; transform: none !important; }
    .sbm-news-detail { padding: 1.5rem 1rem !important; }
    .sbm-news-detail-title { font-size: 1.8rem !important; }
    .sbm-news-detail-body { font-size: 1.05rem !important; }
    .sbm-news-detail-meta { justify-content: space-between; gap: 10px; }
    .sbm-news-bookmark.in-popup { margin-left: 0 !important; position: static !important; }
    .sbm-news-related-grid { margin: 0 -1rem; padding: 0 1rem 20px; }
    .sbm-related-item { width: 250px; }
    .sbm-news-detail-excerpt { padding: 1rem 1.5rem; font-size: 1.1rem; margin: 1.5rem 0; }
    .sbm-news-detail-featured-image { margin: 2rem 0; }
}

/* =================================================================
   7. ULTIMATE READING EXPERIENCE (READING TIME, TTS, READABILITY)
   ================================================================= */
/* Thời gian đọc */
.sbm-read-time { font-size: 0.8rem; color: #f59e0b; font-weight: 600; margin-left: 10px; display: inline-flex; align-items: center; gap: 4px; }

/* Khu vực nút chức năng trên cùng (Aa) */
.sbm-reading-tools { position: absolute; top: 15px; right: 60px; display: flex; gap: 10px; z-index: 10; }
.sbm-tool-btn { width: 40px; height: 40px; border-radius: 50%; background: #f3f4f6; border: none; font-weight: bold; color: #374151; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; font-size: 16px; }
.sbm-tool-btn:hover { background: #e5e7eb; transform: scale(1.1); }

/* Bảng menu Tùy chỉnh (Aa Panel) - GIAO DIỆN PREMIUM MỚI */
.sbm-readability-panel { 
    position: absolute; top: 50px; right: 0; 
    background: #ffffff; border-radius: 16px; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.05); 
    padding: 20px; width: 280px; z-index: 11; display: none; 
    border: 1px solid #f3f4f6; transform-origin: top right; 
    animation: sbmFadeInUp 0.2s ease-out forwards; 
}
.sbm-readability-panel.is-active { display: block; }
.sbm-read-setting-row { margin-bottom: 24px; }
.sbm-read-setting-row:last-child { margin-bottom: 0; }
.sbm-read-setting-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sbm-read-setting-label { font-size: 0.95rem; font-weight: 600; color: #4b5563; margin: 0; }

/* Thanh trượt (Slider) Cỡ chữ hiện đại */
.sbm-font-slider-container { position: relative; width: 100%; box-sizing: border-box; }
.sbm-font-slider { 
    -webkit-appearance: none; width: 100%; height: 4px; background: #e5e7eb; 
    border-radius: 4px; outline: none; cursor: pointer; margin: 10px 0; 
}
.sbm-font-slider::-webkit-slider-thumb { 
    -webkit-appearance: none; appearance: none; 
    width: 22px; height: 22px; border-radius: 50%; 
    background: var(--sbm-primary); cursor: pointer; 
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4); transition: transform 0.1s; 
}
.sbm-font-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.sbm-font-slider-labels { display: flex; justify-content: space-between; color: #6b7280; font-family: Georgia, serif; font-weight: 600; margin-top: 5px;}
.sbm-font-slider-labels span:first-child { font-size: 14px; }
.sbm-font-slider-labels span:last-child { font-size: 20px; }

/* Cụm nút đổi màu nền */
.sbm-theme-controls { display: flex; gap: 15px; align-items: center; }
.sbm-theme-btn { 
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e5e7eb; 
    cursor: pointer; transition: all 0.2s ease; padding: 0; 
    outline: 2px solid transparent; outline-offset: 3px; 
}
.sbm-theme-btn[data-theme="light"] { background: #ffffff; }
.sbm-theme-btn[data-theme="sepia"] { background: #fdf6e3; border-color: #e5cd9c; }
.sbm-theme-btn[data-theme="dark"] { background: #1f2937; border-color: #111827; }
.sbm-theme-btn.is-active { transform: scale(1.05); outline-color: var(--sbm-primary); }

/* Cứu Bookmark (Sửa lỗi mất Icon) */
.sbm-news-bookmark { 
    width: 40px !important; height: 40px !important; margin: 0 !important; 
    padding: 0 !important; display: flex !important; align-items: center !important; 
    justify-content: center !important; 
    position: absolute !important; top: 12px !important; right: 12px !important; z-index: 10 !important; /* Ép nó bay lơ lửng góc phải */
    background: rgba(255,255,255,0.95) !important; border: none !important; border-radius: 50% !important;
    cursor: pointer; transition: 0.2s ease; color: #374151; flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}
.sbm-news-bookmark:hover { background: #ffffff !important; transform: scale(1.1); }

/* 2. SVG Icon bên trong Bookmark */
.sbm-news-bookmark svg { 
    width: 20px !important; height: 20px !important; 
    display: block !important; margin: 0 !important; 
    stroke: currentColor !important; stroke-width: 2 !important; fill: none !important; 
}
.sbm-news-bookmark.is-saved { color: var(--sbm-primary) !important; }
.sbm-news-bookmark.is-saved svg { fill: currentColor !important; stroke: currentColor !important; }

/* Đồng bộ Panel Aa khi ở chế độ Dark Mode */
#sbm-news-popup.theme-dark .sbm-readability-panel { background: #1f2937; border-color: #374151; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
#sbm-news-popup.theme-dark .sbm-read-setting-label { color: #d1d5db !important; }
#sbm-news-popup.theme-dark .sbm-font-slider { background: #4b5563; }
#sbm-news-popup.theme-dark .sbm-font-slider-labels { color: #9ca3af; }

/* Thanh Trợ lý ảo (Text to Speech) */
.sbm-tts-player { display: flex; align-items: center; gap: 15px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; padding: 12px 20px; margin: 15px 0 25px 0; }
.sbm-tts-btn { background: var(--sbm-primary); color: #fff; border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; flex-shrink: 0; }
.sbm-tts-btn:hover { background: #dc2626; transform: scale(1.05); }
.sbm-tts-btn svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; stroke-width: 1px; }
.sbm-tts-info { flex-grow: 1; }
.sbm-tts-title { font-size: 0.95rem; font-weight: 700; color: #991b1b; margin: 0; }
.sbm-tts-status { font-size: 0.8rem; color: #b91c1c; margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.sbm-tts-waves { display: none; gap: 3px; height: 15px; align-items: flex-end; }
.sbm-tts-player.is-playing .sbm-tts-waves { display: flex; }
.sbm-tts-wave { width: 3px; background: #ef4444; border-radius: 3px; animation: sbmSoundWave 1s ease-in-out infinite; }
.sbm-tts-wave:nth-child(2) { animation-delay: 0.2s; }
.sbm-tts-wave:nth-child(3) { animation-delay: 0.4s; }
.sbm-tts-wave:nth-child(4) { animation-delay: 0.6s; }
@keyframes sbmSoundWave { 0%, 100% { height: 3px; } 50% { height: 15px; } }

/* THEME ĐỌC BÁO (Đã Fix lỗi không nhận màu) */
#sbm-news-popup.theme-sepia .sbm-news-detail { background-color: #fcf8f2; }
#sbm-news-popup.theme-sepia .sbm-news-detail-title, 
#sbm-news-popup.theme-sepia .sbm-news-detail-body,
#sbm-news-popup.theme-sepia .sbm-news-detail-body * { color: #433422 !important; }

#sbm-news-popup.theme-dark .sbm-news-detail { background-color: #111827; }
#sbm-news-popup.theme-dark .sbm-news-detail-title, 
#sbm-news-popup.theme-dark .sbm-news-detail-body, 
#sbm-news-popup.theme-dark .sbm-news-detail-body * { color: #f3f4f6 !important; }
#sbm-news-popup.theme-dark .sbm-news-detail-excerpt { background-color: #1f2937; border-left-color: #374151; color: #e5e7eb !important; }
#sbm-news-popup.theme-dark .sbm-news-related { border-top-color: #374151; }
#sbm-news-popup.theme-dark .sbm-news-related h4 { color: #f3f4f6; }
#sbm-news-popup.theme-dark .sbm-related-item { background: #1f2937; }
#sbm-news-popup.theme-dark .sbm-related-item h5 { color: #e5e7eb; }
#sbm-news-popup.theme-dark .sbm-tts-player { background: #374151; border-color: #4b5563; }
#sbm-news-popup.theme-dark .sbm-tts-title { color: #fca5a5; }
#sbm-news-popup.theme-dark .sbm-tts-status { color: #f87171; }
#sbm-news-popup.theme-dark .sbmalpha-modal-close-btn, 
#sbm-news-popup.theme-dark .sbm-tool-btn,
#sbm-news-popup.theme-dark .sbm-news-bookmark { background: #374151 !important; color: #f3f4f6 !important; }

/* Đồng bộ Panel Aa khi ở chế độ Dark Mode */
#sbm-news-popup.theme-dark .sbm-readability-panel { background: #1f2937; border-color: #374151; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
#sbm-news-popup.theme-dark .sbm-read-setting-label { color: #d1d5db !important; }
#sbm-news-popup.theme-dark .sbm-font-controls { background: #374151; }
#sbm-news-popup.theme-dark .sbm-font-btn { color: #f3f4f6; }
#sbm-news-popup.theme-dark .sbm-font-btn:hover { background: #4b5563; }

/* Màu cho Audio Player khi ở Dark Theme */
.sbm-news-popup-container.theme-dark .sbm-tts-player {
    background: #374151; /* Nền xám đậm */
    border-color: #4b5563;
}
.sbm-news-popup-container.theme-dark .sbm-tts-title {
    color: #fca5a5; /* Đỏ nhạt */
}
.sbm-news-popup-container.theme-dark .sbm-tts-status {
    color: #f87171;
}

/* Fix lỗi Icon Audio bị tàng hình */
.sbm-tts-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}
.sbm-tts-btn svg { 
    width: 22px !important; 
    height: 22px !important; 
    min-width: 22px !important; /* [QUAN TRỌNG] Chống Flatsome bóp méo */
    fill: #ffffff !important;   /* Ép cứng màu trắng */
    stroke: none !important; 
    margin: 0 !important;
}

/* Ép nội dung bài báo tuân lệnh thu/phóng cỡ chữ (Dùng biến CSS) */
.sbm-news-detail-body {
    font-size: var(--sbm-font-scale, 100%) !important;
}
.sbm-news-detail-body p, 
.sbm-news-detail-body span, 
.sbm-news-detail-body div, 
.sbm-news-detail-body a, 
.sbm-news-detail-body li {
    font-size: 1em !important; /* [QUAN TRỌNG] Ép các thẻ con phải to bằng thẻ cha */
    line-height: 1.6 !important;
}
.sbm-news-detail-body h2 { font-size: 1.5em !important; }
.sbm-news-detail-body h3 { font-size: 1.25em !important; }