/*
Theme Name:   Astra Child - MetalWeld
Theme URI:    https://metalweldexpo.com
Description:  Child theme for Astra - MetalWeld project
Author:       Dev
Template:     astra
Version:      3.0.0
Text Domain:  astra-child
*/

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', 'Be Vietnam Pro', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* =============================================
   CSS VARIABLES
   ============================================= */
:root {
  --red:             #c8181e;
  --red-dark:        #9e1015;
  --steel:           #1a2a3a;
  --white:           #ffffff;
  --transition-fast: 0.25s ease;
  --transition-mid:  0.45s ease;
  --shadow-sm:       0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:       0 8px 24px rgba(0,0,0,0.12);
  --shadow-lg:       0 16px 48px rgba(0,0,0,0.16);
}

/* =============================================
   HEADER — UAE HFE Builder
   Selector chuẩn cho UAE Header & Footer plugin
   ============================================= */

/* 1. Nền steel + border đỏ */
.elementor-location-header {
  background: var(--steel) !important;
  border-bottom: 3px solid var(--red) !important;
  box-shadow: var(--shadow-md) !important;
}

/* 2. FIX CHIỀU CAO — loại bỏ padding thừa của container */
.elementor-location-header .e-con,
.elementor-location-header .e-con-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: unset !important;
}

/* Container chính của header row — đặt chiều cao cố định */
.elementor-location-header > .e-con {
  min-height: 68px !important;
  max-height: 68px !important;
  align-items: center !important;
}

/* 3. Logo */
.elementor-location-header .elementor-widget-image img {
  max-height: 48px !important;
  width: auto !important;
}

/* 4. Nav menu text */
.elementor-location-header .hfe-nav-menu__item > a,
.elementor-location-header .hfe-nav-menu .menu-item > a {
  color: rgba(255,255,255,0.88) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  padding: 0 14px !important;          /* padding ngang thôi, KHÔNG padding dọc */
  line-height: 68px !important;        /* căn giữa dọc bằng line-height = header height */
  display: inline-block !important;
  position: relative !important;
  transition: color 0.2s ease !important;
}

/* 5. FIX LIÊN HỆ LỆCH — tất cả li cùng line-height */
.elementor-location-header .hfe-nav-menu ul.hfe-nav-menu__layout-horizontal > li {
  display: inline-flex !important;
  align-items: center !important;
}

/* 6. Hover text sáng hơn */
.elementor-location-header .hfe-nav-menu__item > a:hover,
.elementor-location-header .hfe-nav-menu .menu-item:hover > a {
  color: #ffffff !important;
}

/* 7. Active — chỉ trắng hơn, KHÔNG đổi màu đỏ */
.elementor-location-header .hfe-nav-menu .current-menu-item > a,
.elementor-location-header .hfe-nav-menu .current-menu-ancestor > a {
  color: #ffffff !important;
  background: transparent !important;
}

/* 8. Xóa toàn bộ underline/indicator mặc định của EA */
.elementor-location-header .hfe-nav-menu__item a::before,
.elementor-location-header .hfe-nav-menu__item a::after {
  display: none !important;
  content: none !important;
}

/* 9. FIX UNDERLINE QUÁ RỘNG
   Chỉ underline phần text, không kể padding
   Cách: dùng box-shadow thay vì pseudo-element */
.elementor-location-header .hfe-nav-menu__item:hover > a {
  box-shadow: 0 -2px 0 0 var(--red) inset !important;
}
.elementor-location-header .hfe-nav-menu .current-menu-item > a {
  box-shadow: 0 -2px 0 0 rgba(255,255,255,0.4) inset !important;
}

/* 10. Dropdown */
.elementor-location-header .hfe-nav-menu .sub-menu {
  background: var(--steel) !important;
  border-top: 2px solid var(--red) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
  min-width: 210px !important;
  border-radius: 0 0 6px 6px !important;
  margin-top: 0 !important;
}

.elementor-location-header .hfe-nav-menu .sub-menu .menu-item > a {
  color: rgba(255,255,255,0.80) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;         /* reset lại, không dùng 68px */
  padding: 11px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  display: block !important;
  box-shadow: none !important;         /* tắt underline inset cho sub-menu */
  transition: background 0.2s ease, padding-left 0.2s ease !important;
}

.elementor-location-header .hfe-nav-menu .sub-menu .menu-item > a:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.08) !important;
  padding-left: 22px !important;
}

/* =============================================
   BUTTONS
   ============================================= */
