/* ==========================================================================
   TRANG CHỦ (HOME PAGE STYLES)
   ========================================================================== */
.home-banner { border-left: 6px solid var(--theme-color-alt); }
.section-title { color: #333; }
.title-line { width: 60px; height: 3px; bottom: 0; }

/* ==========================================================================
   SECTION TITLE - TIÊU ĐỀ MỤC HOME
   ========================================================================== */
.section-title {
   font-size: 1.4rem;
   color: #1f2937;
   position: relative;
   padding-bottom: 12px;
   margin-bottom: 1.5rem; 
   letter-spacing: 0.2px;
}

/* Gạch chân dải màu Gradient (Đỏ sang Vàng) */
.section-title::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 80px; 
   height: 3px;
   background: linear-gradient(90deg, var(--theme-color) 0%, var(--accent-color) 100%);
   border-radius: 50px; 
}


/* Tối ưu riêng cho Mobile */
@media (max-width: 768px) {
   .section-title {
       font-size: 1.25rem; 
       padding-bottom: 12px;
       margin-bottom: 1.5rem;
   }
   .section-title::after {
       width: 70px; 
   }
}

/* ==========================================================================
   TÙY CHỈNH BANNER TRANG CHỦ (ZOOM + PROGRESS BAR)
   ========================================================================== */
.myHeroSlider {
   border-radius: 8px;
   overflow: hidden; 
}

.banner-img-custom {
   width: 100%;
   height: auto;
   object-fit: cover;
   transition: transform 6s ease-in-out !important; 
   transform: scale(1); 
}

@media (max-width: 991px) {
   .banner-img-custom { height: 220px; }
}

/* BỔ SUNG: CĂN CHỈNH KÍCH THƯỚC BANNER CHO MOBILE */
@media (max-width: 768px) {
   .banner-img-custom {
       height: 100%; 
       min-height: 180px; 
       object-fit: cover; 
       border-radius: 4px; 
   }
}

/*Zoom Ảnh*/
.myHeroSlider .swiper-slide-active .banner-img-custom {
   transform: scale(1);
}

.myHeroSlider .swiper-pagination-progressbar {
   background: rgba(255, 255, 255, 0.4); 
   height: 2px !important; 
   bottom: 0 !important; 
   top: auto !important; 
}

.myHeroSlider .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
   background: var(--accent-color) !important; 
}

/* GỘP CLASS CHO BÀI VIẾT VÀ SẢN PHẨM */
.post-content img, .product-content img {
   max-width: 100% !important;
   height: auto !important;
   object-fit: contain; 
   display: block; 
   margin: 10px auto; 
}
.post-content iframe, .product-content iframe {
   max-width: 100% !important;
}
.post-content p, .post-content span,
.product-content p, .product-content span {
   background-color: transparent !important;
}

/* ==========================================================================
   TIN KHUYẾN MẠI TRANG CHỦ (SWIPER CAROUSEL & HOVER)
   ========================================================================== */
.promo-section .swiper-pagination-bullet {
   background-color: #cccccc;
   opacity: 1;
   transition: all 0.3s ease;
}

.promo-section .swiper-pagination-bullet-active {
   background-color: var(--theme-color); 
   transform: scale(1.3);
}

