/* Reset CSS cơ bản */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, sans-serif;
}

body {
    padding-top: 80px; /* Tránh bị Header che khuất */
    background-color: #fcfcfc;
}

/* --- Header Cố định --- */
.main-header {
    background-color: #050A30; 
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.menu-toggle .bar {
    width: 25px;
    height: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 2px;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 5%;
    height: 80px;
}

.logo img {
    height: 68px;
    width: auto;
}

/* Menu điều hướng */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 50px;
    margin: 0;
    padding: 0;
}

/* Sửa lỗi bộ chọn để nhận màu trắng */
.nav-menu li a {
    color: #ffffff !important; /* Luôn là màu trắng */
    text-decoration: none !important; /* Bỏ gạch chân */
    font-size: 15px; 
    font-weight: 300; 
    letter-spacing: 0.5px; 
    transition: all 0.3s ease;
    display: block;
}

.nav-menu li a:hover {
    color: #cccccc !important;
    opacity: 0.8;
}

/* Nút Hamburger (Mặc định ẩn trên PC) */
.menu-toggle {
    display: none; 
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    z-index: 1001;
}

/* --- Thanh tìm kiếm viên thuốc --- */
.search-container {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-radius: 50px; 
    padding: 3px 3px 3px 15px; 
    width: 320px; 
    height: 40px;
}

.search-icon {
    width: 18px;
    height: auto;
    margin-right: 10px;
    opacity: 0.6;
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #333;
}

.search-btn {
    background-color: #050A30;
    color: #ffffff;
    border: none;
    border-radius: 50px; 
    padding: 0 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    height: 100%;
    transition: all 0.3s ease;
}

.search-btn:hover {
    background-color: #1a237e;
}

/* --- Hotline --- */
.hotline {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}

.hotline-text span {
    display: block;
    font-size: 11px;
    opacity: 0.8;
}

.hotline-text .phone-number {
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.5px;
}
/* --- Hero Banner Slider --- */
.hero {
    height: 90vh;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.hero-slider {
    max-width: 100%;
    height: 100%;
}

.hero-item {
    width: auto;
    height: 84vh;
    background-repeat: no-repeat;
    background-position: center 40%;
    background-size: cover;
}

/* --- Tùy chỉnh dấu chấm phân trang --- */
.hero .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #ffffff; /* Màu các chấm không hoạt động */
    opacity: 0.6;
    transition: all 0.3s ease;
}

.hero .swiper-pagination-bullet-active {
    width: 30px; /* Làm dấu chấm đang chọn dài ra nhìn chuyên nghiệp hơn */
    border-radius: 5px;
    background: #ffffff; /* Màu dấu chấm đang hoạt động */
    opacity: 1;
}

/* Đưa các dấu chấm lên cao một chút so với đáy */
.hero .swiper-pagination {
    bottom: 30px !important;
}
/* --- Khung chứa 2 nút --- */
/* --- Khung chứa 2 nút cố định (Sticky) --- */
.hero-actions {
    position: fixed; /* Chuyển từ absolute sang fixed để cố định khi lăn chuột */
    bottom: 10px;    /* Khoảng cách từ đáy màn hình lên */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 9999;   /* Số lớn để luôn nằm trên tất cả các thành phần khác của web */
    width: max-content;
    pointer-events: auto; /* Đảm bảo vẫn click được */
}

/* --- Style chung cho nút --- */
.action-btn {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
    border-radius: 50px;
    padding: 5px 25px 5px 8px;
    transition: all 0.3s ease;
    /* Đổ bóng đậm hơn để nổi bật khi lăn chuột qua các vùng màu trắng */
    box-shadow: 0 10px 25px rgba(0,0,0,0.3); 
}

/* Hiệu ứng khi hover */
.action-btn:hover {
    transform: translateY(-5px) translateX(0); /* Nhảy nhẹ lên trên */
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}

