/*
Theme Name: Sửa chữa điện máy
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/


/* -----------------------------------------------------------------------------
   1. BIẾN THƯƠNG HIỆU
   -------------------------------------------------------------------------- */
:root {
  --dm-primary:     #0C5FBF;   /* xanh kỹ thuật — nút chính, tiêu đề nhấn */
  --dm-primary-dk:  #084A96;
  --dm-primary-lt:  #5B9BE0;
  --dm-secondary:   #0E9AA7;   /* xanh ngọc — gợi "điện lạnh" */
  --dm-accent:      #F5871F;   /* cam — CHỈ dùng cho hành động gọi điện */
  --dm-accent-lt:   #FFB25E;
  --dm-ink:         #16222E;   /* màu chữ */
  --dm-cream:       #F1F5FA;   /* nền sáng */
  --dm-charcoal:    #0D1B26;   /* nền tối */
  --dm-line:        rgba(22, 34, 46, .10);
  --dm-radius:      16px;
  --dm-shadow:      0 10px 30px -20px rgba(22, 34, 46, .6);

  --dm-font-head: "Manrope", "Be Vietnam Pro", system-ui, sans-serif;
  --dm-font-body: "Be Vietnam Pro", system-ui, sans-serif;

  /*
   * Ảnh nền khối Hero.
   *
   * Cố ý KHÔNG dùng thuộc tính bg="" của [section]: nó đòi ID đính kèm trong Thư viện,
   * mà đi tra ID là bước hay sai nhất lúc bàn giao. Để ở đây thì chỉ cần đường dẫn ảnh.
   *
   * Đường dẫn bắt đầu bằng "/" (tính từ gốc tên miền), KHÔNG ghi cả https://tenmien.vn
   * — nhờ vậy khi chuyển từ tên miền demo sang tên miền thật thì ảnh vẫn chạy, không
   * phải sửa lại gì.
   */
  --dm-hero-image: url("/wp-content/uploads/2026/09/hero-goi-tho.png");
}

/*
 * Font: cách gọn nhất là khai trong Flatsome → Typography (xem README mục 4).
 * Nếu không muốn đụng Typography thì bỏ dấu chú thích dòng @import dưới đây.
 * Lưu ý @import BẮT BUỘC nằm ở dòng đầu tiên của file CSS mới có hiệu lực.
 */
/* @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Be+Vietnam+Pro:wght@300;400;500;600;700&display=swap'); */


/* -----------------------------------------------------------------------------
   2. KHUNG CHUNG CỦA MỌI SECTION
   -------------------------------------------------------------------------- */
.dm-sec {
  font-family: var(--dm-font-body);
  color: var(--dm-ink);
}
.dm-sec h1, .dm-sec h2, .dm-sec h3, .dm-sec h4 {
  font-family: var(--dm-font-head);
  font-weight: 800;
  color: inherit;
  /*
   * KHÔNG hạ line-height xuống dưới 1.15: tiếng Việt có dấu thanh nằm trên đầu chữ,
   * bó sát quá là dấu bị cắt khi tiêu đề xuống dòng ("ĐỔI KIỂU" mất dấu hỏi).
   */
  line-height: 1.22;
  margin-bottom: 0;
}
.dm-sec p { line-height: 1.68; }

