/*
Theme Name: Flatsome Child
Description: NamKiem developed for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.11.3
*/

/* =========================================
   1. CẤU HÌNH CHUNG & TYPOGRAPHY
   ========================================= */
/* Màu tiêu đề đồng bộ */
h1, h2, h3, h4, h5, h6 {
    color: var(--primary-color);
}

/* Kích thước Heading (tùy chỉnh nếu cần đè lên theme) */
.h1, h1 { font-size: 2.5rem !important; }
.h2, h2 { font-size: 2rem !important; }
.h3, h3 { font-size: 1.5rem !important; }

/* =========================================
   2. SECTION GIỚI THIỆU (PHẦN ĐẦU)
   ========================================= */
/* Thiết lập vị trí để chứa hình trang trí */
.section-gioi-thieu {
    position: relative !important;
    overflow: visible; 
}

/* Hình trang trí bay bay (Dấu cộng/Hình thoi) */
.section-gioi-thieu::before,
.section-gioi-thieu::after {
    content: "";
    position: absolute;
    width: 150px; 
    height: 150px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1; 
    pointer-events: none; 
}

/* Hình bên trái */
.section-gioi-thieu::before {
    background-image: url('/wp-content/uploads/2025/11/01-1.png'); 
    top: 20%;  
    left: -10px; 
    animation-name: veritcal;
    animation-timing-function: linear;
    animation-duration: 12s;
    animation-iteration-count: infinite;
}

/* Hình bên phải */
.section-gioi-thieu::after {
    background-image: url('/wp-content/uploads/2025/11/02-1.webp'); 
    bottom: 10%; 
    right: -20px; 
    animation: spin2 20s linear infinite;
}

/* Bo góc cho ảnh giới thiệu */
.img-li-do .img-inner, 
.img-gt .img-inner,
.img-gt-1-inner .img-inner {
    border-radius: 10px;
}

/* Ảnh nhỏ bay lên xuống (Ảnh số 2) */
.img-gt-2 .col-inner .img-gt-2-inner .img-inner {
    border: 5px solid white;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* Thêm bóng cho đẹp */
}

.img-gt-2-inner .img-inner {
    animation-name: veritcal;
    animation-timing-function: linear;
    animation-duration: 12s;
    animation-iteration-count: infinite;
}

/* Ẩn hình trang trí trên mobile */
@media (max-width: 768px) {
    .section-gioi-thieu::before,
    .section-gioi-thieu::after {
        display: none;
    }
}

/* =========================================
   3. NÚT BẤM (BUTTONS)
   ========================================= */
/* Nút đỏ viền tròn */
.button-red {
    padding-top: 7px;
    padding-bottom: 5px;
}

.button-red:hover {
    background-color: #ffecec !important;
    color: var(--primary-color) !important;
}

/* Nút CTA (Kêu gọi hành động) */
.button-CTA {
    background-color: white;
    color: var(--primary-color) !important;
    border: none;
    padding-top: 7px;
    padding-bottom: 5px;
}

.button-CTA:hover {
    background-color: red !important; /* Hoặc var(--primary-color) nếu muốn đỏ */
    color: white !important;
}

/* =========================================
   4. SECTION DỊCH VỤ (HOVER HIỆU ỨNG)
   ========================================= */
.dich-vu-col .col-inner {
	background-color: white;
}

.dich-vu-col .col-inner:hover {
	transition: 0.3s ease; 
	background-color: var(--primary-color);
}

.dich-vu-col .col-inner:hover .icon-box > .icon-box-text,
.dich-vu-col .col-inner:hover .icon-box-text h3 {
	transition: 0.3s ease; 
	color: white;
}

.dich-vu-col .col-inner:hover .icon-box .icon-box-img img,
.giai-phap-col .col-inner:hover .icon-box-img img {
	transition: 0.3s ease; 
	filter: invert(1) brightness(1000);
}
.dich-vu-col .col-inner {
    background-color: white;
    transition: 0.3s ease; 
    border-radius: 10px; /* Thêm bo góc cho đẹp */
}

/* Hover vào đổi màu nền thành màu đỏ chủ đạo */
.dich-vu-col .col-inner:hover {
    background-color: var(--primary-color);
}


/* Đổi màu chữ thành trắng khi hover */
.dich-vu-col .col-inner:hover .icon-box > .icon-box-text,
.dich-vu-col .col-inner:hover .icon-box-text h3,
.dich-vu-col .col-inner:hover .icon-box-text p {
    transition: 0.3s ease; 
    color: white !important;
}

/* Đổi màu icon sang trắng khi hover (Invert màu) */
.dich-vu-col .col-inner:hover .icon-box .icon-box-img img {
    transition: 0.3s ease; 
    filter: invert(1) brightness(1000);
}

/* =========================================
   5. SECTION GIÁ TRỊ CỐT LÕI & SỐ LIỆU
   ========================================= */
/* Chuyển icon màu đen sang trắng (Dùng cho nền đỏ) */
.gtcl-col img .icon-box-number img {
    filter: invert(1) brightness(1000);
}


/* =========================================
   6. SECTION CHỨNG NHẬN & CHỨNG CHỈ
   ========================================= */
.row-chung-nhan .col-inner .img-inner {
    border: 2px solid #e1e1e1; /* Màu xám nhạt */
    height: 480px !important;    
    width: 100% !important;      
    display: flex !important;
    align-items: center;
    justify-content: center;   
    padding: 10px;    
    background: #fff;
    border-radius: 5px;
	
}
.slider-style-shadow .flickity-slider>:before {
	background-image: none;
}

/* =========================================
   7. KEYFRAMES ANIMATION (HIỆU ỨNG ĐỘNG)
   ========================================= */
/* Hiệu ứng bay lên xuống */
@keyframes veritcal {
    0% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, 30px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* Hiệu ứng xoay tròn */
@keyframes spin2 {
    from { transform: rotateZ(0); }
    to { transform: rotateZ(360deg); }
}

/* Container bao ngoài để hỗ trợ xem trên mobile nếu bảng quá rộng */
.table-responsive {
    overflow-x: auto;
    margin: 20px 0;
}

.custom-legal-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    color: #333;
    border: 1px solid #dee2e6;
    font-size: 15px;
    line-height: 1.6;
}

/* Header chính của bảng */
.custom-legal-table thead tr, 
.custom-legal-table .table-header {
    background-color: #0056b3;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.custom-legal-table td {
    padding: 15px;
    border: 1px solid #dee2e6;
    vertical-align: top;
}

/* Cột số thứ tự */
.custom-legal-table td:first-child {
    text-align: center;
    font-weight: bold;
    width: 50px;
    background-color: #f8f9fa;
    color: var(--primary-color);
}

/* Hiệu ứng khi di chuột qua hàng */
.custom-legal-table tbody tr:hover {
    background-color: #f1f4f9;
    transition: background-color 0.2s ease;
}

/* Định dạng phần tiêu đề mục II lớn */
.section-title {
    background-color: #e9ecef !important;
    font-weight: bold;
    color: var(--primary-color);
}

/* Làm đẹp các danh sách con bên trong bảng */
.custom-legal-table i {
    color: #6c757d;
}