/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* === BIẾN CSS TOÀN CỤC === */
:root {
  /* 1. Bảng màu (Color Palette) */
  --color-text: #402869;  

 

  /* 4. Hiệu ứng (Effects) */
  --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Đổ bóng nhẹ nhàng */
  --transition-speed: 0.3s; /* Tốc độ cho các hiệu ứng chuyển động */
}
.nav-dropdown .menu-item-has-children>a, .nav-dropdown .nav-dropdown-col>a, .nav-dropdown .title>a {
    color: var(--color-text);
	font-size:16px!important;
   
} 
.nav-dropdown-bold .nav-column li>a:hover, .nav-dropdown-bold.dark .nav-column li>a:hover, .nav-dropdown.nav-dropdown-bold.dark>li>a:hover, .nav-dropdown.nav-dropdown-bold>li>a:hover {
    background-color: var(--color-text);
    color: #fff !important;
	padding: 10px 20px 10px 20px;
	
	
}
ul.sub-menu.nav-dropdown.nav-dropdown-bold { 
width: 280px!important;	

}
.nav-dropdown .menu-item-has-children>a, .nav-dropdown .nav-dropdown-col>a, .nav-dropdown .title>a {
   
    text-transform: none;
}
.row--col-1 {
    background-image: url('https://phienbanlotxac.thammylinhanh.vn/wp-content/uploads/2025/08/phienbanlotxac-thammylinhanh-vn-63-scaled.webp');
    background-size: contain; 
    background-position: center; 
    background-repeat: no-repeat; 
}


/* Áp dụng Font Albula Pro cho các tiêu đề */



/* --- HEADER --- */
.card-header {
	position: relative; /* Cần thiết để ::before định vị theo */
            z-index: 1; /* Đảm bảo nội dung header nổi lên trên ::before */
    display: flex;
    align-items: stretch;
    font-size: 14px;
    font-weight: 500;
    color: #503F8D;
    margin-bottom: 12px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
        }

        /* --- THAY ĐỔI CHÍNH: DÙNG ::BEFORE CHO BACKGROUND --- */
      

        .card-header .icon {
            width: 16px;
            height: 16px;
            margin-right: 8px;
        }