.elementor-button,
.wp-block-button__link {
  background: var(--red) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  transition: background var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast) !important;
}
.elementor-button:hover {
  background: var(--red-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(200,24,30,0.35) !important;
}

/* =============================================
   SECTION HEADINGS
   ============================================= */
.section-title {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 700;
  color: #1a1a1a;
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 32px;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 52px; height: 3px;
  background: var(--red);
}
.section-title.center::after {
  left: 50%;
  transform: translateX(-50%);
}

/* =============================================
   CARDS
   ============================================= */
.card-hover {
  transition: transform var(--transition-mid), box-shadow var(--transition-mid);
  border-radius: 8px;
  overflow: hidden;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

/* =============================================
   FOOTER
   ============================================= */
.site-footer,
#colophon {
  background: var(--steel) !important;
  color: rgba(255,255,255,0.75);
  border-top: 3px solid var(--red) !important;
}
.site-footer a {
  color: rgba(255,255,255,0.75);
  transition: color var(--transition-fast);
}
.site-footer a:hover { color: var(--red); }

/* =============================================
   GSAP ANIMATION INIT
   ============================================= */
.gsap-fade-up,
.gsap-fade-left,
.gsap-fade-right,
.gsap-scale-in { opacity: 0; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
  .elementor-location-header > .e-con {
    max-height: unset !important;
    min-height: 56px !important;
  }
}

/* =============================================
   FIX HOVER TRÊN LIVE PAGE
   Dùng :where để tăng specificity mà không cần !important
   ============================================= */
.elementor-location-header
.hfe-nav-menu__item:hover > a,
.elementor-location-header
.hfe-nav-menu__item:hover > a span,
.elementor-location-header
.hfe-nav-menu .menu-item:hover > a {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Underline đỏ khi hover — live page */
.elementor-location-header
.hfe-nav-menu__item:hover > a {
  box-shadow: 0 -2px 0 0 #c8181e inset !important;
}

/* =============================================
   HEADER SCROLL BEHAVIOR
   JS sẽ toggle class "header-hidden" và "header-visible"
   ============================================= */
.elementor-location-header {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
}

.elementor-location-header.header-hidden {
  transform: translateY(-100%) !important;
}

.elementor-location-header.header-visible {
  transform: translateY(0) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;
}

/* =============================================
   FIX HOVER LIVE PAGE — tăng specificity tối đa
   ============================================= */
html body .elementor-location-header
.hfe-nav-menu__item:hover > a {
  color: #ffffff !important;
  box-shadow: 0 -2px 0 0 #c8181e inset !important;
}

/* =============================================
   FIX DROPDOWN — chữ thường, không hoa
   ============================================= */
html body .elementor-location-header
.hfe-nav-menu .sub-menu .menu-item > a {
  text-transform: none !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  padding: 10px 18px !important;
  color: rgba(255,255,255,0.82) !important;
  box-shadow: none !important;
}

html body .elementor-location-header
.hfe-nav-menu .sub-menu .menu-item > a:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.09) !important;
  padding-left: 24px !important;
}

/* =============================================
   FOOTER — polish
   ============================================= */
.elementor-location-footer,
.hfe-footer {
  background: #1a2a3a !important;
  border-top: 3px solid #c8181e !important;
}

.elementor-location-footer .elementor-widget-text-editor p,
.elementor-location-footer address,
.elementor-location-footer li {
  color: rgba(255,255,255,0.75) !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  margin-bottom: 4px !important;
}

.elementor-location-footer .elementor-heading-title {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
  padding-bottom: 10px !important;
  margin-bottom: 16px !important;
}

