/**
 * 🎨 MOITRUONGXUYENVIET.COM — BRAND DESIGN SYSTEM CSS
 * Căn cứ: wiki/brand-design-system.md
 * Đơn vị: Công Ty TNHH Môi Trường Xuyên Việt (MST: 0311351506)
 * Trạng thái: ĐÃ ĐỒNG BỘ VÀ LIVE TRÊN PRODUCTION SERVER
 * Mục tiêu: Cải tiến từng thành phần giao diện theo chuẩn nhận diện thương hiệu tập đoàn.
 */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* ==========================================================================
   1. DESIGN TOKENS & CSS VARIABLES (BRAND DESIGN SYSTEM 2026)
   ========================================================================== */
:root {
  /* Brand Primary & Accent — Sampled directly from corporate logo */
  --green-500: #136E3B;  /* Logo "VIỆT" + "Environment Company", nav, primary, links */
  --green-600: #0F5C31;  /* Hover state */
  --green-700: #0C4A27;  /* Active state */
  --green-800: #08351C;  /* Dark sections, sticky bar, dark hero */
  --green-900: #052312;  /* Deepest footer */
  --green-50:  #EDF5F0;  /* Subtle green tint / badge background */
  --green-100: #D2E5D9;
  --green-200: #A6CBB4;
  --green-300: #72AE8A;
  --green-400: #3E8F61;

  --red-500:   #E92825;  /* Logo "XUYÊN" + bird mark, hotline, prices, primary CTA, eyebrow */
  --red-600:   #C51F1D;  /* Red hover */
  --red-700:   #9C1917;
  --red-800:   #731211;
  --red-900:   #4A0B0A;
  --red-50:    #FDEDEC;  /* Subtle red tint / alert background */

  /* Water (Support for process diagrams & hero grounds) */
  --water-500: #0F7A99;
  --water-50:  #EAF4F8;

  /* Neutrals — slightly cool grey ramp */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FAFBFA;
  --neutral-50:  #F4F6F4;  /* Surface subtle */
  --neutral-100: #E8EBE9;  /* Border subtle */
  --neutral-200: #D5DAD7;
  --neutral-300: #B4BBB7;
  --neutral-400: #8C948F;
  --neutral-500: #6B736E;  /* Text muted */
  --neutral-600: #4F5652;
  --neutral-700: #3A403C;  /* Text body */
  --neutral-800: #252A27;
  --neutral-900: #141814;  /* Text primary / headings */

  /* Accents */
  --mtxv-mint-400: #3FBF7F;   /* Status dot (Live/Active Indicator) */
  --mtxv-mint-300: #7FE3B0;   /* Text highlight on dark backgrounds */

  /* Typography */
  --font-display: 'Archivo', 'Be Vietnam Pro', Arial, sans-serif;
  --font-sans: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --mtxv-font-main: var(--font-sans);

  /* Legacy Mapping for full backwards-compatibility */
  --mtxv-green-600: var(--green-500);  /* #136E3B */
  --mtxv-green-700: var(--green-600);  /* #0F5C31 */
  --mtxv-green-800: var(--green-800);  /* #08351C */
  --mtxv-green-900: var(--green-900);  /* #052312 */

  --mtxv-red-500:   var(--red-500);    /* #E92825 */
  --mtxv-red-600:   var(--red-600);    /* #C51F1D */
  --mtxv-red-light: var(--red-50);     /* #FDEDEC */

  --mtxv-ink-heading: var(--neutral-900); /* #141814 */
  --mtxv-body:        var(--neutral-700); /* #3A403C */
  --mtxv-muted:       var(--neutral-500); /* #6B736E */
  --mtxv-border:      var(--neutral-100); /* #E8EBE9 */
  --mtxv-white:       var(--neutral-0);   /* #FFFFFF */

  --mtxv-paper:   var(--neutral-0);
  --mtxv-surface: var(--neutral-50);      /* #F4F6F4 */
  --mtxv-tint:    var(--green-50);        /* #EDF5F0 */
  --mtxv-field:   var(--neutral-50);

  /* Corner Radii — 4px controls, 6px cards (no pill buttons) */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --radius-control: var(--radius-sm);  /* 4px */
  --radius-card: var(--radius-md);     /* 6px */

  --mtxv-radius-sm: var(--radius-control); /* 4px */
  --mtxv-radius-md: var(--radius-card);    /* 6px */
  --mtxv-radius-lg: 10px;
  --mtxv-radius-full: 9999px;

  --mtxv-shadow-nav: 0 4px 16px rgba(8, 53, 28, 0.18);
  --mtxv-shadow-sticky: 0 6px 24px rgba(5, 35, 18, 0.25);
}


/* ==========================================================================
   2. THÀNH PHẦN: #nav_parent_container & HỆ THỐNG MENU ĐIỀU HƯỚNG CHÍNH
   ========================================================================== */

#nav_parent_container {
  width: 100%;
  height: 48px;
  background: linear-gradient(180deg, var(--mtxv-green-600) 0%, var(--mtxv-green-700) 100%);
  background-color: var(--mtxv-green-600);
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--mtxv-shadow-nav);
  font-family: var(--mtxv-font-main);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000;
}