/* Nhãn nhỏ trên tiêu đề khối */
.dm-eyebrow {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 9px;
  background: rgba(12, 95, 191, .10);
  color: var(--dm-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.dm-sec--dark .dm-eyebrow { background: rgba(255, 255, 255, .14); color: var(--dm-accent); }

.dm-title {
  font-size: 34px;
  line-height: 1.22;
  margin: 0 0 14px;
}
.dm-intro {
  font-size: 16px;
  color: rgba(22, 34, 46, .65);
  margin: 0;
}
.dm-head { max-width: 640px; }
.dm-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/*
 * THẺ NEO CHO ANCHOR.
 *
 * Flatsome BỎ QUA thuộc tính id đặt trên [section] — nó tự sinh id kiểu
 * "section_1117504451". Nên mỗi khối có một <span class="dm-anchor" id="..."> đặt
 * ngay đầu section để menu và các nút #bang-gia, #dat-lich... còn nhảy đúng chỗ.
 *
 * display:block là bắt buộc: span inline rỗng không làm điểm neo cuộn được.
 * scroll-margin-top bù chiều cao header dính — sửa 90px cho khớp header thật của
 * khách, nếu không tiêu đề khối sẽ chui xuống dưới header sau khi nhảy.
 */
.dm-anchor {
  display: block;
  height: 0;
  overflow: hidden;
  scroll-margin-top: 90px;
}
.dm-sec[id] { scroll-margin-top: 90px; }

.dm-sec--light { background: #fff; }
.dm-sec--cream { background: var(--dm-cream); }
.dm-sec--dark  { background: var(--dm-charcoal); color: #fff; }
.dm-sec--dark .dm-intro { color: rgba(255, 255, 255, .72); }

/* Thẻ nội dung dùng lại ở nhiều khối */
.dm-card {
  background: #fff;
  border: 1px solid var(--dm-line);
  border-radius: var(--dm-radius);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
a.dm-card:hover, .dm-card:hover {
  transform: translateY(-3px);
  border-color: rgba(12, 95, 191, .4);
  box-shadow: var(--dm-shadow);
}


/* -----------------------------------------------------------------------------
   3. ICON
   Sinh từ resources/views/components/dm-icon.blade.php của bản Laravel, nên bộ icon
   ở đây và bộ icon trên bản gốc là MỘT. Vẽ bằng mask nên icon ăn theo `color`
   của phần tử cha — đổi màu chữ là icon đổi theo, không cần file ảnh riêng.

   Dùng:  <i class="dmi dmi-fridge"></i>
   Cỡ:    thêm dmi-lg / dmi-xl, hoặc tự đặt font-size cho thẻ cha.
   -------------------------------------------------------------------------- */
.dmi {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: -.14em;
  flex: none;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.dmi-lg { width: 1.5em; height: 1.5em; }
.dmi-xl { width: 2em;   height: 2em;   }

/* === BẮT ĐẦU BỘ ICON (sinh tự động — đừng sửa tay, sửa ở dm-icon.blade.php) === */
.dmi-tv{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='19' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='19' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E")}
.dmi-fridge{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2.5' width='14' height='19' rx='2'/%3E%3Cpath d='M5 10h14'/%3E%3Cpath d='M8 6v2M8 13v3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2.5' width='14' height='19' rx='2'/%3E%3Cpath d='M5 10h14'/%3E%3Cpath d='M8 6v2M8 13v3'/%3E%3C/svg%3E")}
.dmi-ac{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='8' rx='2'/%3E%3Cpath d='M6 9h12'/%3E%3Cpath d='M7 16.5c1.2 0 1.2 2 2.4 2M12 16.5c1.2 0 1.2 2 2.4 2M17 16.5c-1.2 0-1.2 2-2.4 2' opacity='.85'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='8' rx='2'/%3E%3Cpath d='M6 9h12'/%3E%3Cpath d='M7 16.5c1.2 0 1.2 2 2.4 2M12 16.5c1.2 0 1.2 2 2.4 2M17 16.5c-1.2 0-1.2 2-2.4 2' opacity='.85'/%3E%3C/svg%3E")}
.dmi-washer{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2.5' width='16' height='19' rx='2'/%3E%3Ccircle cx='12' cy='14' r='4.5'/%3E%3Cpath d='M7.5 6h2M16.5 6h.01'/%3E%3Cpath d='M9 14c1.2-1 1.8 1 3 0s1.8 1 3 0' opacity='.9'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2.5' width='16' height='19' rx='2'/%3E%3Ccircle cx='12' cy='14' r='4.5'/%3E%3Cpath d='M7.5 6h2M16.5 6h.01'/%3E%3Cpath d='M9 14c1.2-1 1.8 1 3 0s1.8 1 3 0' opacity='.9'/%3E%3C/svg%3E")}
.dmi-cooktop{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2'/%3E%3Ccircle cx='8' cy='10' r='2.5'/%3E%3Ccircle cx='16' cy='10' r='2.5'/%3E%3Cpath d='M6 16h12'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2'/%3E%3Ccircle cx='8' cy='10' r='2.5'/%3E%3Ccircle cx='16' cy='10' r='2.5'/%3E%3Cpath d='M6 16h12'/%3E%3C/svg%3E")}
.dmi-vacuum{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='16' r='4.5'/%3E%3Cpath d='M8 16h6.5a3 3 0 0 0 3-3V7'/%3E%3Cpath d='M15 4.5h5v3h-5z'/%3E%3Ccircle cx='8' cy='16' r='1.4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='16' r='4.5'/%3E%3Cpath d='M8 16h6.5a3 3 0 0 0 3-3V7'/%3E%3Cpath d='M15 4.5h5v3h-5z'/%3E%3Ccircle cx='8' cy='16' r='1.4'/%3E%3C/svg%3E")}
.dmi-fan{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='10' r='2'/%3E%3Cpath d='M12 8c0-3 1-5 3-5s2.5 3 .5 4.4'/%3E%3Cpath d='M14 10c3 0 5 1 5 3s-3 2.5-4.4.5'/%3E%3Cpath d='M10 10c-3 0-5-1-5-3s3-2.5 4.4-.5'/%3E%3Cpath d='M12 12c0 3-1 5-3 5s-2.5-3-.5-4.4'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='10' r='2'/%3E%3Cpath d='M12 8c0-3 1-5 3-5s2.5 3 .5 4.4'/%3E%3Cpath d='M14 10c3 0 5 1 5 3s-3 2.5-4.4.5'/%3E%3Cpath d='M10 10c-3 0-5-1-5-3s3-2.5 4.4-.5'/%3E%3Cpath d='M12 12c0 3-1 5-3 5s-2.5-3-.5-4.4'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E")}
.dmi-plug{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2.5v5M15 2.5v5'/%3E%3Cpath d='M6 7.5h12v3a6 6 0 0 1-6 6 6 6 0 0 1-6-6Z'/%3E%3Cpath d='M12 16.5v5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2.5v5M15 2.5v5'/%3E%3Cpath d='M6 7.5h12v3a6 6 0 0 1-6 6 6 6 0 0 1-6-6Z'/%3E%3Cpath d='M12 16.5v5'/%3E%3C/svg%3E")}
.dmi-wrench{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 3.5a5 5 0 0 0-5.6 6.8L3.5 16.7a2 2 0 0 0 2.8 2.8l6.4-6.4a5 5 0 0 0 6.8-5.6l-2.9 2.9-2.6-.7-.7-2.6Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 3.5a5 5 0 0 0-5.6 6.8L3.5 16.7a2 2 0 0 0 2.8 2.8l6.4-6.4a5 5 0 0 0 6.8-5.6l-2.9 2.9-2.6-.7-.7-2.6Z'/%3E%3C/svg%3E")}
.dmi-phone{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 20.5a13.5 13.5 0 0 1-12-12A2.5 2.5 0 0 1 6 6h1.6a1.5 1.5 0 0 1 1.5 1.2l.5 2.3a1.5 1.5 0 0 1-.7 1.6l-1 .6a10.5 10.5 0 0 0 4.4 4.4l.6-1a1.5 1.5 0 0 1 1.6-.7l2.3.5a1.5 1.5 0 0 1 1.2 1.5V18a2.5 2.5 0 0 1-2.5 2.5Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 20.5a13.5 13.5 0 0 1-12-12A2.5 2.5 0 0 1 6 6h1.6a1.5 1.5 0 0 1 1.5 1.2l.5 2.3a1.5 1.5 0 0 1-.7 1.6l-1 .6a10.5 10.5 0 0 0 4.4 4.4l.6-1a1.5 1.5 0 0 1 1.6-.7l2.3.5a1.5 1.5 0 0 1 1.2 1.5V18a2.5 2.5 0 0 1-2.5 2.5Z'/%3E%3C/svg%3E")}
.dmi-clock{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.2 1.9'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.2 1.9'/%3E%3C/svg%3E")}
.dmi-map{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E")}
.dmi-mail{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6 8.5-6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6 8.5-6'/%3E%3C/svg%3E")}
.dmi-check{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.dmi-shield{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v6c0 4.3 3 8.1 7 9 4-.9 7-4.7 7-9V6Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v6c0 4.3 3 8.1 7 9 4-.9 7-4.7 7-9V6Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E")}
.dmi-truck{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5h10v9h-10z'/%3E%3Cpath d='M12.5 10h4l3 3v2.5h-7z'/%3E%3Ccircle cx='6.5' cy='18' r='1.8'/%3E%3Ccircle cx='16.5' cy='18' r='1.8'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5h10v9h-10z'/%3E%3Cpath d='M12.5 10h4l3 3v2.5h-7z'/%3E%3Ccircle cx='6.5' cy='18' r='1.8'/%3E%3Ccircle cx='16.5' cy='18' r='1.8'/%3E%3C/svg%3E")}
.dmi-medal{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5'/%3E%3Cpath d='m9 13.5-1.5 7L12 18l4.5 2.5-1.5-7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5'/%3E%3Cpath d='m9 13.5-1.5 7L12 18l4.5 2.5-1.5-7'/%3E%3C/svg%3E")}
.dmi-tag{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11.4V4.5a1 1 0 0 1 1-1h6.9a2 2 0 0 1 1.4.6l7.1 7.1a2 2 0 0 1 0 2.8l-6.9 6.9a2 2 0 0 1-2.8 0L4.1 13.8a2 2 0 0 1-.6-1.4Z'/%3E%3Cpath d='M8 8h.01'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11.4V4.5a1 1 0 0 1 1-1h6.9a2 2 0 0 1 1.4.6l7.1 7.1a2 2 0 0 1 0 2.8l-6.9 6.9a2 2 0 0 1-2.8 0L4.1 13.8a2 2 0 0 1-.6-1.4Z'/%3E%3Cpath d='M8 8h.01'/%3E%3C/svg%3E")}
.dmi-chat{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8 8 0 0 1-11.6 7.1L4 20.5l1.4-4.9A8 8 0 1 1 20.5 12Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8 8 0 0 1-11.6 7.1L4 20.5l1.4-4.9A8 8 0 1 1 20.5 12Z'/%3E%3C/svg%3E")}
.dmi-calendar{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='16' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='16' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.dmi-user{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E")}
.dmi-arrow{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m12.5 6.5 5.5 5.5-5.5 5.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m12.5 6.5 5.5 5.5-5.5 5.5'/%3E%3C/svg%3E")}
.dmi-spark{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2.5 5 13.5h6l-1 8 8-11h-6Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2.5 5 13.5h6l-1 8 8-11h-6Z'/%3E%3C/svg%3E")}
/* === HẾT BỘ ICON === */


/* -----------------------------------------------------------------------------
   4. NÚT
   Flatsome có sẵn [button], nhưng bo góc và cỡ chữ mặc định không khớp bản gốc.
   Gắn class dm-btn vào shortcode button để lấy đúng hình dáng.
   -------------------------------------------------------------------------- */
.dm-sec .button.dm-btn,
.dm-sec a.dm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;          /* khách hay bấm một tay khi tay kia đang cầm đồ hỏng */
  padding: 12px 26px;
  border-radius: 12px;
  font-family: var(--dm-font-head);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  transition: transform .2s, background-color .2s, box-shadow .2s;
}
.dm-sec .button.dm-btn--call,
.dm-sec a.dm-btn--call {
  background: var(--dm-primary);
  color: #fff;
  border: 0;
  box-shadow: 0 10px 24px -14px rgba(12, 95, 191, .9);
}
.dm-sec .button.dm-btn--call:hover,
.dm-sec a.dm-btn--call:hover { background: var(--dm-primary-dk); transform: translateY(-2px); color: #fff; }

.dm-sec .button.dm-btn--ghost,
.dm-sec a.dm-btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .38);
}
.dm-sec .button.dm-btn--ghost:hover,
.dm-sec a.dm-btn--ghost:hover { background: #fff; color: var(--dm-ink); border-color: #fff; }

.dm-sec .button.dm-btn--accent,
.dm-sec a.dm-btn--accent { background: var(--dm-accent); color: var(--dm-charcoal); border: 0; }
.dm-sec .button.dm-btn--accent:hover { background: var(--dm-accent-lt); color: var(--dm-charcoal); }

.dm-btn--block { width: 100%; }


/* -----------------------------------------------------------------------------
   5. HERO
   Chữ bên trái, form gọi thợ bên phải. Khách vào trang này vì đồ đang hỏng nên
   việc cần làm ngay là để lại số — form phải ở màn hình đầu, không bắt cuộn.
   -------------------------------------------------------------------------- */
.dm-hero {
  position: relative;
  /* Lớp phủ tối nằm TRƯỚC ảnh trong danh sách background-image nên đè lên trên ảnh. */
  background-image:
    linear-gradient(rgba(13, 27, 38, .82), rgba(13, 27, 38, .82)),
    var(--dm-hero-image);
  background-size: cover;
  background-position: 57% 43%;
  background-repeat: no-repeat;
}
.dm-hero .dm-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 9px;
  background: rgba(245, 135, 31, .16);
  color: var(--dm-accent);
  font-size: 13px;
  font-weight: 700;
}
.dm-hero h1 {
  font-size: 46px;
  line-height: 1.18;
  margin: 20px 0 0;
  color: #fff;
}
.dm-hero-sub {
  max-width: 560px;
  margin: 18px 0 0;
  font-size: 16.5px;
  color: rgba(255, 255, 255, .76);
}

/* Ba thẻ tin cậy — đúng ba điều khách phân vân trước khi gọi thợ lạ vào nhà */
.dm-hero-badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 26px 0 0;
  padding: 0;
}
.dm-hero-badges li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
}
.dm-hero-badges .dmi { color: var(--dm-accent); }

/* Ba lời hứa vận hành, ngăn bằng gạch mảnh phía trên */
.dm-hero-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  margin: 34px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.dm-hero-facts li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .9);
}
.dm-hero-facts .dmi { color: var(--dm-secondary); font-size: 20px; }

/* Thẻ form trắng nổi trên nền tối */
.dm-form-card {
  background: #fff;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .75);
  color: var(--dm-ink);
}
.dm-form-card h2 { font-size: 19px; margin: 0; }
.dm-form-card .dm-form-note { margin: 6px 0 0; font-size: 14px; color: rgba(22, 34, 46, .6); }


/* -----------------------------------------------------------------------------
   6. FORM (dùng chung cho Contact Form 7 ở hero và ở cuối trang)
   Chỉ nhắm vào form NẰM TRONG .dm-form-card / .dm-form-panel để không đụng tới
   các form khác của website (tìm kiếm, thanh toán WooCommerce...).
   -------------------------------------------------------------------------- */
.dm-form-card .wpcf7 label,
.dm-form-panel .wpcf7 label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(22, 34, 46, .75);
}
.dm-form-card .wpcf7 input[type="text"],
.dm-form-card .wpcf7 input[type="tel"],
.dm-form-card .wpcf7 input[type="email"],
.dm-form-card .wpcf7 input[type="date"],
.dm-form-card .wpcf7 select,
.dm-form-card .wpcf7 textarea,
.dm-form-panel .wpcf7 input[type="text"],
.dm-form-panel .wpcf7 input[type="tel"],
.dm-form-panel .wpcf7 input[type="email"],
.dm-form-panel .wpcf7 input[type="date"],
.dm-form-panel .wpcf7 select,
.dm-form-panel .wpcf7 textarea {
  width: 100%;
  height: 48px;
  margin-bottom: 14px;
  padding: 0 14px;
  border: 1px solid rgba(22, 34, 46, .2);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  font-size: 15px;
  color: var(--dm-ink);
}
.dm-form-card .wpcf7 textarea,
.dm-form-panel .wpcf7 textarea { height: auto; padding: 12px 14px; }
.dm-form-card .wpcf7 input:focus,
.dm-form-card .wpcf7 select:focus,
.dm-form-card .wpcf7 textarea:focus,
.dm-form-panel .wpcf7 input:focus,
.dm-form-panel .wpcf7 select:focus,
.dm-form-panel .wpcf7 textarea:focus {
  border-color: var(--dm-primary);
  box-shadow: 0 0 0 3px rgba(12, 95, 191, .18);
  outline: 0;
}
.dm-form-card .wpcf7 input[type="submit"],
.dm-form-panel .wpcf7 input[type="submit"] {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 12px;
  background: var(--dm-primary);
  color: #fff;
  font-family: var(--dm-font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: background-color .2s;
}
.dm-form-card .wpcf7 input[type="submit"]:hover,
.dm-form-panel .wpcf7 input[type="submit"]:hover { background: var(--dm-primary-dk); }

/* Hai cột trên khổ máy tính cho form dài ở cuối trang */
.dm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.dm-form-grid .dm-form-full { grid-column: 1 / -1; }

/*
 * Câu nhắc BẮT BUỘC dưới nút gửi: tránh khách hiểu nhầm là đã chốt được giá
 * hoặc đã có lịch chắc chắn. Không được xoá khi chỉnh nội dung.
 */
.dm-form-confirm {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  color: rgba(22, 34, 46, .55);
}


/* -----------------------------------------------------------------------------
   7. LƯỚI NHÓM THIẾT BỊ
   Khối quan trọng nhất sau hero: khách quét mắt tìm đúng món đồ nhà mình đang hỏng.
   -------------------------------------------------------------------------- */
.dm-device {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  text-align: left;
  color: var(--dm-ink);
}
.dm-device:hover { color: var(--dm-ink); }
.dm-device-ico {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(12, 95, 191, .10);
  color: var(--dm-primary);
  font-size: 28px;
  transition: background-color .25s, color .25s;
}
.dm-device:hover .dm-device-ico { background: var(--dm-primary); color: #fff; }
.dm-device h3 { margin: 16px 0 0; font-size: 17px; }
.dm-device p  { margin: 8px 0 0; font-size: 14.5px; color: rgba(22, 34, 46, .6); }
/*
 * Ba dòng dưới đây dùng <span> chứ không phải <p>: WordPress chạy wpautop sẽ chèn
 * thẻ <p> lung tung vào nội dung shortcode và phá vỡ thẻ. Đổi lại phải tự khai
 * display:block, nếu không số hạng mục và giá sẽ dính chung một dòng.
 */
.dm-device-foot  { display: block; margin-top: auto; padding-top: 16px; }
.dm-device-count { display: block; margin: 0; font-size: 13.5px; color: rgba(22, 34, 46, .5); }
.dm-device-from  { display: block; margin: 4px 0 0; font-family: var(--dm-font-head); font-size: 15px; font-weight: 800; color: var(--dm-primary); }

.dm-services-note { margin: 34px 0 0; text-align: center; font-size: 15px; color: rgba(22, 34, 46, .6); }
.dm-services-note a { color: var(--dm-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }


/* -----------------------------------------------------------------------------
   8. DẢI CAM KẾT (nền xanh đậm)
   Cắt nhịp trang: trên là danh sách chọn lựa, dưới là câu chuyện thương hiệu.
   -------------------------------------------------------------------------- */
.dm-commit-sec { background: var(--dm-primary); color: #fff; }
.dm-commit-sec .dm-title { color: #fff; }
.dm-commit-sec .dm-eyebrow { background: rgba(255, 255, 255, .18); color: #fff; }
.dm-commit {
  display: flex;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  height: 100%;
}
.dm-commit-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 13px;
  background: rgba(255, 255, 255, .16);
  color: var(--dm-accent);
  font-size: 22px;
}
.dm-commit h3 { margin: 0; font-size: 16.5px; color: #fff; }
.dm-commit p  { margin: 8px 0 0; font-size: 14.5px; color: rgba(255, 255, 255, .76); }


/* -----------------------------------------------------------------------------
   9. GIỚI THIỆU + BA CON SỐ
   Thẻ số liệu cố ý đè lên mép dưới ảnh để "bằng chứng" và "lời kể" dính thành
   một khối. Ảnh about-xuong đã chừa sẵn khoảng trống ở đáy cho thẻ này.
   -------------------------------------------------------------------------- */
.dm-about-media { position: relative; }
.dm-about-media img { display: block; width: 100%; border-radius: var(--dm-radius); }
.dm-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: -48px 26px 0;
  padding: 18px 10px;
  border-radius: var(--dm-radius);
  background: #fff;
  box-shadow: 0 20px 40px -24px rgba(22, 34, 46, .5);
}
.dm-stat { padding: 0 8px; text-align: center; }
.dm-stat + .dm-stat { border-left: 1px solid var(--dm-line); }
.dm-stat b {
  display: block;
  font-family: var(--dm-font-head);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--dm-primary);
}
.dm-stat span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: rgba(22, 34, 46, .6); }

.dm-terms { list-style: none; margin: 28px 0 0; padding: 0; }
.dm-terms li {
  display: flex;
  gap: 12px;
  margin: 0 0 12px;
  padding: 16px;
  border: 1px solid var(--dm-line);
  border-radius: 13px;
  background: #fff;
}
.dm-terms .dmi { color: var(--dm-secondary); font-size: 18px; margin-top: 2px; }
.dm-terms b { display: block; font-family: var(--dm-font-head); font-size: 15px; }
.dm-terms p { margin: 4px 0 0; font-size: 14px; color: rgba(22, 34, 46, .6); }


/* -----------------------------------------------------------------------------
   10. QUY TRÌNH 5 BƯỚC
   Khách cần thấy rõ "kiểm tra rồi mới báo giá, báo giá rồi mới sửa" — đó chính
   là điều họ sợ nhất khi gọi thợ ngoài.
   -------------------------------------------------------------------------- */
.dm-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin: 46px 0 0;
  padding: 0;
  counter-reset: dmstep;
}
.dm-step { position: relative; margin: 0; text-align: center; }
.dm-step::before {
  counter-increment: dmstep;
  content: counter(dmstep);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border: 2px solid var(--dm-primary);
  border-radius: 50%;
  background: #fff;
  font-family: var(--dm-font-head);
  font-size: 19px;
  font-weight: 800;
  color: var(--dm-primary);
  position: relative;
  z-index: 2;
}
/* Đường nối giữa các bước, bỏ ở bước cuối */
.dm-step::after {
  content: "";
  position: absolute;
  top: 28px;
  left: calc(50% + 34px);
  right: -20px;
  height: 1px;
  background: var(--dm-line);
}
.dm-step:last-child::after { display: none; }
.dm-step-label { margin: 16px 0 0; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dm-secondary); }
.dm-step h3 { margin: 6px 0 0; font-size: 16.5px; }
.dm-step p  { margin: 10px 0 0; font-size: 14.5px; color: rgba(22, 34, 46, .6); }


/* -----------------------------------------------------------------------------
   11. BẢNG GIÁ THAM KHẢO
   Khối then chốt của ngành: khách sợ nhất là gọi thợ rồi bị hét giá.
   -------------------------------------------------------------------------- */
/* Tab của Flatsome, vẽ lại thành dạng viên nút */
.dm-price .nav-tabs { border-bottom: 0; margin-bottom: 22px; gap: 8px; flex-wrap: nowrap; overflow-x: auto; }
.dm-price .nav-tabs::-webkit-scrollbar { display: none; }
.dm-price .nav-tabs { -ms-overflow-style: none; scrollbar-width: none; }
.dm-price .nav-tabs > li { margin: 0; flex: none; }
.dm-price .nav-tabs > li > a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid var(--dm-line);
  border-radius: 12px;
  background: #fff;
  color: rgba(22, 34, 46, .7);
  font-family: var(--dm-font-head);
  font-size: 14.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.dm-price .nav-tabs > li > a::before,
.dm-price .nav-tabs > li > a::after { display: none; }
.dm-price .nav-tabs > li.active > a,
.dm-price .nav-tabs > li.active > a:hover {
  border-color: var(--dm-primary);
  background: var(--dm-primary);
  color: #fff;
}

.dm-price-wrap {
  overflow-x: auto;
  border: 1px solid var(--dm-line);
  border-radius: var(--dm-radius);
  background: #fff;
}
.dm-price-table { width: 100%; min-width: 600px; margin: 0; border-collapse: collapse; }
.dm-price-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dm-price-table thead th {
  padding: 13px 20px;
  border: 0;
  background: rgba(22, 34, 46, .04);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(22, 34, 46, .5);
  text-align: left;
}
.dm-price-table thead th:last-child { text-align: right; }
.dm-price-table tbody tr { border-top: 1px solid rgba(22, 34, 46, .07); }
.dm-price-table tbody tr:hover { background: rgba(241, 245, 250, .7); }
.dm-price-table td, .dm-price-table th[scope="row"] {
  padding: 16px 20px;
  border: 0;
  vertical-align: top;
  font-weight: 400;
  text-align: left;
}
.dm-price-name { font-family: var(--dm-font-head); font-weight: 700; }
.dm-price-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(245, 135, 31, .16);
  color: var(--dm-accent);
  font-size: 11.5px;
  font-weight: 700;
}
.dm-price-desc { display: block; max-width: 460px; margin-top: 6px; font-size: 14px; line-height: 1.6; color: rgba(22, 34, 46, .55); }
.dm-price-time { white-space: nowrap; font-size: 14.5px; color: rgba(22, 34, 46, .6); }
.dm-price-cost { white-space: nowrap; text-align: right !important; }
.dm-price-cost b { font-family: var(--dm-font-head); font-size: 15.5px; font-weight: 800; color: var(--dm-primary); }
/* Hạng mục phụ thuộc linh kiện: KHÔNG bịa giá, để khách gọi hỏi */
.dm-price-cost em { font-style: normal; font-size: 14.5px; color: rgba(22, 34, 46, .55); }

/*
 * Ghi chú "giá tham khảo" — BẮT BUỘC, không được xoá. Thiếu dòng này thì bảng giá
 * đứng trơ như thể đó là giá đã chốt, và đó là nguồn gốc của mọi tranh cãi sau này.
 */
.dm-price-note {
  display: flex;
  gap: 10px;
  margin: 22px 0 0;
  padding: 16px;
  border: 1px solid rgba(245, 135, 31, .3);
  border-radius: 13px;
  background: rgba(245, 135, 31, .07);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(22, 34, 46, .72);
}
.dm-price-note .dmi { color: var(--dm-accent); font-size: 18px; margin-top: 2px; }


/* -----------------------------------------------------------------------------
   12. ĐỘI NGŨ KỸ THUẬT VIÊN
   Khối này không phải để khoe — nó trả lời "ai sẽ vào nhà tôi".
   -------------------------------------------------------------------------- */
.dm-tech { overflow: hidden; height: 100%; }
.dm-tech img { display: block; width: 100%; aspect-ratio: 4 / 3.6; object-fit: cover; }
.dm-tech-body { padding: 20px; }
.dm-tech h3 { margin: 0; font-size: 16.5px; }
.dm-tech-role { margin: 4px 0 0; font-size: 14px; color: rgba(22, 34, 46, .6); }
.dm-tech-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dm-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
}
.dm-tag--years { background: rgba(12, 95, 191, .10); color: var(--dm-primary); }
.dm-tag--level { background: rgba(14, 154, 167, .12); color: var(--dm-secondary); }
.dm-tech-bio { margin: 14px 0 0; font-size: 14px; color: rgba(22, 34, 46, .6); }


/* -----------------------------------------------------------------------------
   13. ĐÁNH GIÁ KHÁCH HÀNG
   -------------------------------------------------------------------------- */
.dm-review { display: flex; flex-direction: column; height: 100%; padding: 20px; }
.dm-stars { color: var(--dm-accent); font-size: 15px; letter-spacing: 1px; }
.dm-review blockquote {
  flex: 1;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 15px;
  font-style: normal;
  line-height: 1.68;
  color: rgba(22, 34, 46, .7);
}
.dm-review figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--dm-line);
}
.dm-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: rgba(12, 95, 191, .10);
  font-family: var(--dm-font-head);
  font-size: 15px;
  font-weight: 800;
  color: var(--dm-primary);
}
/*
 * KHONG viet `.dm-review span {display:block}`: selector do co do uu tien cao hon
 * `.dm-avatar` nen se pha luon vong tron chu cai dau. Chon bang class tuong minh.
 */
.dm-review-who     { display: block; min-width: 0; }
.dm-review-who b   { display: block; font-family: var(--dm-font-head); font-size: 15px; }
.dm-review-loc     { display: block; font-size: 13px; color: rgba(22, 34, 46, .5); }


/* -----------------------------------------------------------------------------
   13b. ALBUM ẢNH
   Dùng lưới ảnh thường thay cho [ux_gallery]: shortcode đó đòi 8 ID đính kèm, mà tra
   ID là bước hay sai nhất lúc bàn giao. Đổi lại thì mất phóng to ảnh (lightbox) —
   muốn có thì thay cả khối này bằng [ux_gallery ids="1,2,..." columns="4" lightbox="true"].
   -------------------------------------------------------------------------- */
.dm-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.dm-gallery-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
}


/* -----------------------------------------------------------------------------
   14. HỎI ĐÁP (accordion của Flatsome)
   -------------------------------------------------------------------------- */
.dm-faq .accordion-item {
  margin-bottom: 12px;
  border: 1px solid var(--dm-line);
  border-radius: var(--dm-radius);
  background: #fff;
  overflow: hidden;
  transition: border-color .25s;
}
.dm-faq .accordion-item.active { border-color: rgba(12, 95, 191, .35); }
.dm-faq .accordion-title {
  padding: 18px 20px;
  border: 0;
  font-family: var(--dm-font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--dm-ink);
}
.dm-faq .accordion-title.active { color: var(--dm-primary); }
.dm-faq .accordion-title button { font-size: 16px; }
.dm-faq .accordion-inner { padding: 0 20px 20px; font-size: 15px; line-height: 1.68; color: rgba(22, 34, 46, .65); }

.dm-faq-cta { margin-top: 24px; padding: 20px; border: 1px solid var(--dm-line); border-radius: var(--dm-radius); background: #fff; }
.dm-faq-cta p { margin: 0 0 16px; font-size: 14.5px; color: rgba(22, 34, 46, .65); }


/* -----------------------------------------------------------------------------
   15. CHI NHÁNH & KHU VỰC PHỤC VỤ
   Khách không quan tâm trụ sở ở đâu — họ cần biết "nhà tôi có nằm trong vùng các
   anh tới không". Hai thông tin này phải đứng cạnh nhau.
   -------------------------------------------------------------------------- */
.dm-areas-label { margin: 0; text-align: center; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(22, 34, 46, .45); }
.dm-areas { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 0; padding: 0; }
.dm-areas li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--dm-line);
  border-radius: 10px;
  background: var(--dm-cream);
  font-size: 14px;
  color: rgba(22, 34, 46, .75);
}
.dm-areas .dmi { color: var(--dm-secondary); }

.dm-branch { padding: 20px; height: 100%; }
.dm-branch-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dm-branch h3 { margin: 0; font-size: 16px; }
.dm-branch-main { padding: 2px 8px; border-radius: 6px; background: rgba(12, 95, 191, .10); font-size: 11.5px; font-weight: 700; color: var(--dm-primary); }
.dm-branch ul { list-style: none; margin: 12px 0 0; padding: 0; }
.dm-branch li { display: flex; gap: 10px; margin: 0 0 8px; font-size: 14.5px; color: rgba(22, 34, 46, .65); }
.dm-branch .dmi { color: var(--dm-secondary); font-size: 18px; margin-top: 2px; }
.dm-branch a { color: var(--dm-primary); font-weight: 600; }
.dm-branch-dir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dm-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.dm-map { overflow: hidden; border: 1px solid var(--dm-line); border-radius: var(--dm-radius); }
.dm-map iframe { display: block; width: 100%; height: 420px; border: 0; }


/* -----------------------------------------------------------------------------
   16. KHỐI ĐẶT LỊCH (nền tối)
   -------------------------------------------------------------------------- */
.dm-booking { background: var(--dm-charcoal); color: #fff; }
.dm-booking .dm-title { color: #fff; }
.dm-booking .dm-eyebrow { background: rgba(255, 255, 255, .13); color: var(--dm-accent); }
.dm-booking-lead { margin: 16px 0 0; font-size: 15.5px; color: rgba(255, 255, 255, .7); }
.dm-booking-list { list-style: none; margin: 26px 0 0; padding: 0; }
.dm-booking-list li { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 15px; color: rgba(255, 255, 255, .85); }
.dm-booking-list .dmi { color: var(--dm-accent); font-size: 20px; }
.dm-urgent { margin-top: 26px; padding: 20px; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--dm-radius); }
.dm-urgent p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .6); }
.dm-urgent a {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-family: var(--dm-font-head);
  font-size: 24px;
  font-weight: 800;
  color: var(--dm-accent);
}
.dm-form-panel { padding: 26px; border-radius: 18px; background: #fff; color: var(--dm-ink); }


/* -----------------------------------------------------------------------------
   17. NÚT GỌI NỔI
   Đặt HTML này vào Flatsome → Advanced → Global HTML → Footer Scripts,
   hoặc một Block gắn ở chân trang.
   -------------------------------------------------------------------------- */
.dm-float { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.dm-float a { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; color: #fff; font-size: 20px; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .7); transition: transform .2s; }
.dm-float a:hover { transform: translateY(-2px); color: #fff; }
.dm-float .dm-float-zalo { background: var(--dm-secondary); font-family: var(--dm-font-head); font-size: 13px; font-weight: 800; }
.dm-float .dm-float-call {
  width: auto;
  gap: 10px;
  display: flex;
  align-items: center;
  padding: 13px 20px 13px 16px;
  border-radius: 999px;
  background: var(--dm-primary);
  font-family: var(--dm-font-head);
  font-size: 15px;
  font-weight: 800;
  animation: dm-pulse 2.4s ease-in-out infinite;
}
@keyframes dm-pulse {
  0%, 100% { box-shadow: 0 12px 28px -12px rgba(12, 95, 191, .75); }
  50%      { box-shadow: 0 12px 34px -8px rgba(12, 95, 191, .95); }
}

/* Thanh hành động dính đáy trên điện thoại — chia đôi Gọi / Đặt lịch */
.dm-callbar { display: none; }
.dm-callbar a { display: flex; flex: 1; align-items: center; justify-content: center; gap: 8px; padding: 14px 8px; font-family: var(--dm-font-head); font-size: 15px; font-weight: 700; }
.dm-callbar-call { background: var(--dm-primary); color: #fff; }
.dm-callbar-book { background: var(--dm-accent); color: var(--dm-charcoal); }
.dm-callbar-call:hover { color: #fff; }
.dm-callbar-book:hover { color: var(--dm-charcoal); }


/* -----------------------------------------------------------------------------
   18. RESPONSIVE
   Dùng đúng hai điểm ngắt của Flatsome: 849px (máy tính bảng) và 549px (điện thoại).
   -------------------------------------------------------------------------- */
@media screen and (max-width: 849px) {
  .dm-title      { font-size: 28px; }
  .dm-hero h1    { font-size: 34px; }
  .dm-steps      { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .dm-step::after{ display: none; }   /* đường nối chỉ có nghĩa khi xếp một hàng */
  .dm-form-grid  { grid-template-columns: 1fr; }
  .dm-map iframe { height: 320px; }
  .dm-stats      { margin: -40px 16px 0; }
  .dm-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

@media screen and (max-width: 549px) {
  .dm-title   { font-size: 25px; }
  .dm-hero h1 { font-size: 29px; }
  .dm-steps   { grid-template-columns: 1fr; }
  .dm-stat b  { font-size: 22px; }
  .dm-hero-facts { gap: 12px 20px; }
  .dm-gallery-grid { grid-template-columns: repeat(2, 1fr); }

  /* Trên điện thoại: bỏ cụm nút tròn, thay bằng thanh dính đáy to hơn, dễ bấm hơn */
  .dm-float   { display: none; }
  .dm-callbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; border-top: 1px solid var(--dm-line); background: #fff; box-shadow: 0 -4px 20px -10px rgba(22, 34, 46, .5); }
  /* Chừa chỗ cho thanh đó, nếu không nó che mất phần cuối trang */
  body.dm-has-callbar #main { padding-bottom: 58px; }
}


/* -----------------------------------------------------------------------------
   19. IN ẤN & TRỢ NĂNG
   -------------------------------------------------------------------------- */
/* Viền focus rõ: trang có nhiều form và tab, người dùng bàn phím cần thấy mình ở đâu */
.dm-sec a:focus-visible,
.dm-sec button:focus-visible,
.dm-sec input:focus-visible,
.dm-sec select:focus-visible,
.dm-sec textarea:focus-visible {
  outline: 3px solid var(--dm-primary);
  outline-offset: 2px;
}

/* Tôn trọng người dùng đã tắt hiệu ứng chuyển động trong hệ điều hành */
@media (prefers-reduced-motion: reduce) {
  .dm-float .dm-float-call { animation: none; }
  .dm-card, a.dm-card, .dm-device-ico { transition: none; }
  .dm-card:hover, a.dm-card:hover { transform: none; }
}

@media print {
  .dm-float, .dm-callbar, .dm-booking { display: none !important; }
}



@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}