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


/* =============================================================
   1. GLOBAL & UI HELPERS (Dùng chung toàn web)
   ============================================================= */
body { overflow-x: hidden !important; }
.icon-angle-right::before, .icon-angle-left::before { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important; font-weight: 300 !important; font-size: 0.85em !important; display: inline-block; line-height: 1; vertical-align: middle; position: relative; top: -2px; transition: transform .18s ease; color: currentColor; }
.icon-angle-right::before { content: "\f061" !important; }
.icon-angle-left::before { content: "\f060" !important; }
.icon-angle-right { margin-left: 0.2rem !important; }
.icon-angle-left { margin-right: 0.4rem; }
a:hover .icon-angle-right::before, .button:hover .icon-angle-right::before, .icon-angle-right:hover::before { transform: translateX(4px); }
a:hover .icon-angle-left::before, .button:hover .icon-angle-left::before, .icon-angle-left:hover::before { transform: translateX(-4px); }
.ai-r9-wrap, .ai-r9-wrap img { border-radius: 10px !important; margin-bottom: 2px !important; }
.ai-r9-wrap { overflow: hidden; }
.ai-r9-wrap::before, .ai-r9-wrap::after { border-radius: inherit !important; }

/* =============================================================
   2. ANHCHUONG EVENT - HEADER FIX (CHỈ DESKTOP)
   ============================================================= */