.scrollq #nav_parent_container {
  background: var(--green-800);
  background-color: var(--green-800);
  box-shadow: var(--mtxv-shadow-sticky);
  border-bottom: 1px solid rgba(127, 227, 176, 0.2);
}

#nav_parent {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 15px;
  position: relative;
}

#img_home {
  width: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  margin-right: 12px;
  margin-left: 0;
  margin-top: 0;
}
#img_home a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--mtxv-radius-sm);
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}
#img_home a:hover {
  background: rgba(255, 255, 255, 0.22);
}
#img_home img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

#nav_parent p {
  margin: 0;
  padding: 0;
  float: left;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

#nav_parent p a {
  color: #FFFFFF !important;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0 18px;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

#nav_parent p a:hover {
  color: var(--mtxv-mint-300) !important;
  background: rgba(0, 0, 0, 0.15);
}

#nav_parent p a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 18px;
  right: 18px;
  height: 3px;
  background-color: var(--mtxv-mint-300);
  border-radius: 3px 3px 0 0;
  opacity: 0;
  transform: translateY(2px);
  transition: all 0.25s ease;
}

#nav_parent p a:hover::after,
#nav_parent p.active a::after {
  opacity: 1;
  transform: translateY(0);
}


/* ==========================================================================
   3. TIÊU ĐỀ TRANG CHỦ & CỘT NỘI DUNG: .intro-title, .left-index-title h2
   ========================================================================== */

/* Tiêu đề giới thiệu trang chủ (.intro-title) */
.intro-title {
  padding: 12px 20px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--mtxv-green-600) 0%, var(--mtxv-green-800) 100%);
  border-radius: var(--mtxv-radius-sm);
  box-shadow: 0 3px 12px rgba(14, 44, 32, 0.15);
  margin-bottom: 15px;
}

/* Tiêu đề các khối danh mục cột trái (.left-index-title & h2) */
.left-index-title {
  background: linear-gradient(90deg, var(--mtxv-green-600) 0%, var(--mtxv-green-700) 65%, rgba(27, 94, 67, 0.05) 100%);
  border-left: 4px solid var(--mtxv-mint-400);
  border-radius: 4px 0 0 4px;
  color: #FFFFFF;
  padding: 10px 16px;
  margin: 0 0 15px 0;
}

.left-index-title h2 {
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

/* Tiêu đề các khối widget cột phải (.right-index-title) */
.right-index-title {
  background: linear-gradient(135deg, var(--mtxv-green-600) 0%, var(--mtxv-green-800) 100%);
  border-left: 4px solid var(--mtxv-mint-400);
  border-radius: var(--mtxv-radius-sm) var(--mtxv-radius-sm) 0 0;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: left;
  padding: 12px 16px;
  margin: 0;
}


/* ==========================================================================
   4. LIÊN KẾT NỘI DUNG: .left-index a, .right-container a
   ========================================================================== */

/* Liên kết cột trái (.left-index a) */
.left-index a {
  color: var(--mtxv-green-600) !important;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.left-index a:hover {
  color: var(--mtxv-red-500) !important; /* Điểm nhấn hover Đỏ Red 500 */
  text-decoration: underline;
}

/* Liên kết cột phải (.right-container a) */
.right-container a {
  color: var(--mtxv-green-600) !important;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.right-container a:hover {
  color: var(--mtxv-red-500) !important;
  text-decoration: underline;
}

.right-container a:visited {
  color: var(--mtxv-green-700) !important;
}

.right-index-box a {
  color: var(--mtxv-green-600) !important;
  font-weight: 600;
  transition: color 0.2s ease;
}

.right-index-box a:hover {
  color: var(--mtxv-red-500) !important;
  text-decoration: underline;
}


/* ==========================================================================
   5. CHÂN TRANG DOANH NGHIỆP: .footer & CÁC THÀNH PHẦN CON
   ========================================================================== */

.footer {
  background-color: var(--green-900) !important; /* #052312 */
  border-top: 3px solid var(--green-500);
  padding: 40px 0 20px 0;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--mtxv-font-main);
}

.footer-col-left {
  line-height: 1.6em;
  font-size: 14px;
}

.company {
  font-size: 17px;
  font-weight: 800;
  color: var(--mtxv-mint-300) !important; /* #7FE3B0 */
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.footer-col-left p {
  margin-bottom: 8px;
  margin-top: 0px;
  padding-left: 25px;
  color: rgba(255, 255, 255, 0.85);
}

.footer a {
  color: rgba(255, 255, 255, 0.85) !important;
  transition: color 0.2s ease;
}

.footer a:hover {
  color: var(--mtxv-mint-300) !important;
}

.footer-col-title {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--mtxv-mint-300);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 8px;
}

.copyright {
  margin: auto;
  width: 100%;
  background: #061711;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 15px 15px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  line-height: 1.6;
}

.copyright a {
  font-size: 13px;
  color: var(--mtxv-mint-300) !important;
  font-weight: 600;
  margin: 0 4px;
}

.copyright a:hover {
  color: #FFFFFF !important;
  text-decoration: underline;
}