.card-header:after {
	content: '';
    position: absolute;
    top: -7px;
    left: -8px;
    width: 100%;
    height: 130%;
    background-image: url(https://phienbanlotxac.thammylinhanh.vn/wp-content/uploads/2025/08/phienbanlotxac-thammylinhanh-vn.webp);
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    z-index: -1;
}
.card-header p {
	margin-bottom:0px;
}
        .sub-title {
            font-size: 26px;
            font-weight: 500;
            line-height: 1.2;
            color: #503F8D;
            margin: 0;
        
        }

        .main-title {
            font-size: 35px;
            font-weight: bold;
            line-height: 1.2;
            color: #503F8D;
            margin: 0;
            margin-bottom: 30px;
        }
        .stats-grid {
            display: grid;
            gap: 25px;
        }
        
        .stat-number {
            font-size: 65px;
            font-weight: 900;
            color: #BF9E2B;
            line-height: 1;
            margin: 0;
        }

        .stat-label {
            font-size: 20px;
            color: #503F8D;
            font-weight: 500;
            margin: 0;
            margin-top: 4px;
        }

.sec__3--pblx ul li  {
	font-size: 20px;
    font-weight: 500;
    color: #503F8D;
}
.sec__3--pblx {
	padding: 100px 0;
}
.sec__3--pblx  .text-box-1 {
	    padding-left: 40px;
}
.sec__3--pblx  .text-box-1:before{
	    content: '';
    position: absolute;
    top: -20%;
    left: 0%;
    width: 123%;
    height: 134%;
    background-image: url(https://phienbanlotxac.thammylinhanh.vn/wp-content/uploads/2025/08/phienbanlotxac-thammylinhanh-vn-4.webp);
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;

}  
/*************** Section face  ***************/
        /* Section đệm để tạo không gian cuộn */
        .spacer-section {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            background-color: #2c2c2c;
        }
        .spacer-section h1 {
            font-size: 3rem;
            opacity: 0.8;
        }

        /* Section chứa ảnh và animation */
        .animated-section {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* KHUNG CHỨA CHÍNH */
        .annotation-container {
            position: relative;
         
            width: 92%;
       
            overflow: hidden;
        }

        .annotation-container img {
            display: block;
            width: 100%;
            height: auto;
        }

        /* LỚP SVG VÀ CÁC THÀNH PHẦN BÊN TRONG */
        .annotation-svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .annotation-svg line {
            stroke: white;
            stroke-width: 1.5;
            stroke-linecap: round;
            opacity: 0;
        }

        .annotation-svg circle {
            fill: white;
            opacity: 0;
            transform-origin: center;
            transform: scale(0.5);
        }

        /* CÁC Ô CHÚ THÍCH */
        .annotation-note {
            position: absolute;
            font-size: 17px;
			color:#503F8D;
            line-height: 1.4;
            font-weight:600;
            pointer-events: none;
            opacity: 0;
            transform: translateY(10px);
            max-width: 24%;
        }
        
        /* === KEYFRAMES VÀ CÁC LỚP ANIMATION === */
        @keyframes draw-line {
            from { opacity: 1; stroke-dashoffset: var(--line-length); }
            to { opacity: 1; stroke-dashoffset: 0; }
        }
        .line-animated {
            animation: draw-line 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }

        @keyframes fade-in {
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        .dot-animated, .note-animated {
            animation: fade-in 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }

/* --- General Form Styling --- */

/* --- BỐ CỤC 2 CỘT --- */
.custom-form-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px; /* Khoảng cách giữa 2 cột */
}

.form-left, .form-right {
    flex: 1;
    min-width: 300px;
}

/* --- NHÃN (LABEL) --- */
.wpcf7 label {
    color: #503F8D;
	font-size:18px;
    font-weight: 500;
    display: block;
    margin-bottom: 8px;
}

/* --- CÁC Ô NHẬP LIỆU (INPUT, TEXTAREA) --- */
/* --- CÁC Ô NHẬP LIỆU (INPUT, TEXTAREA) --- */
.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 25px;
    padding: 16px 20px; /* << TĂNG PADDING DỌC ĐỂ Ô CAO HƠN */
    width: 100%;
    box-sizing: border-box;
    margin-top: 0;
    font-size: 18px; /* << TĂNG CỠ CHỮ BÊN TRONG */
}

.wpcf7 textarea {
    height: 150px; /* Chiều cao ô nhập truyện */
    border-radius: 20px;
}

/* --- NÚT TẢI FILE (ĐÃ SỬA LỖI) --- */
.wpcf7 input[type="file"] {
    display: none; /* Ẩn nút mặc định */
}

.file-upload-button {
    display: inline-block; /* Đảm bảo là inline-block */
    background: #ffffff;
    color: #555 !important;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    border: 1px solid #ddd;
	width:33%!important;
    font-weight: bold;
    transition: background-color 0.3s;
}

.file-upload-button:hover {
    background-color: #f0f0f0;
}


/* --- NÚT GỬI ĐI (SUBMIT) --- */
.full-width-submit {
    flex-basis: 100%; /* Quan trọng: Buộc khối này chiếm 100% chiều rộng */
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.wpcf7 input[type="submit"] {
 	background-color: #503F8D;
    color: #fff;
    padding: 5px 30px;
    border: none;
    border-radius: 99px;
    cursor: pointer;
    font-size: 17px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.wpcf7 input[type="submit"]:hover {
    background-color: #5a4ab9; /* Màu khi di chuột qua */
}

/* --- TÙY CHỈNH KHÁC --- */

.footer-section .ft-title {
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}
.footer-section ul {
    list-style-type: none;
}
/* --- Style cho Breadcrumb (Giao diện mới) --- */
.custom-breadcrumb {
    /* Bỏ nền và padding cũ */
    background-color: transparent;
    padding: 10px 0;
    margin-bottom: 20px;
    font-size: 16px; /* Tăng cỡ chữ một chút */
}

.custom-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.custom-breadcrumb li {
    display: inline;
	margin-left: 0.4em!important;
}

/* Style cho ký tự phân cách » */
.custom-breadcrumb li.separator {
    color: #999;
	
}

/* Style cho các link, bao gồm cả link trang chủ */
.custom-breadcrumb a {
    color: #333333; /* Màu chữ đen/xám đậm */
    text-decoration: none;
    transition: color 0.2s;
}

/* Style cho icon ngôi nhà */
.custom-breadcrumb a .fa-home {
    margin-right: 5px;
}

.custom-breadcrumb a:hover {
    color: #d5c47c; /* Đổi sang màu đỏ khi hover */
}

/* Style cho mục cuối cùng (trang hiện tại) */
.custom-breadcrumb li.active {
    color: #503F8D; 
    font-weight: 500;
}

.row__the-le-pblx .col__the-le_pblx {
	margin-top:-20px;
	border-radius:15px;
	padding:2.5em 1.5em 1.5em 1.5em;
	box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);
}
.row__the-le-pblx h2 {
	color: #503F8D;  
	font-size:20px;
}
/* 1. Chỉ định các mục li trực tiếp của ol là in đậm */
.row__the-le-pblx ol > li {
	font-weight: bold;
}

/* 2. Reset các mục li bên trong ul (nếu có) về font chữ bình thường */
.row__the-le-pblx ol li ul li {
	font-weight: normal;
}


.video-container {
  /* Giá trị bo tròn góc, bạn có thể thay đổi tùy ý */
  border-radius: 20px; 
  
  /* Đây là thuộc tính quan trọng nhất để cắt phần thừa */
  overflow: hidden; 
  
  /* Đảm bảo kích thước khớp với iframe */
  width: 570px;
  height: 720px;

  /* Thêm thuộc tính này để tránh bị một đường viền mỏng ở góc trên một số trình duyệt */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transform: translateZ(0);
}

/* Đảm bảo iframe lấp đầy container và không có viền mặc định */
.video-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	.sec__2--mobile {
		display:block;
	} 
	.col-breaclcrum-mb {
		padding-bottom:0px;
		
	}	
	.row__the-le-pblx .col__the-le_pblx {
	    margin: 0 1em 0 1em;
}
	.row--section2__mobile {
		    padding: 0px 15px;
	}
.row--section2__mobile{
        background-image: url(https://phienbanlotxac.thammylinhanh.vn/wp-content/uploads/2025/08/phienbanlotxac-thammylinhanh-vn-26-scaled.webp);
        background-size: 100% 100%;
        background-position: center center;
        background-repeat: no-repeat;
        margin: 0 10px;

} 
	
.col__count--mobile{
background-image: url(https://phienbanlotxac.thammylinhanh.vn/wp-content/uploads/2025/08/phienbanlotxac-thammylinhanh-vn-32.webp);
        background-size: 100% 100%;
        background-position: center center;
        background-repeat: no-repeat;
                padding: 20px 10px 10px 15px;
        margin: 0px 18px 30px 0px;

}  
	.file-upload-button {
 
    width: 44% !important;
   
}
	.button.icon.is-small i {
    top: 0px!important;
}
	    .nav-icon .header-button .circle, .mobile-nav .header-button .circle {
        background: rgba(213, 196, 124, 1) !important;
        border-radius: 99px;
    }
.card-header:after {
    content: '';
    position: absolute;
    top: -5px;
    left: -7px;
    width: 100%;
    height: 128%;
    background-image: url(https://phienbanlotxac.thammylinhanh.vn/wp-content/uploads/2025/08/phienbanlotxac-thammylinhanh-vn.webp);
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    z-index: -1;
}
	   .off-canvas-left.mfp-ready .mfp-content, .off-canvas-right.mfp-ready .mfp-content {
        background-color: #412868;
    }
.nav-column>li>a, .nav-dropdown>li>a, .nav-vertical-fly-out>li>a, .nav>li>a {

    color: hsla(0, 0%, 100%, .8);
}
	.card-header .icon {
    width: 12px;
    height: 12px;
    margin-right: 8px;
    margin-top: 3px;
}
	
	
	
.stat-label {
    font-size: 18px;
	text-align: center;
    
}
	.wpcf7 label { 
	margin-top:15px;
	margin-bottom:10px;	
	}
.sub-title {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.2;
    color: #503F8D;
    margin-top: 20px;
}
	.main-title {
    font-size: 26px;
    font-weight: bold;
    line-height: 1.2;
    color: #503F8D;
    margin: 0;
    margin-bottom: 20px;
}
	.stat-number {
    font-size: 45px;
    font-weight: 900;
    color: #BF9E2B;
    line-height: 1;
    margin: 0;
}
	.stats-grid {
    display: grid;
    gap: 25px;
    justify-items: center;
    align-items: center;
    align-content: center;
   margin-left:-7%;
}
 .stat-number {
    text-align: center;
    }
	.wpcf7 label {
    font-size: 16px;

}
	
.wpcf7 input[type="text"], .wpcf7 input[type="tel"], .wpcf7 input[type="email"], .wpcf7 textarea { 
	margin-bottom:0px;
}
.custom-form-container {
	gap:0px;
}
}	
	
	/* ========================================= */
/* --- CSS RESPONSIVE CHO TABLET & IPAD --- */
/* ========================================= */

/* --- 1. Dành cho Tablet lớn & iPad (Chiều ngang) --- */
/* Áp dụng cho màn hình có chiều rộng từ 769px đến 1024px */
@media (max-width: 1024px) and (min-width: 769px) { 
.card-header {
    position: relative;
    z-index: 1;
    display: flex
;
    align-items: stretch;
    font-size: 14px;
    font-weight: 500;
    color: #503F8D;
    margin-top: 30px;
    margin-bottom: 12px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
}
	
	.sub-title {
    font-size: 22px; 
	}
	
	.main-title {
    font-size: 28px;
	}
	.stat-number {
		font-size: 50px;
	
	}
	.stat-label {
    font-size: 18px; 
	}
	.row-face-new {
		margin-top:-100px;
	}
	
	 .annotation-note {
            position: absolute;
            font-size: 15px;
			color:#503F8D;
            line-height: 1.4;
            font-weight:600;
            pointer-events: none;
            opacity: 0;
            transform: translateY(10px);
            max-width: 40%!important;
        }
}



.voting-container { max-width: 1200px; margin: 20px auto; padding: 15px; }
#voting-filters { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 30px; padding: 20px; background: #f9f9f9; border-radius: 8px; }
#voting-filters .filter-input { flex-grow: 1; padding: 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; }
#voting-filters .filter-button { padding: 12px 25px; border: none; background-color: #0073aa; color: white; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; }
#voting-filters .filter-button:hover { background-color: #005a87; }
.candidate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 25px; }
.candidate-item { border: 1px solid #e1e1e1; border-radius: 8px; text-align: center; padding: 20px; box-shadow: 0 4px 8px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s; }
.candidate-item:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.1); }
.candidate-image img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 4px solid #f0f0f0; }
.candidate-name { font-size: 1.4em; margin: 15px 0 5px 0; color: #333; }
.candidate-info { color: #666; margin: 4px 0; }
.vote-count { font-size: 1.1em; color: #005a87; font-weight: bold; margin: 10px 0; }
.vote-button { width: 100%; padding: 12px; font-size: 16px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; }
.vote-button:hover { background-color: #218838; }
.vote-button.voted, .vote-button:disabled { background-color: #aaa; cursor: not-allowed; }
.loader-wrapper, .no-results { text-align: center; padding: 40px; font-size: 1.2em; color: #777; }

@keyframes pulse500 {

  0% { transform: scale(1); }

  50% { transform: scale(1.1); }

  100% { transform: scale(1); }

}
.number-500 {

  animation: pulse500 2s infinite; /* Apply the 'pulse500' animation, lasting 2 seconds per cycle, and repeating infinitely */

}