/* Icon hình tròn trắng bên trái nút */
.btn-icon {
    background: rgba(255, 255, 255, 0);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.btn-icon img {
    width: 34px;
    height: 34px;
}

/* Phần chữ bên phải */
.btn-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.btn-text span {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.btn-text strong {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2;
}

/* --- Màu sắc riêng từng nút --- */
.zalo-btn {
    background-color: #0078FF; /* Màu xanh Zalo */
}

.hotline-btn {
    background-color: #F78121; /* Màu cam Hotline */
}
/* --- Section Sản phẩm mới --- */
.new-products {
    max-width: 1250px;
    margin: 60px auto;
    padding: 0 20px;
    text-align: center;
}

.section-header {
    display: inline-block;
    border: 1px solid #333;
    padding: 10px 10px;
    margin-bottom: 40px;
}

.section-header h2 {
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Card Swiper Item */
.card-item {
    list-style: none;
    padding: 10px;
}

.card-link {
    display: block;
    background: white;
    padding: 3px;
    border-radius: 12px;
    text-decoration: none;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

.card-link:hover {
    border-color: #050A30;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.card-imge {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 15px;
}

.card-title {
    color: #333;
    font-size: 15px;
    margin-bottom: 15px;
    height: 40px;
    overflow: hidden;
}
.card-wrapper{
    max-width: 1400px;
    margin: 0 50px 20px;
    padding: 20px 10px;
    overflow: hidden;
}

.btn-contact {
    background-color: #050A30;
    color: #ffffff;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    transition: 0.3s;
    border: none;
    cursor: pointer;
}

.btn-contact:hover {
    background-color: #1a237e;
    transform: translateY(-2px);
}

/* --- Lưới danh mục (Category Grid) --- */
/* Tổng thể section danh mục */
.product-categories {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 15px;
    text-align: center;
}

/* Lưới Grid: 3 cột đều nhau */
.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 cột */
    gap: 25px; /* Khoảng cách giữa các ô */
    margin-top: 20px;
}

/* Từng ô sản phẩm */
.category-item {
    position: relative; /* Cần thiết để nhãn chữ căn theo ảnh */
    overflow: hidden;
    border-radius: 4px;
}

.category-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Giúp ảnh không bị méo khi kích thước khác nhau */
    display: block;
    transition: transform 0.5s ease;
    border-radius: 1%;
}

/* Nhãn chữ trắng đè lên ảnh */
.category-label {
    position: absolute;
    bottom: 25px; /* Cách đáy ảnh */
    left: 50%;
    transform: translateX(-50%); /* Căn giữa hoàn hảo */
    background-color: white;
    color: #050A30; /* Màu xanh Navy của bạn */
    padding: 12px 25px;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap; /* Giữ chữ trên 1 hàng */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 2;
    pointer-events: none; /* Tránh cản trở việc click vào link */
    min-width: 180px;
}

/* Hiệu ứng Zoom ảnh khi hover */
.category-item:hover img {
    transform: scale(1.08);
}

/* Responsive: Trên điện thoại chỉ hiện 1-2 cột */

/* Section Về chúng tôi */
.about-us {
    max-width: 1200px;
    margin: 80px auto; /* Khoảng cách rộng rãi giữa các phần */
    padding: 0 20px;
    text-align: center;
}

/* Nội dung văn bản */
.about-content {
    max-width: 800px; /* Giới hạn độ rộng để chữ không bị trải quá dài */
    margin: 0 auto;
    margin-top: 30px;
}

.about-content p {
    font-family: 'SVN-Font-Chinh', system-ui, sans-serif; /* Sử dụng font mảnh của bạn */
    font-size: 18px;
    line-height: 1.8; /* Khoảng cách dòng thoáng */
    color: #333;
    font-weight: 300; /* Nét chữ mảnh */
    font-style: italic; /* Nếu bạn muốn nghiêng như một câu trích dẫn */
    letter-spacing: 0.3px;
}

/* Tùy chỉnh riêng cho tiêu đề nếu cần khác biệt */
.about-us .section-header {
    margin-bottom: 20px;
}

.news-section {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 15px;
    text-align: center;
}

.news-homepage {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Bên trái to hơn bên phải một chút */
    gap: 30px;
    margin-top: 30px;
    text-align: left;
}

/* Tin chính bên trái */
.news-main .news-image img {
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
}

.news-main h3 {
    font-size: 20px;
    margin: 15px 0;
    color: #050A30;
    font-weight: bold;
}

.news-main p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* Danh sách tin bên phải */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.news-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.news-item .thumb {
    flex: 0 0 160px; /* Độ rộng cố định cho ảnh nhỏ */
}

.news-item .thumb img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 6px;
}

.news-item h4 {
    font-size: 15px;
    color: #050A30;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Giới hạn 2 dòng tiêu đề */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-item p {
    font-size: 13px;
    color: #888;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Giới hạn 2 dòng mô tả */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hover hiệu ứng */
.news-item:hover h4, .news-main:hover h3 {
    color: #1a237e;
    text-decoration: underline;
    cursor: pointer;
}

.main-footer {
    background-color: #050A30; /* Màu xanh Navy đậm */
    color: #ffffff;
    padding: 60px 0 20px;
    font-family: 'SVN-Font-Chinh', sans-serif;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Footer Top: Logo & Newsletter */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.footer-logo img {
    height: 60px;
}

.footer-newsletter {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-newsletter p {
    font-size: 14px;
    font-weight: 300;
}

.newsletter-form {
    display: flex;
    background: white;
    border-radius: 4px;
    overflow: hidden;
    width: 350px;
}

.newsletter-form input {
    border: none;
    padding: 10px 15px;
    flex: 1;
    outline: none;
    font-size: 14px;
}

.newsletter-form button {
    background-color: #777; /* Màu xám như mẫu */
    color: white;
    border: none;
    padding: 0 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: 0.3s;
}

.newsletter-form button:hover {
    background-color: #555;
}

.footer-divider {
    border: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 40px;
}

/* Footer Content: Columns */
.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 1.2fr 1fr;
    gap: 40px;
    margin-bottom: 50px;
}

.footer-col h3 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
}

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

.footer-col ul li {
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.6;
    color: #ccc;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.footer-col ul li a {
    color: #ccc;
    text-decoration: none;
    transition: 0.3s;
}

.footer-col ul li a:hover {
    color: white;
    padding-left: 5px;
}

.footer-icon {
    width: 16px;
    margin-top: 3px;
}

/* Footer Bottom: Legal & Copyright */
.footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 30px;
}

.footer-legal {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
}

.footer-legal a {
    color: #888;
    text-decoration: none;
    font-size: 11px;
    transition: 0.3s;
}

.footer-legal a:hover {
    color: #ccc;
}

.copyright {
    font-size: 11px;
    color: #666;
}

/* Container chứa các icon */
.floating-contact {
    position: fixed;
    bottom: 100px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Định dạng chung cho icon */
.contact-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    background: rgba(255, 255, 255, 0.457);
}

.contact-icon img {
    width: 39px;
    height: 39px;
}

/* Hiệu ứng phóng to khi hover */
.contact-icon:hover {
    transform: scale(1.1) translateX(-5px);
}

/* Hiệu ứng rung cho nút Phone */
.phone {
    background-color: #4CAF50; /* Màu xanh lá cho hotline */
    position: relative;
}

.phone img {
    filter: brightness(0) invert(1); /* Chuyển icon phone sang màu trắng */
}

/* Vòng tròn lan tỏa xung quanh nút điện thoại */
.phone-ring {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 2px solid #4CAF50;
    animation: phone-ring-out 1.5s infinite ease-out;
}

@keyframes phone-ring-out {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* Animation nhẹ cho toàn bộ khối (nhấp nhô) */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.floating-contact {
    animation: bounce 3s infinite ease-in-out;
}
/* Products*/
/* --- Breadcrumb Style --- */
.breadcrumb-area {
    background-color: #ffffff; /* Nền trắng sạch sẽ */
    padding: 20px 0; /* Khoảng cách trên dưới */
    border-bottom: 1px solid #f1f1f1; /* Đường kẻ mờ bên dưới */
}

.breadcrumb-area .container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 15px;
}

.breadcrumb {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #333;
}

.breadcrumb a {
    text-decoration: none;
    color: #666; /* Màu xám cho Trang chủ */
    transition: 0.3s;
}

.breadcrumb a:hover {
    color: #050A30; /* Hover đổi màu Navy */
}

.breadcrumb .delimiter {
    margin: 0 10px;
    color: #ccc; /* Màu cho dấu gạch chéo / */
}

.breadcrumb .current {
    font-weight: bold; /* Chữ Shop in đậm như mẫu */
    color: #000;
}
.breadcrumb span, 
#breadcrumb-product-name {
  color: #000000 !important; /* Đen tuyền sắc nét */
  font-weight: 700;          /* Kích chữ in đậm lên rõ rệt */
  margin-left: 3px;          /* Thở nhẹ một khoảng cách với dấu gạch chéo */
}
.shop-header {
    display: flex;
    justify-content: space-between; /* Đẩy 2 bên về 2 đầu */
    align-items: center;            /* Căn giữa theo chiều dọc */
    padding: 20px 0;
    margin-bottom: 20px;
}   

