/* ==========================================================================
   SECTION FAQ
   ========================================================================== */
.faq-tech-wrapper {
   margin-top: 2rem;
   margin-bottom: 2rem;
}

/* Khối bao bọc cấu trúc Accordion */
.custom-tech-accordion {
   background: transparent !important;
}

/* Định dạng từng hộp câu hỏi biệt lập */
.custom-tech-accordion .tech-faq-card {
   border: 1px solid #f1f5f9 !important;
   background-color: #ffffff !important;
   border-radius: 1rem !important;
   margin-bottom: 0.6rem !important;
   overflow: hidden;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hiệu ứng nhấc hộp nổi bật lên khi di chuột (Hover Effect) */
.custom-tech-accordion .tech-faq-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
   border-color: #e2e8f0 !important;
}

/* Định dạng thanh tiêu đề nút bấm (Mặc định khi đóng) */
.custom-tech-accordion .accordion-button {
   background-color: transparent !important;
   color: #334155 !important; /* Màu xám sẫm công nghệ Slate-700 */
   font-weight: 700 !important;
   font-size: 0.975rem;
   padding: 1rem 1.25rem !important;
   border-radius: 1rem !important;
   box-shadow: none !important;
   transition: color 0.2s ease;
}

/* Cấu trúc Icon và Text nằm ngang hàng bên trong nút */
.custom-tech-accordion .accordion-button span {
   display: flex;
   align-items: center;
   text-align: left;
   padding-right: 15px;
}

/* Màu sắc của text và Icon khi câu hỏi ĐANG ĐƯỢC MỞ ĐỂ ĐỌC (Active) */
.custom-tech-accordion .accordion-button:not(.collapsed) {
   color: #ee002d !important; /* Màu đỏ Viettel */
   background-color: #ffffff !important;
}

/* Ép Icon dấu hỏi cũng chuyển màu đỏ rực rỡ khi mở */
.custom-tech-accordion .accordion-button:not(.collapsed) i {
   color: #ee002d !important;
   opacity: 1 !important;
}

/* Tùy chỉnh mũi tên Chevron mặc định bên phải */
.custom-tech-accordion .accordion-button::after {
   background-size: 1rem;
   transition: transform 0.25s ease-in-out;
}

/* Đường vạch phân cách mờ nhẹ ngăn câu hỏi và câu trả lời */
.custom-tech-accordion .faq-divider {
   margin-top: 0;
   margin-bottom: 0.75rem;
   border: 0;
   border-top: 1px solid #f1f5f9;
   opacity: 1;
}

/* Khối nội dung câu trả lời bên trong */
.custom-tech-accordion .accordion-body {
   padding: 0 1.25rem 1.25rem 1.25rem !important;
   color: #475569 !important; /* Màu Slate-600 giúp đọc lâu không mỏi mắt */
   font-size: 0.925rem;
   line-height: 1.75 !important;
}

/* Chống bể giao diện nếu câu trả lời chứa hình ảnh, video do Admin đăng */
.custom-tech-accordion .faq-answer-content img {
   max-width: 100% !important;
   height: auto !important;
   border-radius: 0.5rem;
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
}

/* ==========================================================================
   HIỆU ỨNG THẺ BÀI VIẾT (POST CARD PREMIUM)
   ========================================================================== */

/* 1. Định dạng khung thẻ */
.post-card-custom {
   border-radius: 16px;
   background-color: #ffffff;
   transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
   overflow: hidden; /* Ép ảnh không tràn ra ngoài phần bo góc */
}

/* Hiệu ứng nảy lên và tỏa bóng đổ màu đỏ nhạt khi lướt chuột */
.post-card-custom:hover {
   transform: translateY(-8px);
   box-shadow: 0 15px 30px rgba(238, 0, 51, 0.12) !important; 
}

/* 2. Hiệu ứng Zoom ảnh */
.post-card-custom .img-wrapper {
   display: block;
   overflow: hidden; /* Bắt buộc để ảnh zoom bên trong khung */
}
.post-card-custom .img-wrapper img {
   transition: transform 0.6s ease;
}
.post-card-custom:hover .img-wrapper img {
   transform: scale(1.08); /* Phóng to ảnh */
}

/* 3. Tối ưu Tiêu đề (Giới hạn 2 dòng để thẻ luôn bằng nhau) */
.post-card-custom .post-title-link {
   transition: color 0.3s ease;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* Cắt chữ nếu dài quá 2 dòng, thêm dấu ... */
   -webkit-box-orient: vertical;
   overflow: hidden;
   line-height: 1.4;
}

/* Đổi màu tiêu đề sang đỏ khi lướt chuột vào THẺ */
.post-card-custom:hover .post-title-link {
   color: var(--theme-color, #ee0033) !important;
}

/* 4. Tối ưu Mô tả (Giới hạn 3 dòng) */
.post-card-custom .post-desc-text {
   display: -webkit-box;
   -webkit-line-clamp: 3; 
   -webkit-box-orient: vertical;
   overflow: hidden;
   line-height: 1.6;
}

/* 5. Hiệu ứng cho nút Xem chi tiết */
.post-card-custom .btn-outline-danger {
   transition: all 0.3s ease;
}

/* Tự động đổ màu nền và tỏa sáng nút khi lướt chuột vào THẺ */
.post-card-custom:hover .btn-outline-danger {
   background-color: var(--theme-color, #ee0033);
   color: #ffffff;
   border-color: var(--theme-color, #ee0033);
   box-shadow: 0 4px 12px rgba(238, 0, 51, 0.3);
}


/* =========================================
   HIỆU ỨNG THẺ BÀI VIẾT NGANG (SUPPORT)
   ========================================= */
.support-card {
   transition: all 0.3s ease;
}

.support-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
}

/* Đảm bảo khung ảnh bên trái có màu nền đồng nhất để làm nổi bật ảnh */
.support-card .img-wrapper {
   background-color: #f8f9fa; /* Màu nền xám nhạt (bg-light) */
}


.support-card:hover .btn-outline-danger {
   background-color: var(--theme-color, #ee0033);
   color: #ffffff;
   border-color: var(--theme-color, #ee0033);
   box-shadow: 0 4px 12px rgba(238, 0, 51, 0.3);
}


/* ==========================================================================
   TỐI ƯU TRƯỢT NGANG CHO BÀI VIẾT (1.2 THẺ - 83vw)
   ========================================================================== */
@media (max-width: 767px) {
   .post-snap-item { 
       flex: 0 0 83vw !important; 
       width: 83vw !important; 
       max-width: 83vw !important; 
   }
}