.promo-section .card-img-top {
   transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.promo-section .card:hover .card-img-top {
   transform: scale(1.08); 
}

/* ==========================================================================
   KHỐI 1: PHẦN GỢI Ý CHỌN GÓI CƯỚC THEO ĐỐI TƯỢNG (HOME SUGGEST)
   ========================================================================== */
.home-suggest-section {
   padding: 20px 0 40px 0;
}

/* --- Cột bên trái: Tiêu đề & Mẹo chọn gói --- */
.suggest-left-title {
   font-size: 28px;
   font-weight: 800;
   color: #2d3748;
   text-transform: uppercase;
   line-height: 1.4;
   position: relative;
   padding-left: 18px;
}
.suggest-left-title::before {
   content: "";
   position: absolute;
   left: 0;
   top: 5px;
   height: 80%;
   width: 6px;
   background: var(--theme-color);
   border-radius: 10px;
}

/* --- Cột bên phải: Các thẻ đối tượng dạng hộp nằm ngang --- */
.suggest-card {
   background: #ffffff;
   border-radius: 16px;
   padding: 22px 25px;
   margin-bottom: 18px;
   border: 1px solid rgba(0,0,0,0.05);
   box-shadow: 0 5px 15px rgba(0,0,0,0.02);
   display: flex;
   align-items: flex-start; /* Ép icon luôn cố định ở đỉnh, không bị đẩy xuống khi chữ dài */
   transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.suggest-card:hover {
   transform: translateX(10px);
   border-left: 4px solid var(--theme-color);
   box-shadow: 0 12px 25px rgba(var(--theme-color-rgb), 0.08);
}

/* Vòng tròn bọc icon của phần gợi ý đối tượng */
.suggest-icon-wrapper {
   width: 65px;
   height: 65px;
   background: rgba(var(--theme-color-rgb), 0.08);
   color: var(--theme-color);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 26px;
   flex-shrink: 0;
   margin-right: 20px;
   transition: all 0.3s ease;
}
.suggest-card:hover .suggest-icon-wrapper {
   background: var(--theme-color);
   color: #ffffff;
   transform: scale(1.1) rotate(10deg);
   box-shadow: 0 8px 15px rgba(var(--theme-color-rgb), 0.2);
}

.suggest-content h4 {
   font-size: 18px;
   font-weight: 800;
   color: #2d3748;
   margin-bottom: 8px;
}

/* Xóa gạch chân mặc định của thẻ <a> chứa nhãn dán */
.suggest-content p a {
   text-decoration: none !important;
   display: inline-block;
}

/* Nhãn dán (Badge) làm nổi bật tên gói cước */
.suggest-badge {
   display: inline-block;
   background-color: var(--theme-color);
   color: #ffffff !important; /* Ép màu trắng để không bị ảnh hưởng bởi thẻ a */
   padding: 4px 10px;
   border-radius: 6px;
   font-size: 13px;
   font-weight: 700;
   margin-right: 5px;
   box-shadow: 0 3px 6px rgba(var(--theme-color-rgb), 0.2);
   letter-spacing: 0.5px;
   transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Hiệu ứng chuyển động nảy mượt mà */
}

/* Hiệu ứng lướt chuột (Hover) - Nảy khối 3D và đậm màu hơn */
.suggest-content p a:hover .suggest-badge {
   background-color: var(--theme-color-dark);
   transform: translateY(-3px) scale(1.05);
   box-shadow: 0 6px 12px rgba(var(--theme-color-rgb), 0.4);
}

/* Hiệu ứng khi bấm click (Active) - Lún xuống tạo cảm giác bấm vật lý */
.suggest-content p a:active .suggest-badge {
   transform: translateY(0) scale(0.95);
   box-shadow: 0 2px 4px rgba(var(--theme-color-rgb), 0.2);
   background-color: var(--theme-color-hover);
}


/* ==========================================================================
   KHỐI 2: PHẦN BANNER GIỮA TRANG CHỦ & ẢNH CAM KẾT DƯỚI CÙNG
   ========================================================================== */
.home-middle-banner {
   width: 100%;
   height: auto;
   object-fit: cover;
   border-radius: 16px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
   transition: transform 0.3s ease;
}
.home-middle-banner:hover {
   transform: scale(1.008);
}

.benefit-img-container {
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 10px 30px rgba(0,0,0,0.05);
   border: 1px solid rgba(0,0,0,0.02);
}
.benefit-img-container img {
   width: 100%;
   height: auto;
   object-fit: cover;
   transition: transform 0.4s ease;
}
.benefit-img-container:hover img {
   transform: scale(1.02);
}


/* ==========================================================================
   KHỐI 3: PHẦN LÝ DO LỰA CHỌN & CAM KẾT UY TÍN (HOME BENEFIT)
   ========================================================================== */
.home-benefit-section {
   padding: 40px 0 60px 0;
}

.benefit-main-title {
   font-size: 26px;
   font-weight: 800;
   color: #2d3748;
   text-transform: uppercase;
   line-height: 1.4;
}

/* Nâng cấp các dòng cam kết thành các khối Card độc lập để kết hợp với hiệu ứng lazy-card */
.benefit-row-item {
   background: #ffffff;
   border-radius: 16px;
   padding: 22px 20px;
   margin-bottom: 16px;
   border: 1px solid rgba(0,0,0,0.03);
   box-shadow: 0 4px 15px rgba(0,0,0,0.02);
   transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.benefit-row-item:last-of-type {
   margin-bottom: 0;
}

/* Hiệu ứng nảy khối 3D mượt mà đồng bộ chuyển động toàn website */
.benefit-row-item:hover {
   transform: translateY(-5px);
   border-color: rgba(var(--theme-color-rgb), 0.2);
   box-shadow: 0 12px 25px rgba(var(--theme-color-rgb), 0.08);
}

/* Vòng tròn bọc icon của khối cam kết */
.benefit-icon-shield {
   width: 52px;
   height: 52px;
   background: rgba(var(--theme-color-rgb), 0.08);
   color: var(--theme-color);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   flex-shrink: 0;
   margin-right: 18px;
   transition: all 0.3s ease;
}
.benefit-row-item:hover .benefit-icon-shield {
   transform: scale(1.1);
   background: var(--theme-color);
   color: #ffffff;
   box-shadow: 0 6px 12px rgba(var(--theme-color-rgb), 0.2);
}

.benefit-item-text h4 {
   font-size: 16.5px;
   font-weight: 700;
   color: #2d3748;
   margin-bottom: 4px;
}
.benefit-item-text p {
   font-size: 14px;
   color: #718096;
   margin-bottom: 0;
   line-height: 1.5;
}

/* Khối hộp thông báo cam kết màu hồng nhạt dưới đáy cột */
.benefit-commit-alert {
   background: #fff5f6;
   border-left: 4px solid var(--theme-color);
   border-radius: 0 12px 12px 0;
   padding: 20px;
   margin-top: 25px;
}
.benefit-commit-alert h5 {
   font-size: 15px;
   font-weight: 700;
   color: var(--theme-color);
   margin-bottom: 6px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}
.benefit-commit-alert p {
   font-size: 14px;
   color: #4a5568;
   margin-bottom: 0;
   line-height: 1.6;
}

/* ==========================================================================
   SECTION HƯỚNG DẪN SIM 
   ========================================================================== */
.home-newsim-section {
   padding: 0px 0 0px 0;
}

.home-newsim-section .section-title {
   font-size: 24px;
   font-weight: 800;
   margin-bottom: 10px !important;
}

/* --- HỘP GIẢI ĐÁP (Q&A) --- */
.sim-alert-box {
   background: #fffcfc; 
   border: 1px solid rgba(238, 0, 51, 0.08);
   border-radius: 16px;
   padding: 24px;
   box-shadow: 0 4px 15px rgba(0,0,0,0.02);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sim-alert-box:hover {
   transform: translateY(-3px);
   box-shadow: 0 10px 25px rgba(238, 0, 51, 0.08);
}
.sim-alert-icon {
   width: 38px;
   height: 38px;
   background: linear-gradient(135deg, var(--theme-color) 0%, var(--theme-color-dark) 100%);
   color: #ffffff;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   box-shadow: 0 4px 10px rgba(var(--theme-color-rgb), 0.25);
}

/* --- KHỐI THẺ 3 BƯỚC --- */
.sim-step-card {
   background: #ffffff;
   border-radius: 16px;
   padding: 30px 20px 20px 20px;
   border: 1px solid #f1f5f9;
   box-shadow: 0 4px 10px rgba(0,0,0,0.02);
   height: 100%;
   position: relative;
   transition: all 0.3s ease;
   margin-top: 15px; 
}
.sim-step-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 20px rgba(var(--theme-color-rgb), 0.08);
   border-color: rgba(var(--theme-color-rgb), 0.15);
}
.sim-step-number {
   position: absolute;
   top: -22px;
   left: 50%;
   transform: translateX(-50%);
   width: 44px;
   height: 44px;
   background: linear-gradient(135deg, var(--theme-color) 0%, #ff2a55 100%);
   color: #ffffff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   font-weight: 800;
   box-shadow: 0 4px 10px rgba(var(--theme-color-rgb), 0.3);
   border: 3px solid #ffffff;
}

/* ==========================================================================
   THIẾT KẾ BẢNG GÓI CƯỚC SIM
   ========================================================================== */
.sim-table-wrapper {
   background: #ffffff;
   border-radius: 16px;
   border: 1px solid #e2e8f0;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
   overflow: hidden; /* Rất quan trọng để bo tròn được màu nền của Header */
   padding: 0; 
}

.sim-custom-table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 0;
}

/* ĐỔI MÀU HEADER SANG ĐỎ GRADIENT SANG TRỌNG */
.sim-custom-table thead th {
   background: linear-gradient(135deg, var(--theme-color) 0%, var(--theme-color-dark) 100%);
   color: #ffffff;
   font-weight: 800;
   font-size: 14.5px;
   text-transform: uppercase;
   padding: 16px 20px;
   border: none;
   letter-spacing: 0.5px;
}

.sim-custom-table tbody tr {
   transition: background-color 0.3s ease;
}

.sim-custom-table tbody td {
   padding: 18px 20px;
   font-size: 14.5px;
   vertical-align: middle;
   border-bottom: 1px solid #f1f5f9;
   color: #4a5568;
   transition: background-color 0.2s ease;
}

/* Hiệu ứng sọc hàng xen kẽ (Zebra) nhẹ nhàng */
.sim-custom-table tbody tr:nth-child(even) td {
   background-color: #fafbfc;
}

/* Hiệu ứng Highlight đổi màu hồng mờ khi lướt chuột qua từng hàng (Trên PC) */
.sim-custom-table tbody tr:hover td {
   background-color: rgba(238, 0, 51, 0.03) !important;
}
.sim-custom-table tbody tr:last-child td {
   border-bottom: none;
}

/* Nút ĐĂNG KÝ trong bảng */
.btn-sim-reg {
   display: inline-block;
   background: linear-gradient(135deg, var(--theme-color) 0%, #d6002f 100%);
   color: #ffffff !important;
   font-size: 13.5px;
   font-weight: 800;
   padding: 8px 22px;
   border-radius: 50px;
   border: none;
   box-shadow: 0 4px 10px rgba(238, 0, 51, 0.25);
   transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
   text-decoration: none;
   letter-spacing: 0.5px;
}
.btn-sim-reg:hover {
   transform: scale(1.06);
   box-shadow: 0 6px 15px rgba(238, 0, 51, 0.4);
   background: var(--theme-color-dark);
}

/* 1. Xóa gạch chân mặc định của thẻ a bọc ngoài */
.sim-custom-table tbody td:first-child a {
   text-decoration: none !important;
   display: inline-block;
}

/* 2. Kích hoạt thuộc tính chuyển động (Animation) cho cục Badge đỏ */
.sim-custom-table tbody td:first-child a .badge {
   transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   box-shadow: 0 3px 6px rgba(238, 0, 51, 0.2);
}

/* 3. Lướt chuột (Hover) - Nảy khối 3D, phóng to nhẹ và đậm màu lên */
.sim-custom-table tbody td:first-child a:hover .badge {
   background-color: var(--theme-color-dark) !important;
   transform: translateY(-3px) scale(1.05);
   box-shadow: 0 6px 15px rgba(238, 0, 51, 0.4);
}

/* 4. Khi bấm (Active) - Lún xuống tạo cảm giác vật lý */
.sim-custom-table tbody td:first-child a:active .badge {
   transform: translateY(0) scale(0.95);
   box-shadow: 0 2px 4px rgba(238, 0, 51, 0.2);
   background-color: var(--theme-color-hover) !important;
}

/* ==========================================================================
   MOBILE RESPONSIVE: BIẾN BẢNG THÀNH CÁC CARD 3D TRÊN ĐIỆN THOẠI
   ========================================================================== */
@media (max-width: 767px) {
   /* Chỉnh hộp cảnh báo trên ĐT */
   .sim-alert-box { padding: 18px; }
   .sim-alert-box h4 { font-size: 17.5px; }
   .sim-alert-box p { font-size: 14.5px; text-align: justify; }

   /* Hủy viền và nền của khung bọc bảng */
   .sim-table-wrapper {
       background: transparent;
       border: none;
       box-shadow: none;
       overflow: visible;
   }
   
   /* Ẩn Header Bảng */
   .sim-custom-table thead {
       display: none;
   }

   /* Biến các hàng (tr) thành Khối hộp Card 3D */
   .sim-custom-table tbody tr {
       display: flex;
       flex-direction: column;
       background: #ffffff;
       border-radius: 16px;
       border: 1px solid rgba(0,0,0,0.04);
       box-shadow: 0 5px 18px rgba(0,0,0,0.04);
       margin-bottom: 20px;
       padding: 20px;
       position: relative; /* Dùng làm gốc tọa độ cho giá tiền */
       transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
   }

   /* Hiệu ứng nảy Card siêu xịn khi lướt (Touch/Hover) trên Mobile */
   .sim-custom-table tbody tr:hover,
   .sim-custom-table tbody tr:active {
       transform: translateY(-4px);
       box-shadow: 0 10px 25px rgba(238, 0, 51, 0.1);
       border-color: rgba(238, 0, 51, 0.2);
   }

   /* Bỏ màu sọc xen kẽ trên điện thoại */
   .sim-custom-table tbody tr:nth-child(even) td,
   .sim-custom-table tbody tr:hover td {
       background-color: transparent !important;
   }

   /* Ô 1: Tên gói */
   .sim-custom-table tbody td:nth-child(1) {
       padding: 0 0 12px 0;
       border-bottom: none;
   }

   /* Ô 2: Giá tiền (Treo ở góc trên cùng bên phải) */
   .sim-custom-table tbody td:nth-child(2) {
       position: absolute;
       top: 22px;
       right: 20px;
       padding: 0;
       border-bottom: none;
       font-size: 18px !important;
       }

   /* Ô 3: Nội dung chi tiết (Nằm giữa, có nét đứt) */
   .sim-custom-table tbody td:nth-child(3) {
       padding: 12px 0;
       border-top: 1px dashed #cbd5e1;
       border-bottom: none;
   }

   /* Ô 4: Nút đăng ký (Kéo dài 100%) */
   .sim-custom-table tbody td:nth-child(4) {
       padding: 10px 0 0 0;
       border-bottom: none;
   }
   .sim-custom-table tbody td:nth-child(4) .btn-sim-reg {
       display: block;
       width: 100%;
       padding: 12px 0;
       font-size: 15px;
   }
}

/* Khối lưu ý cuối cùng */
.sim-note-box {
   background-color: #fffbeb;
   border: 1px solid #fef3c7;
   border-left: 5px solid #d97706;
   border-radius: 10px;
   padding: 18px 22px;
   margin-top: 25px;
   box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

/* ========================================================
   TIÊU ĐỀ DANH MỤC RESPONSIVE (PC & MOBILE) TRANG CHỦ
======================================================== */
/* Link trong H2: Giữ nguyên màu chữ và style mà H2 đang có */
.home-title-link {
   color: inherit;
   text-decoration: none;
   transition: color 0.3s ease;
}

/* --------------------------------------------------------
   1. GIAO DIỆN DI ĐỘNG (Dưới 768px)
-------------------------------------------------------- */
@media (max-width: 767.98px) {
   .home-section-header {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 6px;
   }

   .home-view-more-btn .v-text {
       display: none;
   }

   .home-view-more-btn {
       text-decoration: none;
       color: inherit;
   }

   .home-view-more-btn .v-icon {
       font-size: 0.85em;
       transform: translateY(-7px);
   }

   .home-section-header:hover .home-title-link,
   .home-section-header:hover .home-view-more-btn {
       color: var(--theme-color);
   }
}

/* --------------------------------------------------------
   2. GIAO DIỆN MÁY TÍNH (Từ 768px trở lên)
-------------------------------------------------------- */
@media (min-width: 768px) {
   .home-section-header {
       position: relative; /* Làm điểm tựa cho nút Xem thêm ở góc phải */
       width: 100%;
   }

   .home-view-more-btn {
       position: absolute;
       right: 0;
       top: 50%;
       transform: translateY(-50%);
       display: inline-flex;
       align-items: center;
       gap: 6px;
       font-size: 13px;
       font-weight: 600;
       text-decoration: none;
       color: var(--theme-color);
       background-color: rgba(var(--theme-color-rgb), 0.08); 
       padding: 6px 14px;
       border-radius: 20px;
       transition: all 0.3s ease;
       z-index: 2;
   }

   .home-view-more-btn .v-icon {
       transform: translateY(1px);
       transition: transform 0.3s ease;
   }

   /* HOVER TRÊN MÁY TÍNH */
   .home-section-header:hover .home-title-link {
       color: var(--theme-color);
   }

   .home-view-more-btn:hover {
       background-color: var(--theme-color);
       color: #ffffff !important;
       box-shadow: 0 4px 12px rgba(var(--theme-color-rgb), 0.3);
   }

   .home-view-more-btn:hover .v-icon {
       transform: translate(3px, 1px);
   }
}