.results-count {
    font-size: 16px;
    color: #333;
}
.filter-mobile-wrapper {
    display: none;
    cursor: pointer;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 16px;
}
.support-box p {
    padding-left: 10px;
    padding-right: 10px;
}

.filter-icon-img {
    width: 20px; /* Điều chỉnh kích thước icon */
    height: auto;
}
/* Tùy chỉnh ô chọn Mới nhất */
.sort-select {
    padding: 10px 15px;
    border: 1px solid #000; /* Viền đen mỏng như ảnh */
    background-color: #fff;
    font-size: 14px;
    cursor: pointer;
    outline: none;
    min-width: 200px; /* Độ rộng của ô chọn */
    appearance: none; /* Xóa mũi tên mặc định của trình duyệt để tự custom nếu muốn */
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
    background-repeat: no-repeat;
    background-position: right 15px center; /* Đặt mũi tên bên phải */
}

.sort-select:hover {
    border-color: #666;
}
.shop-container {
    max-width: 1250px;
    margin: 30px auto;
    display: flex;
    gap: 25px;
    padding: 0 15px;
}

.sidebar { flex: 0 0 280px; }
.main-content { flex: 1; }

/* Sidebar Box */
.sidebar-box { 
    border: 1px solid #eee; 
    margin-bottom: 20px;
    border-radius: 8px; /* Bạn có thể tăng/giảm số này để bo nhiều hay ít */
    overflow: hidden;
 }
