/*
Theme Name: AffiliateCMS Child
Theme URI: https://lat.vn/
Description: Child theme for AffiliateCMS Theme. Add your custom styles and overrides here.
Author: AffiliateCMS Team
Author URI: https://lat.vn/
Template: affiliateCMS-theme
Version: 1.0.2
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: affiliatecms-child
*/

/* ==========================================================================
   Custom Styles - Add your overrides below
   ========================================================================== */

/* ==========================================================================
   Aging & Community Services — Post Page Overrides
   ========================================================================== */

/* 1. Post hero: bỏ gradient màu, về nền trắng */
.post-hero {
    background: #ffffff !important;
}
.post-hero__background,
.post-hero__gradient,
.post-hero__pattern {
    display: none !important;
}
.post-hero__title,
.post-hero__excerpt {
    color: #111827 !important;
}
.post-hero__meta,
.post-hero__details,
.post-hero__author-name,
.post-hero__date,
.post-hero__reading-time,
.post-hero__views,
.post-hero__updated {
    color: #6b7280 !important;
}
.post-hero--centered {
    background: #ffffff !important;
    padding-top: 2rem;
    padding-bottom: 1.5rem;
}

/* 2. Ẩn toàn bộ rating/review block */
.post-hero__rating,
.post-hero__rating--empty,
.post-hero__stars,
.post-hero__rating-score,
.post-hero__rating-count,
.comments-section,
#comments,
.comment-respond,
.acms-rating,
.acms-star-rating,
.post-rating,
.review-section {
    display: none !important;
}

/* 3. Ẩn Table of Contents */
.toc-expandable,
.toc-expandable__card,
.wp-block-table-of-contents,
.ez-toc-container,
.rank-math-toc {
    display: none !important;
}

/* ==========================================================================
   Wirecutter-style Header Layout
   ========================================================================== */

/* --- TOP HEADER --- */
.header__inner--wc {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 0;
}

/* Logo cố định bên trái */
.header__inner--wc .header__logo {
    flex-shrink: 0;
}

/* Search bar chiếm phần giữa */
.header__search-center {
    flex: 1;
    max-width: 600px;
}
.header__search-form {
    width: 100%;
}
.header__search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    border: 1.5px solid #d1d5db;
    border-radius: 999px;
    background: #f9fafb;
    padding: 0.5rem 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.header__search-wrap:focus-within {
    border-color: #374151;
    box-shadow: 0 0 0 3px rgba(55,65,81,0.1);
    background: #fff;
}
.header__search-icon {
    color: #9ca3af;
    margin-right: 0.5rem;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.header__search-input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.9rem;
    color: #111827;
    width: 100%;
    padding: 0;
}
.header__search-input::placeholder {
    color: #9ca3af;
}

/* Actions bên phải */
.header__inner--wc .header__actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Ẩn nav cũ trong header */
.header__inner--wc .header__nav {
    display: none !important;
}

/* --- DARK NAV BAR --- */
.site-nav-bar {
    background: #1a1a2e;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: sticky;
    top: 0;
    z-index: 999;
}

[data-theme="light"] .site-nav-bar {
    background: #1a1a2e;
}

.site-nav-bar .container {
    padding-top: 0;
    padding-bottom: 0;
}

.site-nav-bar__menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.site-nav-bar__item {
    position: relative;
}

.site-nav-bar__link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.8rem 1.1rem;
    color: rgba(255,255,255,0.85);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}

.site-nav-bar__link:hover,
.site-nav-bar__link:focus {
    color: #ffffff;
    background: rgba(255,255,255,0.08);
    text-decoration: none;
}

/* Top Picks highlight */
.site-nav-bar__item--highlight .site-nav-bar__link {
    color: #fbbf24;
    font-weight: 600;
}
.site-nav-bar__item--highlight .site-nav-bar__link:hover {
    color: #f59e0b;
    background: rgba(251,191,36,0.1);
}

/* Dropdown button */
.site-nav-bar__dropdown-btn .bi-chevron-down {
    font-size: 0.7rem;
    transition: transform 0.2s;
}
.site-nav-bar__item--dropdown:hover .bi-chevron-down {
    transform: rotate(180deg);
}

/* Dropdown menu */
.site-nav-bar__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    min-width: 200px;
    z-index: 1000;
}

.site-nav-bar__item--dropdown:hover .site-nav-bar__dropdown {
    display: block;
}

.site-nav-bar__dropdown li a {
    display: block;
    padding: 0.55rem 1.25rem;
    color: #374151;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.site-nav-bar__dropdown li a:hover {
    background: #f3f4f6;
    color: #111827;
}

/* Mobile: ẩn nav bar, giữ hamburger */
@media (max-width: 768px) {
    .header__search-center { display: none; }
    .site-nav-bar { display: none; }
    .header__inner--wc .header__mobile-icons { display: flex; }
    .header__inner--wc .header__actions .header__cta { display: none; }
}
@media (min-width: 769px) {
    .header__inner--wc .header__mobile-icons { display: none; }
}

/* ==========================================================================
   Post Hero — Wirecutter style (left-aligned, clean, no gradient)
   ========================================================================== */

/* Container chính */
.post-hero--centered {
    padding: 2rem 0 1.5rem !important;
    background: #f7f7f5 !important;
}
.post-hero--centered .container {
    max-width: 860px;
}

/* Reset centered alignment → left */
.post-hero__content {
    text-align: left !important;
    max-width: 760px;
    margin: 0 auto;
}

/* Breadcrumb: nhỏ, all-caps, gray */
.post-hero__content .breadcrumb {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #6b7280 !important;
    margin-bottom: 0.75rem !important;
    justify-content: flex-start !important;
}
.post-hero__content .breadcrumb a,
.post-hero__content .breadcrumb span {
    color: #6b7280 !important;
    text-decoration: none !important;
}
.post-hero__content .breadcrumb a:hover {
    color: #374151 !important;
    text-decoration: underline !important;
}
/* Ẩn "Home" trong breadcrumb, chỉ giữ category */
.post-hero__content .breadcrumb .breadcrumb__item:first-child {
    display: none !important;
}

/* Line đen đậm trước title */
.post-hero__title {
    border-top: 3px solid #111827 !important;
    padding-top: 0.6rem !important;
    font-size: clamp(2rem, 4vw, 2.8rem) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: #111827 !important;
    letter-spacing: -0.02em !important;
    text-align: left !important;
    margin-bottom: 0.75rem !important;
}

/* Excerpt ẩn đi */
.post-hero__excerpt {
    display: none !important;
}

/* Meta: chỉ hiện date — ẩn avatar, views, reading time */
.post-hero__meta {
    justify-content: flex-start !important;
    gap: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}
.post-hero__author {
    display: none !important;
}
.post-hero__details {
    font-size: 0.82rem !important;
    color: #6b7280 !important;
    gap: 1rem !important;
}
.post-hero__views,
.post-hero__reading-time {
    display: none !important;
}
/* "Updated" date — italic nhỏ */
.post-hero__date,
.post-hero__updated {
    font-style: italic !important;
    color: #6b7280 !important;
    font-size: 0.82rem !important;
}

/* Date: ẩn icon lịch, thêm chữ "Updated" trước */
.post-hero__date .bi-calendar3 {
    display: none !important;
}
.post-hero__date::before {
    content: "Updated ";
    font-style: italic;
    color: #6b7280;
}