@media screen and (min-width: 1025px) {
.header-main .flex-left.flex-grow { display: none !important; }
.header-main .flex-right { flex-grow: 1 !important; max-width: none !important; }
.header-main .flex-right > .nav { background-color: #ed1c24; height: 55px; margin-left: 5px; border-radius: 0 0 0 30px; display: flex !important; align-items: center; width: calc(100% - 5px) !important; position: relative; z-index: 10; padding: 0 !important; }
.header-main .flex-right > .nav::after { content: ""; position: absolute; top: 0; left: 99%; width: 3000px; height: 100%; background-color: #ed1c24; z-index: -1; }
.header-main .container { padding-right: 0 !important; }
.header-main .flex-right .nav > li.html { flex-grow: 1 !important; width: 100% !important; display: flex !important; }
.custom-header-content { display: flex !important; width: 100% !important; justify-content: space-between !important; align-items: center; padding: 0 25px 0 30px !important; }
.custom-phone-block { display: flex; align-items: center; }
.phone-icon-ring { background-color: #ffeb3b; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12px; animation: phone-shake 1.5s infinite ease-in-out; }
.phone-icon-ring i { color: #e53935; font-size: 17px; }
.phone-info { color: #ffeb3b; font-size: 15px; font-weight: 600; white-space: nowrap; }
.phone-info strong { color: #ffffff; font-size: 1.35em; margin-left: 5px; }
/* 3. STYLE THANH SEARCH - FIX LỖI LỆCH TÂM */
.custom-search-block { width: 340px; }
.custom-search-block .searchform-wrapper { border: 1px solid #d2d2d2 !important; border-radius: 50px !important; background-color: #fff !important; height: 36px !important; position: relative !important; padding: 0 !important; box-shadow: none !important; }
.custom-search-block .search-field { border: none !important; height: 36px !important; padding: 0 45px 0 20px !important; font-size: 14px; background: transparent !important; box-shadow: none !important; line-height: 36px !important; }
.custom-search-block .ux-search-submit { position: absolute !important; top: 2px !important; right: 3px !important; width: 30px !important; height: 30px !important; background-color: #e53935 !important; color: #fff !important; border-radius: 50% !important; padding: 0 !important; margin: 0 !important; border: none !important; min-width: 30px !important; min-height: 30px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.custom-search-block .ux-search-submit i { font-size: 14px !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; display: block !important; }
@keyframes phone-shake { 0% { transform: rotate(0); } 10% { transform: rotate(15deg); } 20% { transform: rotate(-15deg); } 30% { transform: rotate(15deg); } 40% { transform: rotate(-15deg); } 50% { transform: rotate(0); } 100% { transform: rotate(0); } }
}

/* =============================================================
   3. ACH-SECTION (MOBILE-FIRST)
   ============================================================= */
.ach-section { display: flex !important; flex-direction: row !important; align-items: center !important; width: 100% !important; gap: 10px !important; margin: 15px 0 !important; }
.ach-section .ach-icon { order: 1; }
.ach-section .ach-text { order: 2; }
.ach-section .ach-line { order: 3; }
.ach-section.ach-reverse .ach-line { order: 1; }
.ach-section.ach-reverse .ach-text { order: 2; }
.ach-section.ach-reverse .ach-icon { order: 3; }
.ach-icon { width: 28px !important; height: 28px !important; min-width: 28px !important; background-color: #ffca28 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; color: white !important; flex-shrink: 0 !important; }
.ach-icon svg { width: 16px; height: 16px; }
.ach-text { color: #034862 !important; font-size: 16px !important; font-weight: 800 !important; text-transform: uppercase !important; margin: 0 !important; white-space: nowrap !important; line-height: 1 !important; }
.ach-line { flex-grow: 1 !important; height: 1.5px !important; background-color: #ed1c24 !important; }

@media screen and (min-width: 550px) {
.ach-section { gap: 12px !important; }
.ach-text { font-size: 20px !important; }
.ach-icon { width: 34px !important; height: 34px !important; min-width: 34px !important; }
.ach-icon svg { width: 20px; height: 20px; }
.ach-line { height: 2px !important; }
}

@media screen and (min-width: 1025px) {
.ach-section { gap: 15px !important; margin: 20px 0 !important; }
.ach-text { font-size: 26px !important; }
.ach-icon { width: 40px !important; height: 40px !important; min-width: 40px !important; }
.ach-icon svg { width: 24px; height: 24px; }
.ach-section:hover .ach-icon { animation: ach-shake 0.5s ease-in-out infinite; }
}

@keyframes ach-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(15deg); } 75% { transform: rotate(-15deg); } }

/* =============================================================
   4. HIỆU ỨNG DẢI GẠCH ĐỎ DÀI RA
   ============================================================= */
.ach-line { flex-grow: 1 !important; height: 1.5px !important; background-color: #e53935 !important; transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important; }
.ach-reverse .ach-line { transform-origin: right; }
.ach-section.is-active .ach-line { transform: scaleX(1); }

@media screen and (min-width: 550px) {
.ach-line { height: 2px !important; }
}

/* =============================================================
   5. TỐI ƯU KHOẢNG CÁCH VÀ NHỊP ĐIỆU
   ============================================================= */
.ach-section { display: flex; align-items: center; gap: 15px; padding: 5px 0; width: 100%; opacity: 0.3; transition: all 0.8s ease; }
.ach-section.is-active { opacity: 1; transform: translateY(0); }
.ach-section:not(.is-active) { transform: translateY(20px); }

@media screen and (max-width: 550px) {
.ach-section { gap: 10px; }
}







/* Khối danh sách chung */
.aixh-list {
  font-size: 0.95rem;
  line-height: 2.05;
}

/* Mỗi dòng */
.aixh-list__item {
  display: flex;
  align-items: center;
}

/* Chấm nháy */
.aixh-list__dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  margin-right: 8px;
}

/* Màu chấm đỏ (vấn đề) */
.aixh-list--bad .aixh-list__dot {
  background-color: #ef4444;
}

.aixh-list--bad .aixh-list__dot::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(239, 68, 68, 0.7);
  opacity: 0;
  animation: aixh-pulse 1.4s ease-out infinite;
}

/* Màu chấm xanh (giải pháp) */
.aixh-list--good .aixh-list__dot {
  background-color: #22c55e;
}

.aixh-list--good .aixh-list__dot::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(34, 197, 94, 0.7);
  opacity: 0;
  animation: aixh-pulse 1.4s ease-out infinite;
}

/* Hiệu ứng pulse chung */
@keyframes aixh-pulse {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  70% {
    transform: scale(1.6);
    opacity: 0;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}


/* --- Fix dot bị dẹp khi xuống nhiều dòng --- */

/* Cho item bám theo đầu dòng, không kéo dot theo block chữ */
.aixh-list__item {
  align-items: baseline;
}

/* Khóa kích thước dot, tránh bị line-height làm bẹp */
.aixh-list__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  min-width: 7px;
  min-height: 7px;
  line-height: 0;
  margin-right: 12px;
  margin-top: 0.35em; /* cho dot ngang với dòng đầu */
}




.js-sticky-wrap {
  position: relative !important;
}
.js-sticky {
  will-change: transform;
}