.sidebar-box h3 { 
    background: #050A30; color: #fff; 
    padding: 10px 15px; font-size: 15px; text-transform: uppercase;
}

.cat-list { list-style: none; }
.cat-list li a { 
    display: flex; justify-content: space-between;
    padding: 12px 15px; color: #333; text-decoration: none;
    border-bottom: 1px solid #f5f5f5; font-size: 14px;
}
/* Đảm bảo hiệu ứng chuyển màu mượt mà, không bị giật click */
.cat-list li a, .category-link {
  transition: all 0.2s ease-in-out;
  display: block; /* Thổi bùng kích thước thẻ a bằng toàn bộ hàng */
  width: 100%;
}

/* Hiệu ứng khi lướt chuột vào */
.cat-list li a:hover, .category-link:hover {
  color: #050A30 !important;       /* Chữ đổi sang màu xanh thương hiệu */
  background-color: #f0f7ff;      /* Nền chuyển sang xanh dương siêu nhạt */
  padding-left: 10px;             /* Tạo hiệu ứng dịch chữ nhẹ sang phải nhìn rất chuyên nghiệp */
}

/* Lưới sản phẩm 4 cột */
.product-grid {
    display: grid;
    /* Tự động chia cột, mỗi cột tối thiểu 200px, tối đa là 1 phần đều nhau */
    grid-template-columns: repeat(auto-fill, minmax(210px,2fr)); 
    gap: 20px;
}