/* Breadcrumb căn trái */
.post-hero__content .breadcrumb,
.breadcrumb--centered {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Force breadcrumb căn trái - override breadcrumb--centered */
.post-hero .breadcrumb,
.post-hero .breadcrumb--centered,
.post-hero__content .breadcrumb,
.post-hero__content .breadcrumb--centered {
    justify-content: flex-start !important;
    text-align: left !important;
    display: flex !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* ==========================================================================
   Author Box — Wirecutter style (below post hero)
   ========================================================================== */
.post-author-box {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 0 1.25rem;
    max-width: 760px;
    margin: 0 auto;
    border-top: 1px solid #e5e7eb;
}
.post-author-box__img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    object-fit: cover;
    flex-shrink: 0;
}
.post-author-box__info {
    flex: 1;
}
.post-author-box__byline {
    margin: 0 0 0.2rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.4;
}
.post-author-box__name {
    color: #111827;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.post-author-box__name:hover {
    color: #374151;
}
.post-author-box__bio {
    margin: 0;
    font-size: 0.82rem;
    color: #6b7280;
    line-height: 1.5;
}

/* ==========================================================================
   Featured Image — full width dưới author box
   ========================================================================== */
.post-featured-image {
    background: #f7f7f5;
    padding-bottom: 1.5rem;
}
.post-featured-image .container {
    max-width: 860px;
}
.post-featured-image__img {
    width: 100%;
    max-width: 760px;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    height: auto;
    object-fit: cover;
    max-height: 480px;
}

/* ==========================================================================
   Content max-width 1024px — áp dụng cho toàn bộ post content + hero
   ========================================================================== */
.post-hero--centered .container,
.post-article .container,
.post-article > .container,
.post-featured-image .container {
    max-width: 1024px !important;
}
.post-hero__content,
.post-author-box,
.post-featured-image__img,
.post-content {
    max-width: 100% !important;
}
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6,
.post-content p,
.post-content ul,
.post-content ol,
.post-content blockquote,
.post-content table {
    max-width: 100% !important;
}

/* Global max-width 1024px cho toàn site */
.container {
    max-width: 1024px !important;
}
.site-header .container,
.site-nav-bar .container,
.site-footer .container {
    max-width: 1024px !important;
}

/* post-article background trùng với hero */
.post-article,
article.post-article {
    background: #f7f7f5 !important;
}

/* post-hero: container giữ 1024px, nội dung 755px căn trái */
.post-hero.post-hero--centered .container {
    max-width: 1024px !important;
}
.post-hero__content,
.post-author-box {
    max-width: 755px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* post-article: container 1024px, nội dung 755px căn trái */
.post-article .container {
    max-width: 1024px !important;
}
.post-content {
    max-width: 755px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Ẩn số thứ tự đầu mỗi sản phẩm */
.acms-list__rank {
    display: none !important;
}

/* Nội dung sát lề trái — bỏ padding-left container ở post */
.post-hero--centered .container,
.post-article .container,
.post-featured-image .container {
    padding-left: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Bỏ indent trái của product list items */
.acms-list__item,
article.acms-list__item {
    margin-left: 0 !important;
}
.acms-list {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Khoảng cách giữa nội dung và product list */
.acms-list {
    margin-top: 2rem !important;
}

/* ==========================================================================
   Product Box — Wirecutter callout (676px, image 298px | content)
   ========================================================================== */
.acms-list { max-width: 676px !important; }
.acms-list__item,
article.acms-list__item {
    display: grid !important;
    grid-template-columns: 298px 1fr !important;
    grid-template-rows: auto auto 1fr !important;
    column-gap: 24px !important;
    row-gap: 0 !important;
    max-width: 676px !important;
    background: #ffffff !important;
    border: 1px solid #111827 !important;
    border-radius: 0 !important;
    padding: 24px !important;
    margin: 0 0 48px 0 !important;
    box-shadow: none !important;
}
.acms-list__item:hover { transform: none !important; box-shadow: none !important; }
.acms-list__row--main { display: contents !important; }

.acms-list__image {
    grid-column: 1 !important; grid-row: 1 / 4 !important;
    width: 298px !important; align-self: center !important;
    padding: 0 !important; margin: 0 !important; background: none !important; border: none !important;
}
.acms-list__image a { display: block !important; }
.acms-list__image img {
    width: 100% !important; max-width: 298px !important; height: auto !important;
    max-height: 260px !important; object-fit: contain !important; border-radius: 0 !important;
}
.acms-list__discount,
.acms-list__badges, .acms-badge,
.acms-list__meta, .acms-list__brand, .acms-list__stock, .acms-list__update,
.acms-list__score-wrapper, .acms-score, .acms-list__score-tooltip,
.acms-list__price-group { display: none !important; }

.acms-list__info {
    grid-column: 2 !important; grid-row: 1 !important;
    padding: 0 !important; min-width: 0 !important; flex: unset !important;
}
.acms-list__title { font-size: 1rem !important; font-weight: 400 !important; line-height: 1.4 !important; margin: 0 !important; }
.acms-list__title a {
    color: #111827 !important; text-decoration: underline !important;
    text-underline-offset: 2px !important; -webkit-line-clamp: unset !important; display: inline !important;
}
.acms-list__title a:hover { color: #374151 !important; }

.acms-list__row--review {
    grid-column: 2 !important; grid-row: 2 !important;
    padding: 0.75rem 0 0 !important; margin: 0 !important;
    background: none !important; border: none !important;
    font-size: 1rem !important; line-height: 1.4 !important; color: #111827 !important;
}

.acms-list__price-action {
    grid-column: 2 !important; grid-row: 3 !important;
    display: block !important; align-self: end !important;
    padding: 1.25rem 0 0 !important; margin: 0 !important; border: none !important; background: none !important;
}
.acms-list__action { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; width: 100% !important; }
.acms-btn {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; min-width: 0 !important;
    background: #000000 !important; color: #ffffff !important;
    border: none !important; border-radius: 4px !important;
    padding: 0.7rem 1rem !important; font-size: 0.95rem !important; font-weight: 700 !important;
    text-decoration: none !important; white-space: nowrap !important; box-shadow: none !important;
}
.acms-btn:hover { background: #1f2937 !important; color: #ffffff !important; }
.acms-btn i { display: none !important; }

.acms-list__row--toggle, .acms-list__row--details { grid-column: 1 / -1 !important; }

@media (max-width: 640px) {
    .acms-list__item, article.acms-list__item { grid-template-columns: 1fr !important; grid-template-rows: auto !important; padding: 16px !important; }
    .acms-list__image, .acms-list__info, .acms-list__row--review, .acms-list__price-action { grid-column: 1 !important; grid-row: auto !important; }
    .acms-list__image { width: 100% !important; margin-bottom: 1rem !important; }
}

.acms-list__title a::after, .acms-list__title a::before, .acms-list__title i, .acms-list__title svg { display: none !important; content: none !important; }

/* Product image: không cắt ảnh */
.acms-list__image, .acms-list__image a {
    height: auto !important; min-height: 0 !important; max-height: none !important;
    aspect-ratio: auto !important; overflow: visible !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
.acms-list__image img {
    width: auto !important; max-width: 100% !important;
    height: auto !important; max-height: 240px !important;
    aspect-ratio: auto !important; object-fit: contain !important;
    position: static !important; transform: none !important;
}

.acms-list__image a::after, .acms-list__image a::before, .acms-list__image i, .acms-list__image svg { display: none !important; content: none !important; }

/* Khung ảnh vuông cố định — mọi sản phẩm đồng nhất */
.acms-list__image {
    width: 298px !important; height: 298px !important;
    aspect-ratio: 1 / 1 !important;
    align-self: center !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    overflow: hidden !important;
}
.acms-list__image a {
    width: 100% !important; height: 100% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
.acms-list__image img {
    width: 100% !important; height: 100% !important;
    max-width: 100% !important; max-height: 100% !important;
    object-fit: contain !important;
}

/* Mọi box sản phẩm cùng 1 kích cỡ: 676 x 346 */
.acms-list__item,
article.acms-list__item {
    width: 676px !important; max-width: 100% !important;
    height: 346px !important; min-height: 346px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
/* Tên sản phẩm tối đa 2 dòng */
.acms-list__title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
@media (max-width: 760px) {
    .acms-list__item, article.acms-list__item { width: 100% !important; height: auto !important; min-height: 0 !important; }
}

/* ==== Khớp đúng Wirecutter: inner 620x260, ảnh 298x260, content 322 ==== */
.acms-list__item,
article.acms-list__item {
    width: 676px !important; max-width: 100% !important;
    height: auto !important; min-height: 0 !important;
    grid-template-columns: 298px 322px !important;
    column-gap: 0 !important;
    padding: 24px !important;
    box-sizing: border-box !important;
}
.acms-list__image {
    width: 298px !important; height: 260px !important;
    aspect-ratio: auto !important;
    align-self: center !important;
}
.acms-list__image img {
    width: 100% !important; height: 100% !important;
    object-fit: contain !important;
}
/* Cột nội dung: padding trái 24px như mẫu, canh đều trên-dưới */
.acms-list__info { padding: 0 0 0 24px !important; align-self: start !important; }
.acms-list__row--review { padding: 0.5rem 0 0 24px !important; }
.acms-list__price-action { padding: 0 0 0 24px !important; align-self: end !important; }
.acms-list__title { font-size: 1rem !important; line-height: 1.4 !important; }

@media (max-width: 760px) {
    .acms-list__item, article.acms-list__item { width: 100% !important; grid-template-columns: 1fr !important; }
    .acms-list__image { width: 100% !important; }
    .acms-list__info, .acms-list__row--review, .acms-list__price-action { padding-left: 0 !important; }
}

/* Gap 2 cột 20px, padding box 40px */
.acms-list__item,
article.acms-list__item {
    grid-template-columns: 298px 1fr !important;
    column-gap: 20px !important;
    padding: 40px !important;
}
.acms-list__info { padding: 0 !important; }
.acms-list__row--review { padding: 0.5rem 0 0 0 !important; }
.acms-list__price-action { padding: 0 !important; }
@media (max-width: 760px) {
    .acms-list__item, article.acms-list__item { grid-template-columns: 1fr !important; padding: 24px !important; }
}

.acms-list__item, article.acms-list__item { column-gap: 40px !important; }

/* Box 740px -> cột nội dung đúng 322px (298 ảnh + 40 gap + 80 padding) */
.acms-list { max-width: 740px !important; }
.acms-list__item,
article.acms-list__item {
    width: 740px !important; max-width: 100% !important;
    height: 340px !important; min-height: 340px !important;
    align-items: center !important;
}
/* Mô tả: tối đa 5 dòng, không phá khung */
.acms-list__row--review {
    display: -webkit-box !important;
    -webkit-line-clamp: 5 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
    padding: 0.4rem 0 0 0 !important;
}
.acms-list__price-action { padding-top: 0.9rem !important; }
@media (max-width: 780px) {
    .acms-list, .acms-list__item, article.acms-list__item {
        width: 100% !important; max-width: 100% !important;
        height: auto !important; min-height: 0 !important;
    }
}

/* ===== Chốt vị trí grid cho box sản phẩm (ghi đè mọi rule phía trên) ===== */
article.acms-list__item {
    grid-template-columns: 298px 1fr !important;
    grid-template-rows: auto auto 1fr !important;
    align-items: start !important;
}
article.acms-list__item .acms-list__image {
    grid-column: 1 !important; grid-row: 1 / 4 !important; align-self: center !important;
}
article.acms-list__item .acms-list__info {
    grid-column: 2 !important; grid-row: 1 !important; align-self: start !important;
}
article.acms-list__item > .acms-list__row--review {
    grid-column: 2 !important; grid-row: 2 !important; align-self: start !important;
}
article.acms-list__item .acms-list__price-action {
    grid-column: 2 !important; grid-row: 3 !important; align-self: end !important;
}
article.acms-list__item .acms-list__rank { display: none !important; }

/* ===== Pros & Cons: thiết kế lại ===== */
/* Box cao tự động để chừa chỗ cho hàng Pros & Cons */
article.acms-list__item {
    height: auto !important;
    min-height: 340px !important;
    grid-template-rows: auto auto 1fr auto auto !important;
    overflow: visible !important;
}
article.acms-list__item .acms-list__image { grid-row: 1 / 4 !important; }

/* Hàng toggle */
article.acms-list__item > .acms-list__row--toggle {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    margin: 24px 0 0 !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid #e5e7eb !important;
    background: none !important;
    cursor: pointer !important;
}
article.acms-list__item > .acms-list__row--toggle:hover .acms-list__toggle-label { color: #111827 !important; }

.acms-list__toggle-labels { margin: 0 !important; }
.acms-list__toggle-label {
    display: inline-flex !important; align-items: center !important; gap: 0.45rem !important;
    font-size: 0.72rem !important; font-weight: 800 !important;
    text-transform: uppercase !important; letter-spacing: 0.08em !important;
    color: #6b7280 !important;
}
.acms-list__toggle-label i { font-size: 0.85rem !important; color: #9ca3af !important; }

.acms-list__expand-toggle {
    display: inline-flex !important; align-items: center !important; gap: 0.35rem !important;
    background: none !important; border: none !important; padding: 0 !important;
    font-size: 0.8rem !important; font-weight: 600 !important; color: #374151 !important;
    cursor: pointer !important; text-decoration: underline !important; text-underline-offset: 2px !important;
}
.acms-list__expand-toggle .bi-chevron-down { font-size: 0.7rem !important; transition: transform 0.2s !important; text-decoration: none !important; }
.acms-list__expand-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg) !important; }
.acms-list__expand-toggle[aria-expanded="true"] .acms-list__expand-text,
.acms-list__expand-toggle[aria-expanded="false"] .acms-list__collapse-text { display: none !important; }

/* Vùng chi tiết */
article.acms-list__item > .acms-list__row--details {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    display: none !important;
    padding: 0 !important; margin: 0 !important;
    background: none !important; border: none !important;
}
article.acms-list__item > .acms-list__row--details.is-expanded {
    display: block !important;
    padding: 18px 0 0 !important;
}
.acms-list__details-grid { display: block !important; padding: 0 !important; background: none !important; }
.acms-list__pros-cons {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    gap: 24px !important; padding: 0 !important; background: none !important; border: none !important;
}
.acms-list__pros h4, .acms-list__cons h4 {
    display: flex !important; align-items: center !important; gap: 0.4rem !important;
    font-size: 0.72rem !important; font-weight: 800 !important;
    text-transform: uppercase !important; letter-spacing: 0.08em !important;
    margin: 0 0 0.6rem !important;
}
.acms-list__pros h4 { color: #15803d !important; }
.acms-list__cons h4 { color: #b91c1c !important; }
.acms-list__pros ul, .acms-list__cons ul {
    list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.acms-list__pros li, .acms-list__cons li {
    position: relative !important; padding-left: 1.1rem !important;
    margin: 0 0 0.45rem !important;
    font-size: 0.875rem !important; line-height: 1.5 !important; color: #374151 !important;
}
.acms-list__pros li::before { content: "+" !important; position: absolute !important; left: 0 !important; color: #15803d !important; font-weight: 700 !important; }
.acms-list__cons li::before { content: "\2013" !important; position: absolute !important; left: 0 !important; color: #b91c1c !important; font-weight: 700 !important; }

@media (max-width: 780px) {
    article.acms-list__item { min-height: 0 !important; }
    .acms-list__pros-cons { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ==========================================================================
   Typography — nội dung bài viết
   ========================================================================== */
.post-content {
    font-family: "Noto Sans", Arial, sans-serif !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
}
.post-content p,
.post-content li,
.post-content blockquote,
.post-content td,
.post-content th {
    font-family: "Noto Sans", Arial, sans-serif !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
}
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    font-family: "Noto Sans", Arial, sans-serif !important;
    line-height: 1.3 !important;
}

/* Body font: Noto Sans */
.post-content,
.post-content p,
.post-content li,
.post-content blockquote,
.post-content td,
.post-content th,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    font-family: "Noto Sans", Arial, sans-serif !important;
}

/* Cỡ chữ nội dung 20px */
.post-content,
.post-content p,
.post-content li,
.post-content blockquote,
.post-content td,
.post-content th {
    font-size: 20px !important;
    line-height: 1.7 !important;
}

/* ==========================================================================
   Box sản phẩm — cỡ chữ cân đối với nội dung 20px
   ========================================================================== */
/* Ảnh hẹp lại để cột chữ rộng hơn, chữ to không bị bó */
article.acms-list__item {
    grid-template-columns: 260px 1fr !important;
    min-height: 300px !important;
}
article.acms-list__item .acms-list__image {
    width: 260px !important; height: 240px !important;
}

/* Tên sản phẩm */
.acms-list__title {
    font-size: 19px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

/* Mô tả ngắn */
.acms-list__row--review {
    font-size: 16px !important;
    line-height: 1.55 !important;
    color: #374151 !important;
    -webkit-line-clamp: 4 !important;
    padding-top: 0.5rem !important;
}

/* Nút Amazon */
.acms-btn {
    font-size: 16px !important;
    padding: 0.75rem 1.1rem !important;
}

/* Pros & Cons */
.acms-list__toggle-label { font-size: 13px !important; letter-spacing: 0.07em !important; }
.acms-list__toggle-label i { font-size: 15px !important; }
.acms-list__expand-toggle { font-size: 15px !important; }
.acms-list__pros h4, .acms-list__cons h4 { font-size: 13px !important; letter-spacing: 0.07em !important; }
.acms-list__pros li, .acms-list__cons li {
    font-size: 16px !important; line-height: 1.55 !important; padding-left: 1.25rem !important;
}

@media (max-width: 780px) {
    article.acms-list__item { grid-template-columns: 1fr !important; }
    article.acms-list__item .acms-list__image { width: 100% !important; }
}

/* Cân đối chiều cao: ảnh vừa với khối chữ, bỏ khoảng trống thừa */
article.acms-list__item {
    min-height: 0 !important;
    grid-template-rows: auto auto auto !important;
    align-items: start !important;
    padding: 32px 40px !important;
}
article.acms-list__item .acms-list__image {
    height: 235px !important;
    grid-row: 1 / 4 !important;
    align-self: center !important;
}
.acms-list__row--review { -webkit-line-clamp: 5 !important; }
article.acms-list__item .acms-list__price-action {
    align-self: start !important;
    padding-top: 1.1rem !important;
}
@media (max-width: 780px) {
    article.acms-list__item { padding: 24px !important; }
    article.acms-list__item .acms-list__image { height: auto !important; }
}

/* ==========================================================================
   Header / nav căn đúng 1024px, thẳng hàng với nội dung bài viết
   ========================================================================== */
.site-header .container,
.site-nav-bar .container,
.site-footer .container {
    max-width: 1024px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.header__inner--wc { width: 100% !important; }

/* Màn hình nhỏ hơn 1024 thì trả lại lề để không dính mép */
@media (max-width: 1088px) {
    .site-header .container,
    .site-nav-bar .container,
    .site-footer .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ==========================================================================
   Nav bar: nền trắng, chữ đen (theo mẫu Wirecutter)
   ========================================================================== */
.site-nav-bar,
[data-theme="light"] .site-nav-bar,
[data-theme="dark"] .site-nav-bar {
    background: #ffffff !important;
    border-top: none !important;
    border-bottom: none !important;
}
.site-nav-bar__link {
    color: #111827 !important;
    font-weight: 600 !important;
}
.site-nav-bar__link:hover,
.site-nav-bar__link:focus {
    color: #111827 !important;
    background: #f3f4f6 !important;
}
/* Top Picks: bỏ màu vàng, dùng chữ đen đậm */
.site-nav-bar__item--highlight .site-nav-bar__link {
    color: #111827 !important;
    font-weight: 700 !important;
}
.site-nav-bar__item--highlight .site-nav-bar__link:hover {
    color: #111827 !important;
    background: #f3f4f6 !important;
}
.site-nav-bar__item--highlight .site-nav-bar__link .bi-star-fill,
.site-nav-bar__item--highlight .site-nav-bar__link i {
    color: #111827 !important;
}

/* Bỏ mọi đường kẻ quanh header/nav (giống Wirecutter) */
.site-header,
.site-header .container,
.header__inner--wc,
.site-nav-bar,
.site-nav-bar .container,
.site-nav-bar__menu {
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}


/* ==========================================================================
   BRAND IDENTITY — bảng màu xanh thân thiện với người già
   Tham chiếu: livingyourseniorlife.com
   ========================================================================== */
:root {
    --acms-blue: #2B6CB0;
    --acms-blue-dark: #215387;
    --acms-blue-soft: #EDF2F7;
    --acms-ink: #1A202C;
    --acms-gray: #4A5568;
    --acms-muted: #718096;
    --acms-bg: #F7FAFC;
    --acms-navy: #003366;
}

.post-hero--centered,
.post-featured-image { background: var(--acms-blue-soft) !important; }
.post-article,
article.post-article,
body.single-post-page { background: var(--acms-bg) !important; }

.post-content,
.post-content p,
.post-content li,
.post-content td,
.post-content th { color: var(--acms-gray) !important; }

.post-hero__title,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 { color: var(--acms-navy) !important; }
.post-hero__title { border-top-color: var(--acms-navy) !important; }

.post-content a:not(.acms-btn) {
    color: var(--acms-blue) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}
.post-content a:not(.acms-btn):hover { color: var(--acms-blue-dark) !important; }

.header__cta, a.header__cta, .header__cta:visited {
    background: var(--acms-blue) !important;
    border-color: var(--acms-blue) !important;
    color: #ffffff !important;
}
.header__cta:hover {
    background: var(--acms-blue-dark) !important;
    border-color: var(--acms-blue-dark) !important;
    color: #ffffff !important;
}

.site-nav-bar__link { color: var(--acms-ink) !important; }
.site-nav-bar__link:hover,
.site-nav-bar__link:focus {
    color: var(--acms-blue) !important;
    background: var(--acms-blue-soft) !important;
}
.site-nav-bar__item--highlight .site-nav-bar__link,
.site-nav-bar__item--highlight .site-nav-bar__link i {
    color: var(--acms-blue) !important;
    font-weight: 700 !important;
}
.site-nav-bar__item--highlight .site-nav-bar__link:hover {
    color: var(--acms-blue-dark) !important;
    background: var(--acms-blue-soft) !important;
}
.site-nav-bar__dropdown li a:hover {
    background: var(--acms-blue-soft) !important;
    color: var(--acms-blue) !important;
}

.header__search-wrap:focus-within {
    border-color: var(--acms-blue) !important;
    box-shadow: 0 0 0 3px rgba(43,108,176,0.15) !important;
}

.post-hero__content .breadcrumb a:hover { color: var(--acms-blue) !important; }
.post-author-box__byline { color: var(--acms-navy) !important; }
.post-author-box__name { color: var(--acms-blue) !important; }
.post-author-box__name:hover { color: var(--acms-blue-dark) !important; }

article.acms-list__item { border-color: #CBD5E0 !important; }
.acms-list__title a { color: var(--acms-navy) !important; }
.acms-list__title a:hover { color: var(--acms-blue) !important; }
.acms-list__row--review { color: var(--acms-gray) !important; }

.acms-btn, .acms-btn--amazon, .acms-btn--affiliate {
    background: var(--acms-blue) !important;
    color: #ffffff !important;
    border: none !important;
}
.acms-btn:hover, .acms-btn--amazon:hover, .acms-btn--affiliate:hover {
    background: var(--acms-blue-dark) !important;
    color: #ffffff !important;
}

.acms-list__expand-toggle { color: var(--acms-blue) !important; }
.acms-list__expand-toggle:hover { color: var(--acms-blue-dark) !important; }
.acms-list__toggle-label { color: var(--acms-muted) !important; }
.acms-list__pros li, .acms-list__cons li { color: var(--acms-gray) !important; }

.site-footer { background: var(--acms-ink) !important; }
.site-footer a:hover { color: #90CDF4 !important; }

/* Author box nam cung nen voi hero */
.post-author-band { background: var(--acms-blue-soft) !important; }

/* ==========================================================================
   Header — logo to hon (de tri inline critical CSS cua theme)
   ========================================================================== */
.site-header .header__logo {
    max-width: 300px !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
}
.site-header .header__logo img,
.site-header .header__logo .custom-logo,
.site-header .custom-logo-link img,
header.site-header .header__logo img {
    height: 58px !important;
    max-height: 58px !important;
    width: auto !important;
    max-width: 300px !important;
    object-fit: contain !important;
}

/* Hang header thoang hon cho can voi logo moi */
.header__inner--wc {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    gap: 2rem !important;
}

@media (max-width: 1088px) {
    .site-header .header__logo img,
    .site-header .custom-logo-link img { height: 46px !important; max-height: 46px !important; }
}
@media (max-width: 768px) {
    .site-header .header__logo img,
    .site-header .custom-logo-link img { height: 40px !important; max-height: 40px !important; }
    .header__inner--wc { gap: 1rem !important; padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
}

/* Author band: bo padding 2 ben cho thang hang voi hero + noi dung */
.post-author-band .container {
    max-width: 1024px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
@media (max-width: 1088px) {
    .post-author-band .container { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Nen than bai viet: nhat hon nua (gan trang, con chut sac xanh) */
:root { --acms-bg: #FBFDFE; }
.post-article,
article.post-article,
body.single-post-page { background: #FBFDFE !important; }

/* Hero / author band / anh feature: lam nhat sac xanh */
:root { --acms-hero-bg: #F4F8FC; }
.post-hero--centered,
.post-featured-image,
.post-author-band {
    background: #F4F8FC !important;
}

/* Khoang cach giua cac box san pham: 48px -> 20px */
.acms-list__item,
article.acms-list__item {
    margin-bottom: 20px !important;
}
.acms-list__item:last-child,
article.acms-list__item:last-child {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   HEADER v2 — 4 tang (tong hop livingyourseniorlife + elderlydaily)
   ========================================================================== */

/* --- Tang 1: Utility bar --- */
.site-utility-bar {
    background: var(--acms-navy) !important;
    font-size: 13px;
    line-height: 1;
}
.site-utility-bar .container {
    max-width: 1024px;
    padding-left: 0; padding-right: 0;
    margin-left: auto; margin-right: auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; min-height: 38px;
}
.site-utility-bar__trust {
    margin: 0; color: rgba(255,255,255,0.92);
    display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 500;
}
.site-utility-bar__trust i { color: #90CDF4; font-size: 14px; }
.site-utility-bar__links {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: center; gap: 1.5rem;
}
.site-utility-bar__links a {
    color: rgba(255,255,255,0.85); text-decoration: none; font-weight: 500;
    transition: color 0.15s;
}
.site-utility-bar__links a:hover { color: #ffffff; text-decoration: underline; }

/* --- Tang 3: nav --- */
.site-nav-bar__item--deals .site-nav-bar__link { color: #C05621 !important; font-weight: 700 !important; }
.site-nav-bar__item--deals .site-nav-bar__link i { color: #DD6B20 !important; }
.site-nav-bar__item--deals .site-nav-bar__link:hover { background: #FFFAF0 !important; color: #9C4221 !important; }
.site-nav-bar__menu { flex-wrap: wrap; }

/* --- Tang 4: Quick links --- */
.site-quick-links {
    background: var(--acms-hero-bg, #F4F8FC);
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    padding: 10px 0;
}
.site-quick-links .container {
    max-width: 1024px; padding-left: 0; padding-right: 0;
    margin-left: auto; margin-right: auto;
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
}
.site-quick-links__label {
    font-size: 12px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--acms-muted); flex-shrink: 0;
}
.site-quick-links__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.site-quick-links__list a {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    background: #ffffff;
    border: 1px solid #CBD5E0;
    border-radius: 999px;
    font-size: 14px; font-weight: 600;
    color: var(--acms-navy);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s;
}
.site-quick-links__list a:hover {
    background: var(--acms-blue); border-color: var(--acms-blue);
    color: #ffffff; text-decoration: none;
}

@media (max-width: 1088px) {
    .site-utility-bar .container,
    .site-quick-links .container { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (max-width: 860px) {
    .site-utility-bar__trust { display: none; }
    .site-utility-bar .container { justify-content: center; }
}
@media (max-width: 768px) {
    .site-quick-links { padding: 8px 0; }
    .site-quick-links__label { display: none; }
    .site-quick-links .container { overflow-x: auto; flex-wrap: nowrap; }
    .site-quick-links__list { flex-wrap: nowrap; }
}

/* Nav chinh: can giua */
.site-nav-bar__menu {
    justify-content: center !important;
}

/* ==========================================================================
   Nhip thong giua anh feature <-> noi dung bai
   ========================================================================== */
.post-featured-image {
    padding-top: 0.5rem !important;
    padding-bottom: 2.5rem !important;
}
.post-featured-image__img {
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(16,42,67,0.08) !important;
}

/* Noi dung bat dau co khoang tho */
.post-article {
    padding-top: 2.5rem !important;
    padding-bottom: 3rem !important;
}
.post-content > *:first-child { margin-top: 0 !important; }

/* Doan van gian hon chut */
.post-content p { margin-bottom: 1.5rem !important; }

/* Tieu de trong bai: thoang tren, sat duoi */
.post-content h2 {
    margin-top: 3rem !important;
    margin-bottom: 1rem !important;
}
.post-content h3 {
    margin-top: 2.25rem !important;
    margin-bottom: 0.75rem !important;
}

/* Khoi san pham tach khoi doan van tren */
.acms-list { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; }

@media (max-width: 780px) {
    .post-featured-image { padding-bottom: 1.5rem !important; }
    .post-article { padding-top: 1.5rem !important; }
    .post-content h2 { margin-top: 2rem !important; }
}

/* ==========================================================================
   Nhan manh: tieu de dam hon + ten san pham to hon
   ========================================================================== */
:root { --acms-navy: #002850; }

/* Tieu de bai + heading: navy dam hon */
.post-hero__title,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    color: #002850 !important;
}
.post-hero__title { border-top-color: #002850 !important; }

/* Ten san pham trong o: to hon + dam hon */
.acms-list__title {
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.32 !important;
}
.acms-list__title a {
    color: #002850 !important;
    font-weight: 700 !important;
}
.acms-list__title a:hover { color: var(--acms-blue) !important; }

@media (max-width: 780px) {
    .acms-list__title { font-size: 19px !important; }
}

/* Ten san pham: dam hon nua */
.acms-list__title a,
.acms-list__title {
    color: #001A33 !important;
    font-weight: 800 !important;
}
.acms-list__title a:hover { color: var(--acms-blue) !important; }

/* Ten san pham: de tri .post-content a:not(.acms-btn) (specificity cao hon) */
.post-content .acms-list__title a,
.post-content .acms-list__title a:visited,
.post-content h3.acms-list__title a {
    color: #001A33 !important;
    font-weight: 800 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}
.post-content .acms-list__title a:hover {
    color: var(--acms-blue) !important;
}

/* ==========================================================================
   An TOC noi (da go toc.css nen no loi ra cuoi trang)
   ========================================================================== */
#tocActionBar,
.toc-action-bar,
#tocBubble,
.toc-bubble,
.toc-bubble__panel,
.toc-bubble__trigger,
.toc-expandable,
.toc-expandable__card {
    display: none !important;
    visibility: hidden !important;
}

/* Ten san pham: bo gach chan, mau dam */
.post-content .acms-list__title a,
.post-content .acms-list__title a:visited,
.post-content .acms-list__title a:hover,
.post-content h3.acms-list__title a,
.acms-list__title a {
    text-decoration: none !important;
    color: #001A33 !important;
    font-weight: 800 !important;
}
.post-content .acms-list__title a:hover,
.acms-list__title a:hover {
    color: var(--acms-blue) !important;
    text-decoration: none !important;
}

/* ==========================================================================
   Dong bo phong chu toan site = Noto Sans (giong post content)
   ========================================================================== */
body,
input, button, select, textarea,
h1, h2, h3, h4, h5, h6, p, a, li, span, div, blockquote, td, th, label, strong, em,
.site-utility-bar, .site-utility-bar__trust, .site-utility-bar__links,
.site-header, .header__search-input, .header__cta, .header__logo,
.site-nav-bar, .site-nav-bar__link, .site-nav-bar__dropdown,
.site-quick-links, .site-quick-links__label, .site-quick-links__list,
.post-hero, .post-hero__title, .post-hero__date, .post-hero__meta, .breadcrumb,
.post-author-box, .post-author-box__byline, .post-author-box__bio,
.acms-list, .acms-list__title, .acms-list__row--review, .acms-btn,
.acms-list__toggle-label, .acms-list__expand-toggle,
.acms-list__pros, .acms-list__cons,
.post-disclosure, .site-footer, .site-footer a {
    font-family: "Noto Sans", Arial, sans-serif !important;
}

/* Giu nguyen font icon cua Bootstrap Icons */
.bi,
[class^="bi-"], [class*=" bi-"],
.bi::before,
[class^="bi-"]::before, [class*=" bi-"]::before {
    font-family: "bootstrap-icons" !important;
}

/* ==========================================================================
   Hover o san pham: vien dam + nang len + do bong
   ========================================================================== */
article.acms-list__item {
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
    will-change: transform;
}
article.acms-list__item:hover {
    border-color: var(--acms-blue) !important;
    box-shadow: 0 8px 24px rgba(16,42,67,0.13), 0 2px 6px rgba(16,42,67,0.07) !important;
    transform: translateY(-3px) !important;
}

/* Anh san pham phong nhe khi hover */
.acms-list__image img {
    transition: transform 0.25s ease !important;
}
article.acms-list__item:hover .acms-list__image img {
    transform: scale(1.04) !important;
}

/* Ten san pham doi mau theo */
article.acms-list__item:hover .acms-list__title a {
    color: var(--acms-blue) !important;
}

/* Nut Amazon dam hon khi hover ca o */
article.acms-list__item:hover .acms-btn {
    background: var(--acms-blue-dark) !important;
}

/* Ton trong nguoi dung tat hieu ung chuyen dong */
@media (prefers-reduced-motion: reduce) {
    article.acms-list__item,
    article.acms-list__item:hover,
    .acms-list__image img,
    article.acms-list__item:hover .acms-list__image img {
        transition: none !important;
        transform: none !important;
    }
}

/* ==========================================================================
   Can doi ten san pham <-> mo ta (tham chieu Wirecutter)
   Ti le 18/16 — chenh vua du, khong choi
   ========================================================================== */
.acms-list__title,
.post-content .acms-list__title {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.38 !important;
    margin: 0 !important;
}
.post-content .acms-list__title a,
.post-content .acms-list__title a:visited,
.acms-list__title a {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1A202C !important;
    text-decoration: none !important;
    letter-spacing: -0.005em !important;
}

/* Mo ta: cung co chu, nhat hon ve do dam, mau du dam de doc */
.acms-list__row--review {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: #2D3748 !important;
    padding-top: 0.6rem !important;
}

@media (max-width: 780px) {
    .acms-list__title,
    .post-content .acms-list__title,
    .post-content .acms-list__title a,
    .acms-list__title a { font-size: 17px !important; }
    .acms-list__row--review { font-size: 15px !important; }
}

/* ==========================================================================
   Boi den chuot: doi tu teal xanh la (--color-primary cua theme) sang xanh brand
   ========================================================================== */
::selection {
    background-color: #2B6CB0 !important;
    color: #ffffff !important;
}
::-moz-selection {
    background-color: #2B6CB0 !important;
    color: #ffffff !important;
}
/* Trong than bai: nen nhat de chu van doc duoc */
.post-content ::selection,
.post-content ::-moz-selection,
.acms-list ::selection,
.acms-list ::-moz-selection,
.post-author-box ::selection,
.post-author-box ::-moz-selection {
    background-color: rgba(43,108,176,0.22) !important;
    color: #1A202C !important;
}

/* ==========================================================================
   Sua "Updated" hien 2 lan (ngay dang + ngay cap nhat)
   Khi co .post-hero__updated thi an ngay dang di
   ========================================================================== */
.post-hero__details:has(.post-hero__updated) .post-hero__date {
    display: none !important;
}
.post-hero__updated i,
.post-hero__updated .bi-arrow-repeat {
    display: none !important;
}
.post-hero__updated {
    font-style: italic !important;
    color: #6b7280 !important;
    font-size: 0.82rem !important;
}

/* ==========================================================================
   San pham dau tien: vien dam + ribbon "BEST OVERALL"
   ========================================================================== */
.acms-list { padding-top: 16px !important; }

article.acms-list__item:first-of-type {
    border: 2px solid var(--acms-blue) !important;
    overflow: visible !important;
    position: relative !important;
    box-shadow: 0 2px 10px rgba(43,108,176,0.10) !important;
}

article.acms-list__item:first-of-type::before {
    content: "BEST OVERALL";
    position: absolute;
    top: -15px;
    left: -2px;
    z-index: 2;
    background: var(--acms-blue);
    color: #ffffff;
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    padding: 8px 30px 8px 14px;
    border-radius: 2px 0 0 2px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 50%, 100% 100%, 0 100%);
    white-space: nowrap;
}

/* Hover: vien dam hon nua */
article.acms-list__item:first-of-type:hover {
    border-color: var(--acms-blue-dark) !important;
    box-shadow: 0 10px 28px rgba(43,108,176,0.20), 0 2px 6px rgba(16,42,67,0.08) !important;
}

@media (max-width: 780px) {
    article.acms-list__item:first-of-type::before {
        font-size: 11px;
        padding: 7px 24px 7px 11px;
        top: -13px;
    }
}

/* ==========================================================================
   Tinh chinh cuoi: mo ta nhat + nho hon, ten san pham to hon
   ========================================================================== */
.acms-list__row--review {
    color: #787878 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    padding-top: 1rem !important;
}

.acms-list__title,
.post-content .acms-list__title,
.post-content .acms-list__title a,
.post-content .acms-list__title a:visited,
.acms-list__title a {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

@media (max-width: 780px) {
    .acms-list__title,
    .post-content .acms-list__title,
    .post-content .acms-list__title a,
    .acms-list__title a { font-size: 18px !important; }
    .acms-list__row--review { font-size: 13.5px !important; }
}

/* ==========================================================================
   PROS & CONS — don gian, thong nhat, hop tong the bai
   Bo icon like/dislike. Moi y dung 1 dang icon: check / x
   ========================================================================== */

/* 1. Bo het icon ban tay */
.acms-list__toggle-label .bi-hand-thumbs-up,
.acms-list__toggle-label .bi-hand-thumbs-down,
.acms-list__pros h4 i,
.acms-list__cons h4 i,
.acms-list__pros h4 .bi,
.acms-list__cons h4 .bi {
    display: none !important;
}

/* 2. Hang toggle */
.acms-list__toggle-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #787878 !important;
    gap: 0 !important;
}
.acms-list__expand-toggle {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--acms-blue) !important;
}

/* 3. Tieu de Pros / Cons */
.acms-list__pros h4,
.acms-list__cons h4 {
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    margin: 0 0 0.7rem !important;
    gap: 0 !important;
}
.acms-list__pros h4 { color: #2F7A4F !important; }
.acms-list__cons h4 { color: #B4453C !important; }

/* 4. Danh sach — bo moi bullet mac dinh */
.acms-list__pros ul,
.acms-list__cons ul,
.post-content .acms-list__pros ul,
.post-content .acms-list__cons ul {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.acms-list__pros li,
.acms-list__cons li,
.post-content .acms-list__pros li,
.post-content .acms-list__cons li {
    list-style: none !important;
    list-style-type: none !important;
    position: relative !important;
    padding-left: 1.6rem !important;
    margin: 0 0 0.55rem !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: #4A5568 !important;
}
.acms-list__pros li::marker,
.acms-list__cons li::marker { content: "" !important; }

/* 5. Icon thong nhat: check cho Pros, x cho Cons */
.acms-list__pros li::before,
.acms-list__cons li::before {
    position: absolute !important;
    left: 0 !important;
    top: 0.08em !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
    width: 1.1rem !important;
}
.acms-list__pros li::before {
    content: "\2713" !important;   /* dau tich */
    color: #2F7A4F !important;
}
.acms-list__cons li::before {
    content: "\2715" !important;   /* dau nhan */
    color: #B4453C !important;
}

@media (max-width: 780px) {
    .acms-list__pros li, .acms-list__cons li { font-size: 14px !important; }
}

/* ==========================================================================
   Pros & Cons: icon dung SVG (ky tu unicode bi thieu glyph trong Noto Sans)
   ========================================================================== */
.acms-list__pros li::before,
.acms-list__cons li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.32em !important;
    width: 14px !important;
    height: 14px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
    font-size: 0 !important;
}
.acms-list__pros li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232F7A4F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.6l3.4 3.4L13 4.6'/%3E%3C/svg%3E") !important;
}
.acms-list__cons li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23B4453C' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M4.2 4.2l7.6 7.6M11.8 4.2l-7.6 7.6'/%3E%3C/svg%3E") !important;
}

/* ==========================================================================
   Pros & Cons: de tri bullet tron cua theme (.post-content ul li::before)
   ========================================================================== */
.post-content .acms-list .acms-list__pros ul li::before,
.post-content .acms-list .acms-list__cons ul li::before,
.post-content .acms-list__pros li::before,
.post-content .acms-list__cons li::before,
.acms-list__pros li::before,
.acms-list__cons li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.3em !important;
    width: 15px !important;
    height: 15px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 15px 15px !important;
    transform: none !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    display: block !important;
}
.post-content .acms-list .acms-list__pros ul li::before,
.post-content .acms-list__pros li::before,
.acms-list__pros li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232F7A4F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.6l3.4 3.4L13 4.6'/%3E%3C/svg%3E") !important;
}
.post-content .acms-list .acms-list__cons ul li::before,
.post-content .acms-list__cons li::before,
.acms-list__cons li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23B4453C' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M4.2 4.2l7.6 7.6M11.8 4.2l-7.6 7.6'/%3E%3C/svg%3E") !important;
}

/* Bo moi bullet mac dinh con sot */
.post-content .acms-list__pros ul,
.post-content .acms-list__cons ul,
.post-content .acms-list__pros li,
.post-content .acms-list__cons li {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
}

/* Nut Pros & Cons: bo gach chan */
.acms-list__expand-toggle,
.acms-list__expand-toggle:hover,
.acms-list__expand-toggle:focus,
.acms-list__expand-text,
.acms-list__collapse-text {
    text-decoration: none !important;
}
.acms-list__expand-toggle:hover { color: var(--acms-blue-dark) !important; }

/* ==========================================================================
   Mo ta san pham: to hon chut, gioi han 4 dong, gian dong de doc
   ========================================================================== */
.acms-list__row--review {
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: #787878 !important;
    padding-top: 1rem !important;
    -webkit-line-clamp: 4 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Nut Amazon cach mo ta thoang hon chut */
article.acms-list__item .acms-list__price-action {
    padding-top: 1.15rem !important;
}

@media (max-width: 780px) {
    .acms-list__row--review { font-size: 14px !important; line-height: 1.6 !important; }
}

/* ==========================================================================
   ============  RESPONSIVE  (dat cuoi file de de moi rule tren)  ===========
   ========================================================================== */

/* Chan tran ngang toan trang */
html, body { max-width: 100% !important; overflow-x: hidden !important; }
img, video, iframe, table { max-width: 100% !important; }

/* ---------- <= 1088px: tra lai le cho moi container ---------- */
@media (max-width: 1088px) {
    .container,
    .site-header .container,
    .site-nav-bar .container,
    .site-footer .container,
    .site-utility-bar .container,
    .site-quick-links .container,
    .post-hero--centered .container,
    .post-article .container,
    .post-featured-image .container,
    .post-author-band .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
    }
    .post-hero__content,
    .post-author-box,
    .post-content,
    .acms-list {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Box san pham khong con rong co dinh */
    .acms-list,
    .acms-list__item,
    article.acms-list__item {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ---------- <= 860px: o san pham ve 1 cot ---------- */
@media (max-width: 860px) {
    article.acms-list__item,
    .acms-list__item {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 20px !important;
        align-items: stretch !important;
    }
    article.acms-list__item .acms-list__image {
        grid-column: 1 !important;
        grid-row: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: 230px !important;
        margin: 0 auto 1rem !important;
        align-self: center !important;
    }
    article.acms-list__item .acms-list__image img {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 230px !important;
    }
    article.acms-list__item .acms-list__info,
    article.acms-list__item > .acms-list__row--review,
    article.acms-list__item .acms-list__price-action {
        grid-column: 1 !important;
        grid-row: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    article.acms-list__item .acms-list__price-action { align-self: start !important; }

    /* Ribbon nho lai cho vua */
    article.acms-list__item:first-of-type::before {
        font-size: 10px !important;
        padding: 6px 22px 6px 10px !important;
        top: -12px !important;
    }

    /* Hang Pros & Cons khong bi chen chuc */
    article.acms-list__item > .acms-list__row--toggle {
        flex-wrap: nowrap !important;
        gap: 0.75rem !important;
        margin-top: 18px !important;
    }
    .acms-list__toggle-label { white-space: nowrap !important; font-size: 12px !important; }
    .acms-list__expand-toggle { white-space: nowrap !important; font-size: 13px !important; }
    .acms-list__pros-cons { grid-template-columns: 1fr !important; gap: 18px !important; }
}

/* ---------- <= 600px: dien thoai ---------- */
@media (max-width: 600px) {
    .container,
    .site-header .container,
    .site-nav-bar .container,
    .site-utility-bar .container,
    .site-quick-links .container,
    .post-hero--centered .container,
    .post-article .container,
    .post-featured-image .container,
    .post-author-band .container,
    .site-footer .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Chu trong bai nho lai cho vua man */
    .post-content,
    .post-content p,
    .post-content li,
    .post-content blockquote,
    .post-content td,
    .post-content th {
        font-size: 17px !important;
        line-height: 1.65 !important;
    }
    .post-hero__title { font-size: clamp(1.6rem, 7vw, 2rem) !important; }
    .post-content h2 { font-size: 1.4rem !important; margin-top: 2rem !important; }
    .post-content h3 { font-size: 1.15rem !important; }

    /* O san pham */
    article.acms-list__item,
    .acms-list__item { padding: 16px !important; margin-bottom: 16px !important; }
    .acms-list__title,
    .post-content .acms-list__title,
    .post-content .acms-list__title a,
    .acms-list__title a { font-size: 18px !important; }
    .acms-list__row--review { font-size: 14px !important; line-height: 1.6 !important; padding-top: 0.75rem !important; }
    .acms-btn { font-size: 15px !important; padding: 0.8rem 1rem !important; }

    /* Anh feature */
    .post-featured-image { padding-bottom: 1.25rem !important; }
    .post-article { padding-top: 1.5rem !important; }

    /* Box tac gia */
    .post-author-box { gap: 0.7rem !important; }
    .post-author-box__bio { font-size: 0.8rem !important; }
}

/* ---------- Quick links: cuon ngang gon, khong lam tran trang ---------- */
@media (max-width: 1088px) {
    .site-quick-links .container {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .site-quick-links .container::-webkit-scrollbar { display: none !important; }
    .site-quick-links__list { flex-wrap: nowrap !important; }
    .site-quick-links__list a { font-size: 13px !important; padding: 0.35rem 0.75rem !important; }
}

/* ---------- Utility bar tren man nho ---------- */
@media (max-width: 600px) {
    .site-utility-bar { font-size: 12px !important; }
    .site-utility-bar__links { gap: 1rem !important; }
}

/* ==========================================================================
   FIX: tren man nho phai dat ro thu tu dong, neu khong hang Pros & Cons
   (grid-row: 4 tu desktop) se de chong len phan mo ta
   Thu tu: anh -> ten -> mo ta -> nut -> pros&cons -> chi tiet
   ========================================================================== */
@media (max-width: 860px) {
    article.acms-list__item,
    .acms-list__item {
        grid-template-rows: auto auto auto auto auto auto !important;
    }
    article.acms-list__item .acms-list__image      { grid-row: 1 !important; }
    article.acms-list__item .acms-list__info       { grid-row: 2 !important; }
    article.acms-list__item > .acms-list__row--review { grid-row: 3 !important; display: -webkit-box !important; }
    article.acms-list__item .acms-list__price-action  { grid-row: 4 !important; }
    article.acms-list__item > .acms-list__row--toggle { grid-row: 5 !important; }
    article.acms-list__item > .acms-list__row--details{ grid-row: 6 !important; }

    article.acms-list__item .acms-list__image,
    article.acms-list__item .acms-list__info,
    article.acms-list__item > .acms-list__row--review,
    article.acms-list__item .acms-list__price-action,
    article.acms-list__item > .acms-list__row--toggle,
    article.acms-list__item > .acms-list__row--details {
        grid-column: 1 / -1 !important;
    }
}


/* ==========================================================================
   TYPOGRAPHY BAI VIET — thang chu kieu tap chi (People/Dotdash)
   Body 18px den, heading phan cap ro, link gach chan
   ========================================================================== */

/* ---- Body ---- */
.post-content,
.post-content p,
.post-content li,
.post-content blockquote,
.post-content td,
.post-content th {
    font-size: 18px !important;
    line-height: 1.7 !important;
    color: #121212 !important;
}
.post-content p { margin: 0 0 1.4rem !important; }

/* ---- Heading: thang 28 / 22 / 19 so voi body 18 ---- */
.post-content h2 {
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    color: #002850 !important;
    margin: 2.75rem 0 1rem !important;
}
.post-content h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    color: #002850 !important;
    margin: 2rem 0 0.7rem !important;
}
.post-content h4 {
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #1A202C !important;
    margin: 1.6rem 0 0.6rem !important;
}
.post-content h5,
.post-content h6 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1A202C !important;
    margin: 1.4rem 0 0.5rem !important;
}
/* Heading dau tien khong day xuong */
.post-content > h2:first-child,
.post-content > h3:first-child { margin-top: 0 !important; }

/* ---- Link trong bai: gach chan ro, mau xanh thuong hieu ---- */
.post-content a:not(.acms-btn):not(.acms-list__title a) {
    color: #2B6CB0 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
    font-weight: 600 !important;
}
.post-content a:not(.acms-btn):hover {
    color: #1A4E85 !important;
    text-decoration-thickness: 2px !important;
}

/* ---- Danh sach ---- */
.post-content ul,
.post-content ol { margin: 0 0 1.4rem !important; padding-left: 1.4rem !important; }
.post-content li { margin-bottom: 0.6rem !important; }

/* ---- Trich dan ---- */
.post-content blockquote {
    border-left: 3px solid #2B6CB0 !important;
    padding: 0.2rem 0 0.2rem 1.25rem !important;
    margin: 1.75rem 0 !important;
    color: #2D3748 !important;
    font-style: normal !important;
}

/* ---- In dam trong bai ---- */
.post-content strong,
.post-content b { color: #000000 !important; font-weight: 700 !important; }

/* ---- Mobile ---- */
@media (max-width: 600px) {
    .post-content,
    .post-content p,
    .post-content li,
    .post-content blockquote,
    .post-content td,
    .post-content th { font-size: 17px !important; line-height: 1.65 !important; }
    .post-content h2 { font-size: 24px !important; margin-top: 2.25rem !important; }
    .post-content h3 { font-size: 20px !important; margin-top: 1.75rem !important; }
    .post-content h4 { font-size: 18px !important; }
}

/* ==========================================================================
   Nen than bai viet: trang
   ========================================================================== */
.post-article,
article.post-article,
body.single-post-page,
.post-content {
    background: #ffffff !important;
}

/* Heading trong bai: mau den */
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    color: #121212 !important;
}

/* H2 trong bai: viet hoa chu dau moi tu */
.post-content h2 {
    text-transform: capitalize !important;
}

/* ==========================================================================
   Toan bo khoi dau bai (title, author box, anh feature) sang nen trang
   ========================================================================== */
.post-hero,
.post-hero--centered,
.post-author-band,
.post-featured-image,
.post-article,
article.post-article,
body.single-post-page {
    background: #ffffff !important;
}

/* ==========================================================================
   Tieu de bai + ten tac gia: mau den
   ========================================================================== */
.post-hero__title {
    color: #121212 !important;
    border-top-color: #121212 !important;
}
.post-author-box__byline,
.post-content .post-author-box__name,
.post-author-box__name,
.post-author-box__name:visited {
    color: #121212 !important;
}
.post-author-box__name:hover {
    color: #2B6CB0 !important;
}

/* ==========================================================================
   Thu hep khoang cach giua anh feature va noi dung bai
   (truoc: 40px duoi anh + 40px tren noi dung = 80px)
   ========================================================================== */
.post-featured-image {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.post-article {
    padding-top: 1.75rem !important;
}
@media (max-width: 600px) {
    .post-featured-image { padding-bottom: 0 !important; }
    .post-article { padding-top: 1.25rem !important; }
}

/* ==========================================================================
   ============        TRANG CHU — bo cuc landing page        ===============
   ========================================================================== */

.site-main.home { background: #ffffff; }

.site-main.home .container {
    max-width: 1024px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Tieu de chung cho moi section */
.home-section__title {
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: clamp(1.75rem, 3.2vw, 2.25rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.02em;
    color: #121212;
    text-align: center;
    margin: 0 0 0.6rem;
}
.home-section__sub {
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: #5A6472;
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.5rem;
}

/* ===================== HERO ===================== */
.home-hero {
    background: linear-gradient(180deg, #F4F8FC 0%, #ffffff 100%);
    padding: 4rem 0 3.5rem;
    text-align: center;
}
.home-hero__title {
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: clamp(2.1rem, 5vw, 3.1rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #121212;
    margin: 0 0 1rem;
}
.home-hero__sub {
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.65;
    color: #4A5568;
    max-width: 640px;
    margin: 0 auto 2rem;
}

.home-hero__search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 580px;
    margin: 0 auto 1.25rem;
}
.home-hero__search-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #ffffff;
    border: 1.5px solid #CBD5E0;
    border-radius: 999px;
    padding: 0.85rem 1.25rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.home-hero__search-wrap:focus-within {
    border-color: #2B6CB0;
    box-shadow: 0 0 0 3px rgba(43,108,176,0.15);
}
.home-hero__search-wrap .bi { color: #9AA5B1; font-size: 1rem; }
.home-hero__search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: 16px;
    color: #121212;
}
.home-hero__search-btn {
    flex-shrink: 0;
    background: #2B6CB0;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 0.9rem 1.75rem;
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.home-hero__search-btn:hover { background: #215387; }

.home-hero__note {
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: 14px;
    color: #5A6472;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
}
.home-hero__note .bi { color: #2F7A4F; }
.home-hero__note a { color: #2B6CB0; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.home-hero__note a:hover { color: #215387; }

/* ===================== VALUE CARDS ===================== */
.home-values { padding: 3.5rem 0 1rem; }
.home-values__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.home-value {
    border-radius: 14px;
    padding: 1.75rem 1.5rem;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
}
.home-value--blue  { background: #EDF4FC; border-color: #D4E4F6; }
.home-value--green { background: #EDF7F1; border-color: #D3EADD; }
.home-value--amber { background: #FDF5EA; border-color: #F3E2C9; }

.home-value__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    border-radius: 12px;
    background: #ffffff;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}
.home-value--blue  .home-value__icon { color: #2B6CB0; }
.home-value--green .home-value__icon { color: #2F7A4F; }
.home-value--amber .home-value__icon { color: #B5731F; }

.home-value__title {
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #121212;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}
.home-value__text {
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #4A5568;
    margin: 0 0 1.1rem;
    flex: 1;
}
.home-value__link {
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #2B6CB0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.home-value__link:hover { color: #215387; gap: 0.6rem; }
.home-value__link .bi { font-size: 0.85rem; transition: transform 0.15s; }

/* ===================== SHOP BY NEED ===================== */
.home-cats { padding: 3.5rem 0 1rem; }
.home-cats__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.home-cat {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 1.15rem 1.25rem;
    text-decoration: none !important;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.home-cat:hover {
    border-color: #2B6CB0;
    box-shadow: 0 6px 18px rgba(16,42,67,0.09);
    transform: translateY(-2px);
}
.home-cat__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 10px;
    background: #EDF4FC;
    color: #2B6CB0;
    font-size: 1.15rem;
}
.home-cat__body { flex: 1; min-width: 0; display: block; }
.home-cat__title {
    display: block;
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #121212;
    line-height: 1.3;
    margin-bottom: 0.15rem;
}
.home-cat__desc {
    display: block;
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
    color: #6B7684;
}
.home-cat__arrow { flex-shrink: 0; color: #A0AEC0; font-size: 0.85rem; transition: transform 0.15s, color 0.15s; }
.home-cat:hover .home-cat__arrow { color: #2B6CB0; transform: translateX(3px); }

/* ===================== SO LIEU ===================== */
.home-stats {
    background: #EDF4FC;
    padding: 2.75rem 0;
    margin-top: 3.5rem;
}
.home-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    text-align: center;
}
.home-stat__value {
    display: block;
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: clamp(1.75rem, 3.5vw, 2.4rem);
    font-weight: 800;
    color: #002850;
    line-height: 1.1;
    margin-bottom: 0.35rem;
}
.home-stat__label {
    display: block;
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: 14px;
    color: #4A5568;
    line-height: 1.4;
}

/* ===================== QUY TRINH ===================== */
.home-process { padding: 3.75rem 0 3rem; }
.home-process__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.home-step {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 1.5rem 1.25rem;
}
.home-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #2B6CB0;
    color: #ffffff;
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 0.9rem;
}
.home-step__title {
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: 16.5px;
    font-weight: 700;
    color: #121212;
    line-height: 1.32;
    margin: 0 0 0.5rem;
}
.home-step__text {
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: 14.5px;
    line-height: 1.6;
    color: #4A5568;
    margin: 0;
}
.home-process__more { text-align: center; margin: 2rem 0 0; }
.home-process__more a {
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #2B6CB0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.home-process__more a:hover { color: #215387; gap: 0.6rem; }

/* ===================== NHAN XET ===================== */
.home-quotes { padding: 1rem 0 3.5rem; }
.home-quotes__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
.home-quote {
    background: #F8FAFC;
    border-left: 3px solid #2B6CB0;
    border-radius: 0 10px 10px 0;
    padding: 1.4rem 1.5rem;
    margin: 0;
}
.home-quote__text {
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #2D3748;
    margin: 0 0 0.8rem;
}
.home-quote__who {
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #121212;
    font-style: normal;
}

/* ===================== CTA CUOI ===================== */
.home-cta {
    background: #002850;
    padding: 3.5rem 0;
    text-align: center;
}
.home-cta__title {
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    margin: 0 0 0.75rem;
}
.home-cta__text {
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
    max-width: 560px;
    margin: 0 auto 1.75rem;
}
.home-cta__btn {
    display: inline-block;
    background: #ffffff;
    color: #002850;
    font-family: "Noto Sans", Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none !important;
    padding: 0.9rem 2rem;
    border-radius: 999px;
    transition: background 0.15s, transform 0.15s;
}
.home-cta__btn:hover { background: #EDF4FC; transform: translateY(-2px); color: #002850; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1088px) {
    .site-main.home .container { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 900px) {
    .home-values__grid { grid-template-columns: 1fr 1fr; }
    .home-cats__grid   { grid-template-columns: 1fr 1fr; }
    .home-process__grid{ grid-template-columns: 1fr 1fr; }
    .home-stats__grid  { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
}
@media (max-width: 640px) {
    .site-main.home .container { padding-left: 16px !important; padding-right: 16px !important; }
    .home-hero { padding: 2.5rem 0 2.25rem; }
    .home-hero__br { display: none; }
    .home-hero__sub { font-size: 16px; }
    .home-hero__search { flex-direction: column; gap: 0.6rem; }
    .home-hero__search-wrap { width: 100%; }
    .home-hero__search-btn { width: 100%; }
    .home-values__grid,
    .home-cats__grid,
    .home-process__grid,
    .home-quotes__grid { grid-template-columns: 1fr; }
    .home-values, .home-cats { padding-top: 2.5rem; }
    .home-process { padding: 2.5rem 0 2rem; }
    .home-stats { margin-top: 2.5rem; padding: 2rem 0; }
    .home-section__sub { font-size: 16px; margin-bottom: 1.75rem; }
    .home-cta { padding: 2.5rem 0; }
}

/* Anh hero trang chu */
.home-hero__media {
    margin-top: 2.25rem;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(16,42,67,0.12);
}
.home-hero__media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
}
@media (max-width: 640px) {
    .home-hero__media { margin-top: 1.5rem; border-radius: 10px; }
    .home-hero__media img { max-height: 240px; }
}