.elementor-location-footer a {
  color: rgba(255,255,255,0.75) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.elementor-location-footer a:hover {
  color: #c8181e !important;
}

/* Scroll to top button */
.ast-scroll-top {
  background: #c8181e !important;
  border-radius: 4px !important;
  width: 40px !important;
  height: 40px !important;
  bottom: 24px !important;
  right: 24px !important;
  opacity: 0.85;
  transition: opacity 0.2s, transform 0.2s !important;
}
.ast-scroll-top:hover {
  opacity: 1;
  transform: translateY(-3px) !important;
}
.ast-scroll-top .ast-icon { color: #ffffff !important; }

/* =============================================
   CONTACT FORM 7 — industrial style
   ============================================= */
.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-email,
.wpcf7-form .wpcf7-tel,
.wpcf7-form .wpcf7-textarea,
.wpcf7-form .wpcf7-select {
  width: 100% !important;
  border: none !important;
  border-bottom: 1px solid #d1d5db !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 12px 0 !important;
  font-size: 15px !important;
  color: #1a1a1a !important;
  outline: none !important;
  transition: border-color 0.3s ease !important;
  box-shadow: none !important;
}

.wpcf7-form .wpcf7-text:focus,
.wpcf7-form .wpcf7-email:focus,
.wpcf7-form .wpcf7-tel:focus,
.wpcf7-form .wpcf7-textarea:focus {
  border-bottom-color: #c8181e !important;
}

.wpcf7-form input[type="submit"] {
  background: #c8181e !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 14px 40px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.25s, transform 0.25s !important;
}

.wpcf7-form input[type="submit"]:hover {
  background: #9e1015 !important;
  transform: translateY(-2px) !important;
}

/* =============================================
   HOMEPAGE — override sections hiện có
   ============================================= */

/* Section "Tổng quan sự kiện" — căn trái, bỏ center */
.elementor-location-single .elementor-widget-heading .elementor-heading-title,
.page-id-94 .elementor-widget-heading .elementor-heading-title {
  text-align: left !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* Text body section tổng quan */
.page-id-94 .elementor-widget-text-editor p {
  text-align: left !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: #555e6b !important;
}

/* Cards hoạt động — thêm hover lift */
.page-id-94 .elementor-widget-image img {
  transition: transform 0.4s ease !important;
}
.page-id-94 .elementor-widget-image:hover img {
  transform: scale(1.04) !important;
}

/* =============================================
   HOMEPAGE CONTENT — chỉ nhắm main content
   .elementor-location-single = phần body trang
   không đụng header/footer
   ============================================= */

/* Cards hoạt động — hover lift */
.elementor-location-single .elementor-widget-image img {
  border-radius: 6px;
  transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}
.elementor-location-single .elementor-widget-image:hover img {
  transform: scale(1.03) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.15) !important;
}

/* Section "Tổng quan" — bỏ căn giữa, đẩy text trái */
.elementor-location-single .elementor-widget-text-editor p {
  text-align: left !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: #555e6b !important;
}

/* Heading các section */
.elementor-location-single .elementor-widget-heading h2.elementor-heading-title {
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* =============================================
   ARCHIVE — danh sách bài viết
   ============================================= */

/* Hero banner thay breadcrumb mặc định */
.archive .ast-archive-description,
.category .ast-archive-description {
  background: linear-gradient(150deg, #0d1b2a 0%, #1a2a3a 60%, #2a1015 130%) !important;
  padding: 52px 5vw !important;
  text-align: center !important;
  margin: 0 !important;
}
.archive .ast-archive-description h1,
.category .ast-archive-description h1 {
  color: #fff !important;
  font-size: clamp(26px, 4vw, 48px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}
.archive .ast-archive-description p,
.category .ast-archive-description p {
  color: rgba(255,255,255,0.5) !important;
  font-size: 15px !important;
}

/* Background trang */
.archive .site-content,
.category .site-content {
  background: #f8f9fa;
}

/* Grid bài viết */
.archive .ast-article-inner,
.category .ast-article-inner {
  background: #fff !important;
  border: 1px solid #e9ecef !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  box-shadow: none !important;
}
.archive .ast-article-inner:hover,
.category .ast-article-inner:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.10) !important;
}

/* Featured image */
.archive .ast-blog-featured-section img,
.category .ast-blog-featured-section img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
}
.archive .ast-article-inner:hover .ast-blog-featured-section img,
.category .ast-article-inner:hover .ast-blog-featured-section img {
  transform: scale(1.04) !important;
}

/* Category label */
.archive .ast-blog-single-element.category-links a,
.category .ast-blog-single-element.category-links a {
  background: rgba(200,24,30,0.08) !important;
  color: #c8181e !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 2px !important;
  text-decoration: none !important;
}

/* Post title */
.archive .entry-title a,
.category .entry-title a {
  color: #1a2a3a !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  transition: color 0.2s !important;
}
.archive .entry-title a:hover,
.category .entry-title a:hover {
  color: #c8181e !important;
}

/* Excerpt */
.archive .ast-excerpt,
.category .ast-excerpt {
  color: #6c757d !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* Read more button */
.archive .ast-read-more,
.category .ast-read-more {
  background: #1a2a3a !important;
  color: #fff !important;
  padding: 10px 22px !important;
  border-radius: 2px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  transition: background 0.25s !important;
}
.archive .ast-read-more:hover,
.category .ast-read-more:hover {
  background: #c8181e !important;
  color: #fff !important;
}

/* Pagination */
.archive .ast-pagination a,
.category .ast-pagination a {
  border: 1px solid #e9ecef !important;
  color: #6c757d !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  transition: all 0.2s !important;
}
.archive .ast-pagination a:hover,
.category .ast-pagination a:hover,
.archive .ast-pagination .current,
.category .ast-pagination .current {
  background: #c8181e !important;
  color: #fff !important;
  border-color: #c8181e !important;
}

/* =============================================
   SINGLE POST — chi tiết bài viết
   ============================================= */

/* Hero title area */
.single .ast-single-post-order .entry-title {
  font-size: clamp(24px, 3.5vw, 44px) !important;
  font-weight: 900 !important;
  color: #1a2a3a !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

/* Featured image */
.single .ast-single-featured-image-wrap img {
  border-radius: 8px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
}

/* Post content */
.single .entry-content p {
  font-size: 16px !important;
  line-height: 1.85 !important;
  color: #374151 !important;
  margin-bottom: 20px !important;
}
.single .entry-content h2 {
  font-size: clamp(20px, 2.5vw, 28px) !important;
  font-weight: 800 !important;
  color: #1a2a3a !important;
  margin: 36px 0 16px !important;
  padding-left: 16px !important;
  border-left: 3px solid #c8181e !important;
}
.single .entry-content h3 {
  font-size: clamp(17px, 2vw, 22px) !important;
  font-weight: 700 !important;
  color: #1a2a3a !important;
  margin: 28px 0 12px !important;
}
.single .entry-content a {
  color: #c8181e !important;
  text-decoration: underline !important;
}
.single .entry-content blockquote {
  border-left: 4px solid #c8181e !important;
  background: #f8f9fa !important;
  padding: 20px 24px !important;
  border-radius: 0 6px 6px 0 !important;
  margin: 24px 0 !important;
  font-style: italic !important;
  color: #495057 !important;
}
.single .entry-content img {
  border-radius: 6px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important;
}

/* Category + meta bar */
.single .entry-meta,
.single .ast-blog-single-element.category-links {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 24px !important;
}
.single .entry-meta a,
.single .ast-blog-single-element.category-links a {
  background: rgba(200,24,30,0.08) !important;
  color: #c8181e !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 2px !important;
  text-decoration: none !important;
}

/* Post navigation */
.single .ast-post-navigation {
  background: #f8f9fa !important;
  padding: 24px !important;
  border-radius: 8px !important;
  border: 1px solid #e9ecef !important;
  margin-top: 40px !important;
}
.single .ast-post-navigation a {
  color: #1a2a3a !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  transition: color 0.2s !important;
}
.single .ast-post-navigation a:hover { color: #c8181e !important; }

/* Related posts (nếu Astra hiện) */
.single .ast-related-post-title a {
  color: #1a2a3a !important;
  font-weight: 700 !important;
  transition: color 0.2s !important;
}
.single .ast-related-post-title a:hover { color: #c8181e !important; }

/* Single post — mở rộng content */
.single .entry-content,
.single .ast-article-single {
  max-width: 860px !important;
  margin: 0 auto !important;
}
.single .site-content .ast-container {
  max-width: 1100px !important;
}
/* Tắt sidebar nếu có */
.single #secondary { display: none !important; }
.single #primary {
  width: 100% !important;
  max-width: 100% !important;
}

/* Basic Posts widget — homepage */
.page-id-94 .elementor-widget-posts .e-loop-item {
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid #e9ecef !important;
  box-shadow: none !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.page-id-94 .elementor-widget-posts .e-loop-item:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.10) !important;
}
.page-id-94 .elementor-widget-posts .e-loop-item img {
  height: 200px !important;
  object-fit: cover !important;
}
/* Ẩn "by admin" */
.page-id-94 .elementor-widget-posts .elementor-post__meta-data {
  font-size: 11px !important;
  color: #adb5bd !important;
}
.page-id-94 .elementor-widget-posts .elementor-post__author { display: none !important; }
/* Title */
.page-id-94 .elementor-widget-posts .elementor-post__title a {
  color: #1a2a3a !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}
.page-id-94 .elementor-widget-posts .elementor-post__title a:hover {
  color: #c8181e !important;
}
/* Excerpt */
.page-id-94 .elementor-widget-posts .elementor-post__excerpt p {
  font-size: 13px !important;
  color: #6c757d !important;
  line-height: 1.7 !important;
}
/* Read More */
.page-id-94 .elementor-widget-posts .elementor-post__read-more {
  color: #c8181e !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
/* Container padding */
.page-id-94 .elementor-widget-posts {
  padding: 0 5vw !important;
}

/* =============================================
   FIX BLOG CARDS — ảnh + card đều nhau
   ============================================= */
.elementor-widget-posts .elementor-posts-container {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}
@media (max-width: 820px) {
  .elementor-widget-posts .elementor-posts-container {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 540px) {
  .elementor-widget-posts .elementor-posts-container {
    grid-template-columns: 1fr !important;
  }
}

.elementor-widget-posts .elementor-post {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Ảnh đều nhau */
.elementor-widget-posts .elementor-post__thumbnail {
  height: 200px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.elementor-widget-posts .elementor-post__thumbnail img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
}

/* Body card co giãn đều */
.elementor-widget-posts .elementor-post__text {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 20px !important;
}

/* Đẩy Read More xuống đáy card */
.elementor-widget-posts .elementor-post__read-more {
  margin-top: auto !important;
}