.product-card { 
    text-align: left;
    background: #ffffff;
  border-radius: 8px; /* Bo góc đồng bộ với ảnh và nút bấm */
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Tạo chuyển động mượt mà khi di chuột vào/ra */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
 }
 .product-card:hover {
  transform: translateY(-4px); /* Nhấc nhẹ ô sản phẩm lên 4px tạo cảm giác nổi khối sinh động */
  
  /* Đổ bóng nhạt, mịn màng và sang trọng */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); 
}
.product-card img { 
    width: 100%; aspect-ratio: 3/4; object-fit: cover; 
    border-radius: 4px;
}
.product-info h4 {
    font-size: 13px;
    margin: 10px 0 5px;
    color: #333;
    height: 38px; /* Đủ cho 2 dòng */
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Giới hạn đúng 2 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-info .price { font-weight: bold; color: #000; font-size: 14px; }

/* Nút hỗ trợ sidebar */
.support-btns a {
    display: block; text-align: center; padding: 8px;
    margin: 10px 15px; border-radius: 5px; text-decoration: none;
    border: 1px solid #050A30; font-size: 13px;
}
.btn-zalo-sidebar { background: #050A30; color: #fff; }
.btn-call-sidebar { color: #050A30; }
.pagination-product{
   display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Khoảng cách giữa các ô số */
    margin: 40px 0;
}
/* Định dạng từng ô số */
.pagination-product a, 
.pagination-product span {
    display: flex;           /* Quan trọng: Để căn số vào giữa ô */
    justify-content: center;
    align-items: center;
    width: 40px;             /* Chiều rộng ô vuông */
    height: 40px;            /* Chiều cao ô vuông */
    
    border: 1px solid #000;  /* VIỀN ĐEN NGOÀI */
    text-decoration: none !important; /* BỎ GẠCH CHÂN DƯỚI SỐ */
    color: #000;             /* Màu chữ đen */
    font-weight: bold;       /* Chữ in đậm */
    background-color: #fff;  /* NỀN TRẮNG mặc định */
    transition: all 0.3s ease;
}

/* Ô đang hiển thị (Số 1 có nền xám đen) */
.pagination-product a.active, 
.pagination-product .active {
    background-color: #444;  /* BACKGROUND TỪNG SỐ (màu tối) */
    color: #fff;             /* Chữ trắng để nổi bật trên nền tối */
    border-color: #444;
}

/* Hiệu ứng khi di chuột qua các số */
.pagination-product a:hover:not(.active) {
    background-color: #050A30; /* Đổi sang màu xanh navy khi hover */
    color: #fff;
    border-color: #050A30;
}
/* --- News Page Style --- */
.news-container {
   max-width: 1250px;
    margin: 30px auto;
    padding: 0 15px;
    display: block;
}

.news-intro {
  width: 100%;
    margin-bottom: 30px;
}

.news-intro h1 {
    font-size: 26px;
    margin-bottom: 10px;
}

.news-intro p {
    color: #666;
    line-height: 1.6;
}

.news-section {
    padding: 30px 0;
    max-width: 1250px;
    margin: 0 auto;
}

/* Hệ thống Row và Col */
.row {
    display: grid;
    grid-template-columns: 1.4fr 1fr; /* Chia tỉ lệ 65/35 */
    gap: 40px;
}

.section-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}

/* Bài viết nổi bật (Bên trái) */
.featured-post img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 15px;
}

.featured-post h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #000;
    line-height: 1.4;
}
.featured-post{
    text-align: left;
}

.post-date {
    display: block;
    color: #888;
    font-size: 13px;
    margin-bottom: 10px;
}

.featured-post p {
    color: #555;
    line-height: 1.6;
    font-size: 15px;
}

/* Danh sách xem nhiều (Bên phải) */
.side-post-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    align-items: flex-start; /* Đảm bảo nội dung luôn căn đỉnh cùng ảnh */
}

.side-post-item img {
    width: 180px;
    height: 101px;
    object-fit: cover;
    border-radius: 4px;
}

