.elementor-kit-7{--e-global-color-primary:#005E07;--e-global-color-secondary:#DB0000;--e-global-color-text:#F6B100;--e-global-color-accent:#F7FF00;--e-global-color-7aadc95:#FFD800;--e-global-color-0333f91:#FFF902;--e-global-color-60e80c5:#FFAA00;--e-global-typography-primary-font-family:"Svn Gotham";--e-global-typography-primary-font-size:30px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-text-transform:capitalize;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-size:15px;--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{background-color:var( --e-global-color-secondary );text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#FFFFFF;border-radius:0px 0px 0px 0px;padding:20px 20px 20px 20px;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:20px;--container-default-padding-right:50px;--container-default-padding-bottom:20px;--container-default-padding-left:50px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-7{font-size:var( --e-global-typography-secondary-font-size );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7{font-size:var( --e-global-typography-secondary-font-size );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =====================================================
   THỢ TỐT 24H — GLOBAL DESIGN SYSTEM v2
   Expert Frontend CSS | Construction Theme
   ===================================================== */

/* ── CSS Variables ── */
:root {
  --tt-red:       #cc0000;
  --tt-red-dark:  #8a0000;
  --tt-red-light: #ff4444;
  --tt-green:     #1a5c1a;
  --tt-green-mid: #2d6a2d;
  --tt-gold:      #f5a623;
  --tt-bg:        #f8f6f0;
  --tt-bg2:       #f0ede4;
  --tt-dark:      #1a1a1a;
  --tt-gray:      #555;
  --tt-gray-lt:   #e0ddd6;
  --tt-white:     #ffffff;
  --tt-shadow:    0 4px 24px rgba(0,0,0,0.09);
  --tt-shadow-lg: 0 8px 40px rgba(0,0,0,0.14);
  --tt-radius:    10px;
  --tt-radius-lg: 16px;
  --transition:   all 0.3s cubic-bezier(.4,0,.2,1);
}

/* ── Base ── */
body { overflow-x:hidden; }
html { scroll-behavior:smooth; }

/* ── Custom Scrollbar ── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:#f1f1f1; }
::-webkit-scrollbar-thumb { background:var(--tt-red); border-radius:3px; }
::selection { background:var(--tt-red); color:#fff; }

/* =====================================================
   KEYFRAMES
   ===================================================== */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(40px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity:0; transform:translateX(-50px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes fadeInRight {
  from { opacity:0; transform:translateX(50px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(0.88); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes pulse-red {
  0%,100% { box-shadow:0 0 0 0 rgba(204,0,0,0.35); }
  50%      { box-shadow:0 0 0 10px rgba(204,0,0,0); }
}
@keyframes float {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-7px); }
}
@keyframes borderDraw {
  from { width:0; opacity:0; }
  to   { width:56px; opacity:1; }
}
@keyframes shimmer {
  0%   { background-position:-400% 0; }
  100% { background-position:400% 0; }
}
@keyframes zoomPulse {
  0%,100% { transform:scale(1); }
  50%      { transform:scale(1.03); }
}
@keyframes slideRight {
  from { transform:translateX(-30%); }
  to   { transform:translateX(30%); }
}
@keyframes spinOnce {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}

/* =====================================================
   SECTION TITLE UNDERLINE
   ===================================================== */
.elementor-widget-heading .elementor-heading-title {
  position:relative;
  display:inline-block;
}
.elementor-widget-heading h2.elementor-heading-title::after {
  content:'';
  display:block;
  height:3px;
  width:0;
  background:var(--tt-red);
  margin:10px auto 0;
  border-radius:2px;
  animation: borderDraw 0.9s ease 0.3s forwards;
}
/* Don't draw line on small/inline headings */
.elementor-widget-heading h3.elementor-heading-title::after,
.elementor-widget-heading h4.elementor-heading-title::after,
.elementor-widget-heading h5.elementor-heading-title::after,
.elementor-widget-heading h6.elementor-heading-title::after {
  display:none;
}

/* =====================================================
   ICON BOXES — "An Tâm" section cards
   ===================================================== */
.elementor-icon-box-wrapper {
  background:var(--tt-white) !important;
  border-radius:var(--tt-radius-lg) !important;
  padding:32px 24px !important;
  box-shadow:var(--tt-shadow) !important;
  border:1px solid var(--tt-gray-lt) !important;
  border-top:4px solid var(--tt-red) !important;
  transition:var(--transition) !important;
  transform:translateY(0);
  position:relative;
  overflow:hidden;
}
.elementor-icon-box-wrapper::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background:linear-gradient(135deg,rgba(204,0,0,0.03) 0%,transparent 50%);
  pointer-events:none;
}
.elementor-icon-box-wrapper:hover {
  transform:translateY(-7px) !important;
  box-shadow:var(--tt-shadow-lg) !important;
  border-top-color:var(--tt-green) !important;
}
.elementor-icon-box-wrapper:hover .elementor-icon i,
.elementor-icon-box-wrapper:hover .elementor-icon svg {
  animation:float 2s ease-in-out infinite;
}
.elementor-icon-box-title a,
.elementor-icon-box-title {
  font-weight:700 !important;
  font-size:17px !important;
  color:var(--tt-green) !important;
}
.elementor-icon-box-description {
  color:var(--tt-gray) !important;
  font-size:14px !important;
  line-height:1.75 !important;
}

/* =====================================================
   ICON LIST
   ===================================================== */
.elementor-icon-list-item {
  transition:var(--transition);
  padding:5px 0 !important;
  border-bottom:1px solid rgba(0,0,0,0.05) !important;
}
.elementor-icon-list-item:last-child { border-bottom:none !important; }
.elementor-icon-list-item:hover { transform:translateX(4px); }
.elementor-icon-list-text {
  font-size:15px !important;
  font-weight:500 !important;
  color:var(--tt-dark) !important;
}

/* =====================================================
   ACCORDION — FAQ / Process
   ===================================================== */
.elementor-accordion-item {
  border:none !important;
  border-radius:var(--tt-radius) !important;
  margin-bottom:10px !important;
  box-shadow:0 2px 10px rgba(0,0,0,0.07) !important;
  overflow:hidden;
  transition:var(--transition);
}
.elementor-accordion-item:hover {
  box-shadow:0 4px 20px rgba(204,0,0,0.10) !important;
}
.elementor-tab-title {
  background:var(--tt-white) !important;
  padding:16px 22px !important;
  font-size:15px !important;
  font-weight:700 !important;
  color:var(--tt-dark) !important;
  border-left:4px solid var(--tt-red) !important;
  cursor:pointer;
  transition:var(--transition) !important;
}
.elementor-tab-title:hover,
.elementor-tab-title.elementor-active {
  background:#fff5f5 !important;
  color:var(--tt-red) !important;
}
.elementor-tab-title .elementor-accordion-icon { color:var(--tt-red) !important; }
.elementor-tab-content {
  background:#fffcfc !important;
  padding:16px 22px 20px !important;
  font-size:14px !important;
  line-height:1.85 !important;
  color:var(--tt-gray) !important;
  border-left:4px solid #fdd !important;
}

/* =====================================================
   TESTIMONIALS
   ===================================================== */
.elementor-testimonial-wrapper {
  background:var(--tt-white) !important;
  border-radius:var(--tt-radius-lg) !important;
  padding:28px 24px !important;
  box-shadow:var(--tt-shadow) !important;
  border:1px solid var(--tt-gray-lt) !important;
  position:relative;
  transition:var(--transition);
}
.elementor-testimonial-wrapper:hover {
  transform:translateY(-5px);
  box-shadow:var(--tt-shadow-lg) !important;
}
.elementor-testimonial-wrapper::before {
  content:'"';
  position:absolute;
  top:10px; left:18px;
  font-size:64px;
  color:var(--tt-red);
  opacity:0.12;
  font-family:Georgia,serif;
  line-height:1;
  pointer-events:none;
}

/* =====================================================
   COUNTER
   ===================================================== */
.elementor-counter-number {
  font-weight:900 !important;
  color:var(--tt-red) !important;
  line-height:1 !important;
}
.elementor-counter-number-suffix { color:var(--tt-red) !important; font-weight:800 !important; }
.elementor-counter-title {
  text-transform:uppercase !important;
  letter-spacing:1px !important;
  font-size:13px !important;
  margin-top:6px !important;
  color:var(--tt-gray) !important;
  font-weight:600 !important;
}

/* =====================================================
   IMAGES
   ===================================================== */
.elementor-widget-image img {
  border-radius:var(--tt-radius) !important;
  transition:var(--transition) !important;
}
.elementor-widget-image img:hover {
  transform:scale(1.02) !important;
  box-shadow:var(--tt-shadow-lg) !important;
}

/* =====================================================
   DIVIDER
   ===================================================== */
.elementor-divider-separator {
  border-top-color:var(--tt-red) !important;
  border-top-width:3px !important;
}

/* =====================================================
   BUTTON global
   ===================================================== */
/*.elementor-button {
  border-radius:var(--tt-radius) !important;
  font-weight:700 !important;
  letter-spacing:0.4px !important;
  transition:var(--transition) !important;
  position:relative;
  overflow:hidden;
} */



.elementor-button::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,rgba(255,255,255,0) 30%,rgba(255,255,255,0.18) 50%,rgba(255,255,255,0) 70%);
  background-size:200% 100%;
  opacity:0;
  transition:opacity 0.3s;
}
.elementor-button:hover::after { opacity:1; animation:shimmer 0.7s ease; }
.elementor-button:hover { transform:translateY(-2px) !important; }

/* CTA call-now button pulse */
.elementor-widget-button .elementor-button[style*="background-color: rgb(204, 0, 0)"],
.elementor-widget-button .elementor-button[style*="#cc0000"] {
  animation:pulse-red 2.5s ease-in-out infinite;
}
.elementor-widget-button .elementor-button:hover {
  animation:none !important;
}

/* =====================================================
   TEXT EDITOR
   ===================================================== */
.elementor-widget-text-editor p {
  line-height:1.85 !important;
}

/* =====================================================
   PROGRESS BAR
   ===================================================== */
.elementor-progress-wrapper {
  border-radius:20px !important;
  overflow:hidden;
  background:var(--tt-gray-lt) !important;
}
.elementor-progress-bar {
  border-radius:20px !important;
  background:var(--tt-red) !important;
}

/* =====================================================
   SECTION-SPECIFIC TWEAKS
   ===================================================== */

/* Section "An Tâm" - light mint bg */
.elementor-section.elementor-element[data-settings*="light_green"],
.elementor-section[style*="rgb(232, 245, 233)"] {
  background:linear-gradient(160deg,#f0f9f0 0%,#e8f5e9 100%) !important;
}

/* Dark green sections — force white text */
.elementor-section[style*="14532d"] .elementor-heading-title,
.elementor-section[style*="14532d"] .elementor-text-editor,
.elementor-section[style*="14532d"] p,
.elementor-section[style*="rgb(27, 94, 32)"] .elementor-heading-title,
.elementor-section[style*="rgb(20, 83, 45)"] .elementor-heading-title {
  color:var(--tt-white) !important;
}

/* FAQ section - gentle warm bg */
.elementor-widget-accordion {
  position:relative;
}

/* =====================================================
   MARQUEE / TICKER top bar
   ===================================================== */
.elementor-section:first-child .elementor-container {
  animation:fadeInLeft 0.8s ease both;
}

/* =====================================================
   CTA FINAL SECTION  
   ===================================================== */
.elementor-section:last-of-type .elementor-widget-heading h2 {
  animation:zoomPulse 3s ease-in-out infinite;
  text-shadow:0 2px 8px rgba(0,0,0,0.25);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:768px) {
  .elementor-icon-box-wrapper { padding:20px 14px !important; }
  .elementor-tab-title { padding:13px 15px !important; font-size:14px !important; }
  .elementor-button { padding:12px 20px !important; }
}

/* === 4 BOX SECTION GAP === */
/* Add 20px gap between 4 feature boxes in "An Tâm Với Lựa Chọn Của Bạn" section */
.elementor-element-ff6d092 > .elementor-container > .elementor-row > .elementor-column > .elementor-element-populated,
.elementor-element-ff6d092 .elementor-column > .elementor-element-populated {
  margin: 0 10px;
}
.elementor-element-ff6d092 > .elementor-container > .elementor-row > .elementor-column:first-child > .elementor-element-populated,
.elementor-element-ff6d092 .elementor-column:first-child > .elementor-element-populated {
  margin-left: 0;
}
.elementor-element-ff6d092 > .elementor-container > .elementor-row > .elementor-column:last-child > .elementor-element-populated,
.elementor-element-ff6d092 .elementor-column:last-child > .elementor-element-populated {
  margin-right: 0;
}




/* ============================================
   GLOBAL BUTTON STYLES - Theo mẫu Hotline/Tư vấn
   Primary (solid đỏ 3D) + Secondary (outline trắng)
   ============================================ */

/* === PRIMARY: Solid đỏ 3D - override all button widgets === */
.elementor-161 .elementor-widget-button .elementor-button,
.elementor-161 a.elementor-button {
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 14px 28px !important;
  letter-spacing: 0.5px !important;
  transition: all 0.18s ease !important;
  background-color: #cc0000 !important;
  color: #ffffff !important;
  fill: #ffffff !important;
  border: none !important;
  box-shadow: 0 5px 0 #8a0000 !important;
  text-decoration: none !important;
}

/* === PRIMARY hover === */
.elementor-161 .elementor-widget-button .elementor-button:hover,
.elementor-161 a.elementor-button:hover {
  background-color: #aa0000 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 0 #6a0000 !important;
  transform: translateY(2px) !important;
}

/* === PRIMARY active === */
.elementor-161 .elementor-widget-button .elementor-button:active {
  box-shadow: 0 1px 0 #6a0000 !important;
  transform: translateY(4px) !important;
}

/* === SECONDARY: Outline - widget 7062dd4 (white bg, red border/text) === */
.elementor-161 .elementor-element-7062dd4 .elementor-button {
  background-color: #ffffff !important;
  color: #cc0000 !important;
  fill: #cc0000 !important;
  border: 2.5px solid #cc0000 !important;
  box-shadow: none !important;
}

.elementor-161 .elementor-element-7062dd4 .elementor-button:hover {
  background-color: #cc0000 !important;
  color: #ffffff !important;
  fill: #ffffff !important;
  border: 2.5px solid #cc0000 !important;
  box-shadow: 0 3px 0 #8a0000 !important;
  transform: translateY(2px) !important;
}

.elementor-161 .elementor-element-7062dd4 .elementor-button:active {
  transform: translateY(1px) !important;
  box-shadow: none !important;
}

/* === Fix icon color in buttons === */
.elementor-161 .elementor-widget-button .elementor-button .elementor-button-icon i,
.elementor-161 .elementor-widget-button .elementor-button .elementor-button-icon svg {
  color: inherit !important;
  fill: inherit !important;
}


/* === SHIMMER FLASH on Elementor Buttons === */
.elementor-161 .elementor-widget-button .elementor-button {
  overflow: hidden !important;
  position: relative !important;
}
.elementor-161 .elementor-widget-button .elementor-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.45) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 1;
}
.elementor-161 .elementor-widget-button .elementor-button:hover::before {
  animation: tho-btn-shimmer 0.55s ease forwards;
}
/* Shimmer keyframe (shared with hero buttons) */
@keyframes tho-btn-shimmer {
  0%   { left: -75%; opacity: 1; }
  100% { left: 130%;  opacity: 0; }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Svn Gotham';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://thotot24h.com/wp-content/uploads/2026/04/subset-SVN-GothamBlack.woff2') format('woff2');
}
/* End Custom Fonts CSS */