.side-post-info h4 {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 5px;
    color: #333;
    text-align: left;
}
.side-post-info .post-date {
    font-size: 12px;
    color: #999;
    text-align: left;
}
.side-post-info {
    
}

/* News Grid (3 columns) */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.news-card img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

.news-card-body h4 {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
    height: 42px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.news-card-body p {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}
/* Khung nút tròn bọc bên ngoài */
.back-to-top-btn {
  position: fixed;
  bottom: 40px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 2px solid #0d3b85; /* Màu xanh thương hiệu của bạn */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

/* Định dạng cho ảnh PNG mũi tên bên trong */
.back-to-top-btn .arrow-up-png {
  width: 20px; /* Điều chỉnh kích thước mũi tên cho vừa vặn */
  height: 20px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Class hiển thị nút khi cuộn chuột xuống */
.back-to-top-btn.show {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hiệu ứng khi di chuột vào nút (Hover) */
.back-to-top-btn:hover {
  background-color: #0d3b85; /* Nền chuyển sang màu xanh */
}

.back-to-top-btn:hover .arrow-up-png {
  transform: translateY(-3px); /* Mũi tên nhích nhẹ lên */
  
  /* Khử màu cũ và chuyển ảnh PNG thành màu TRẮNG tinh để nổi bật trên nền xanh */
  filter: brightness(0) invert(1); 
}

.back-to-top-btn:hover .arrow-up-icon {
  transform: translateY(-3px); /* Mũi tên nhích nhẹ lên khi hover tạo cảm giác chuyển động */
}

/* Khung bao ngoài phần nhận sỉ */
.wholesale-section {
  position: relative;
  width: 100%;
  height: 480px; /* Chiều cao hiển thị của dải hình ảnh ngang */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-image: url('image/may-ao-thun-co-tron.jpg'); /* Thay đường dẫn ảnh của bạn ở đây */
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 40px; /* Tạo khoảng cách với phần tin tức phía trên */
}

/* Lớp phủ mờ (Overlay) giúp làm nổi bật chữ */
.wholesale-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Khung chứa nội dung bên trong */
.wholesale-content {
  position: relative;
  z-index: 2; /* Đảm bảo chữ luôn nằm trên lớp nền mờ */
  width: 100%;
  text-align: center;
  padding: 0 15px;
}

/* Điều chỉnh lại Button cho nhỏ gọn và tinh tế hơn */
.wholesale-btn {
  display: inline-block;
  
  /* ĐÃ THAY ĐỔI: Thu nhỏ độ dày bọc ngoài (padding) từ 16px 40px xuống 12px 32px */
  padding: 12px 32px;
  
  /* ĐÃ THAY ĐỔI: Hạ cỡ chữ xuống 18px (vừa sang vừa nét, không bị quá to) */
  font-size: 18px;         
  
  font-weight: 700;        
  color: #ffffff;          
  text-transform: uppercase;
  text-decoration: none;   
  background-color: #0d3b85; 
  border: 2px solid #ffffff; 
  border-radius: 30px;     
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25); 
  transition: all 0.3s ease; 
}
/* Hiệu ứng tương tác khi di chuột vào Button (Hover) */
.wholesale-btn:hover {
  background-color: #ffffff; /* Đổi nền sang trắng */
  color: #0d3b85;            /* Đổi chữ sang màu xanh đậm */
  border-color: #0d3b85;     /* Đổi viền sang màu xanh */
  transform: scale(1.05);    /* Nút phóng to nhẹ lên một chút tạo độ nhạy */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/*Details*/
/* --- Giao diện Chi tiết sản phẩm (UI 1.jpg) --- */
.product-detail-container {
    display: flex;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.detail-left-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.main-image-box {
    position: relative;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  overflow: hidden; /* Cắt phần ảnh thừa khi zoom */
  background: #fff;
  cursor: zoom-in;
  
}

.main-image-box img {
   width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease; /* Tạo hiệu ứng phóng to thu nhỏ mượt mà */
  transform-origin: center center;
}
.main-image-box:hover img {
  transform: scale(2);
}

/* Cột thông tin bên phải */
.detail-right-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.detail-right-col h1 {
    font-size: 26px;
    color: #1e293b;
    margin-bottom: 10px;
    line-height: 1.3;
    font-weight: 700;
}

.detail-short-desc {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Các nút bấm hành động giống mẫu 1.jpg */
.action-buttons-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 15px;
}

.btn-large-blue {
    background-color: #0076ff;
    color: #ffffff;
    text-align: center;
    padding: 14px;
    font-weight: bold;
    font-size: 16px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.btn-sub-zalo {
    background-color: #006cf0;
    color: white;
    text-align: center;
    padding: 12px;
    font-weight: bold;
    border-radius: 6px;
    text-decoration: none;
}

.btn-sub-hotline {
    background-color: #e62e3c;
    color: white;
    text-align: center;
    padding: 12px;
    font-weight: bold;
    border-radius: 6px;
    text-decoration: none;
}

.size-guide-link {
    color: #00a3ad;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 25px;
    display: inline-block;
}

.size-guide-link:hover {
    text-decoration: underline;
}

/* Khối thông tin tư vấn liên hệ cuối */
.contact-info-block {
    border-top: 1px dotted #cbd5e1;
    padding-top: 20px;
}

.contact-info-block h3 {
    font-size: 14px;
    color: #334155;
    margin-bottom: 12px;
    font-weight: bold;
}

.info-list-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: #334155;
}

.info-list-items span.highlight-red {
    color: #e62e3c;
    font-weight: 600;
}
/* --- CSS CHO KHỐI THÔNG TIN SẢN PHẨM LIÊN TỤC TỪ TRÊN XUỐNG --- */
.product-info-sections-wrapper {
  margin-top: 30px;
}

.info-content-block {
  background: #ffffff;
  padding: 60px;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
  margin-bottom: 25px; /* Tạo khoảng cách đều giữa các mục từ trên xuống */
}

.info-content-block h2 {
  font-size: 18px;
  color: #0f172a;
  margin-top: 0;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f1f5f9; /* Đường gạch chân nhẹ ngăn cách tiêu đề */
  font-weight: 700;
}

.info-content-block p, .info-content-block li {
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
}

/* Định dạng bảng giá sạch sẽ */
.price-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.price-table th, .price-table td {
  border: 1px solid #e2e8f0;
  padding: 12px;
  text-align: left;
  font-size: 14px;
}

.price-table th {
  background-color: #f8fafc;
  color: #0f172a;
  font-weight: 600;
}
.size-image-box{
    margin: 20px auto 0 auto; /* auto ở 2 bên sẽ tự động căn giữa khối */
  max-width: 650px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
/* --- CSS LÀM ĐẸP THẺ SẢN PHẨM VÀ NÚT BẤM ĐỒNG BỘ --- */

/* Loại bỏ gạch chân mặc định của link sản phẩm */
.product-card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Định dạng khối thông tin dưới ảnh */
.product-info {
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

/* Định dạng tiêu đề chữ sản phẩm */
.product-card-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: #1e293b;
  margin: 0 0 12px 0;
  /* Giới hạn text tối đa 2 dòng, quá 2 dòng tự động thêm dấu ... */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 42px; 
}

/* KHỐI NÚT BẤM XỊN: Xóa bỏ hoàn toàn viền xấu, bo góc mượt mà */
.btn-shop-contact {
  width: 100%;
  background-color: #08104c; /* Màu xanh chuẩn trang chi tiết */
  color: #ffffff;
  border: none; /* Xóa viền đen mặc định */
  padding: 10px 15px;
  font-size: 13px;
  font-weight: bold;
  border-radius: 6px; /* Bo góc mượt */
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all 0.2s ease-in-out;
  text-align: center;
  pointer-events: none; /* Click xuyên qua nút ăn vào thẻ <a> để chuyển trang detail */
}

/* Hiệu ứng khi lướt chuột vào ô sản phẩm thì nút bấm sáng lên */
.product-card:hover .btn-shop-contact {
  background-color: #050A30; /* Xanh đậm hơn chút kích thích click */
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
}