/*
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
   -------------------------------------------------------------------------- */
.nav > li > a{
	font-family: var(--dm-font-head) !important;
}
.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.6; }

/* 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; }

/*
 * ĐIỂM NEO CHO ANCHOR.
 *
 * Hai thứ KHÔNG dùng được, đã thử và hỏng trên site thật:
 *   - id đặt trên [section]: Flatsome vứt đi, tự sinh id="section_1117504451".
 *   - <span class="dm-anchor" id="..."></span>: span rỗng bị WordPress xoá sạch.
 *
 * Nên id được gắn thẳng lên dòng nhãn nhỏ đầu mỗi khối (.dm-eyebrow). Dòng đó có
 * chữ nên chắc chắn không bị xoá.
 *
 * 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-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-image: var(--dm-i); mask-image: var(--dm-i);
  -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;   }

/*
 * ICON LỚN TRONG Ô BO GÓC (thẻ thiết bị, dải cam kết).
 *
 * Đã thử hai cách và cả hai đều bị WordPress ăn mất:
 *   1. <span class="dm-device-ico"><i class="dmi ..."></i></span>
 *      -> span không chứa chữ, bị xoá sạch.
 *   2. <i class="dm-ico dmi-fridge"></i> đứng riêng một mình
 *      -> trình soạn thảo đổi thành <p>&nbsp;</p>.
 *
 * Luật thật là: phần tử rỗng chỉ sống khi nó nằm CẠNH CHỮ trong cùng một khối
 * (vd. <li><i class="dmi dmi-check"></i> Kiểm tra miễn phí</li> vẫn nguyên vẹn).
 *
 * Nên icon lớn không còn là một thẻ riêng nữa mà VẼ BẰNG CSS trên chính thẻ <h3>:
 * ::before là ô nền, ::after là hình vẽ. <h3> luôn có chữ nên không đời nào bị xoá.
 *
 * Dùng:  <h3 class="dmi-fridge">Tủ lạnh</h3>
 */

/* === BẮT ĐẦU BỘ ICON (sinh tự động — đừng sửa tay, sửa ở dm-icon.blade.php) === */
.dmi-tv{--dm-i: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{--dm-i: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{--dm-i: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{--dm-i: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{--dm-i: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{--dm-i: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{--dm-i: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{--dm-i: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{--dm-i: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{--dm-i: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{--dm-i: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{--dm-i: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{--dm-i: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{--dm-i: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{--dm-i: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{--dm-i: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{--dm-i: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{--dm-i: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{--dm-i: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{--dm-i: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{--dm-i: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{--dm-i: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{--dm-i: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")}
.dmi-logo{--dm-i:url("/wp-content/uploads/2026/09/logo-ver2.png")}
/* === 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) !important;
}


/* -----------------------------------------------------------------------------
   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 {
  position: relative;          /* mốc cho link trải rộng bên dưới */
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  text-align: left;
  color: var(--dm-ink);
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.dm-device h3 {
  position: relative;
  margin: 0;
  padding-top: 72px;          /* 56px ô icon + 16px khoảng cách */
  font-size: 17px;
}
.dm-device h3::before {       /* ô nền bo góc */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(12, 95, 191, .10);
  transition: background-color .25s;
}
.dm-device h3::after {        /* hình vẽ, tô bằng mask nên đổi màu được */
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  width: 28px;
  height: 28px;
  background-color: var(--dm-primary);
  -webkit-mask: var(--dm-i) center / contain no-repeat;
          mask: var(--dm-i) center / contain no-repeat;
  transition: background-color .25s;
}
.dm-device:hover h3::before { background: var(--dm-primary); }
.dm-device:hover h3::after  { background-color: #fff; }
.dm-device h3 a { color: inherit; }
/*
 * Link nằm trong <h3> nhưng phủ ra cả thẻ, nên bấm chỗ nào trong thẻ cũng đi.
 * Cố ý KHÔNG bọc cả thẻ bằng <a>: thẻ <a> là phần tử inline, wpautop của WordPress
 * gặp <h3> bên trong sẽ đóng <a> lại giữa chừng và thẻ vỡ làm đôi.
 */
.dm-device h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--dm-radius);
}
.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 {
  position: relative;
  height: 100%;
  padding: 24px 0 0 60px;     /* chừa chỗ bên trái cho ô icon */
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.dm-commit h3::before {       /* ô nền */
  content: "";
  position: absolute;
  top: 24px;
  left: 0;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .16);
}
.dm-commit h3::after {        /* hình vẽ */
  content: "";
  position: absolute;
  top: 35px;
  left: 11px;
  width: 22px;
  height: 22px;
  background-color: var(--dm-accent);
  -webkit-mask: var(--dm-i) center / contain no-repeat;
          mask: var(--dm-i) center / contain no-repeat;
}
.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 p:first-child { margin-top: 0; }
/* Trình soạn thảo bọc <b> vào trong <p>, nên phải khai màu rõ kẻo tiêu đề bị chìm. */
.dm-terms b { display: block; font-family: var(--dm-font-head); font-size: 15px; color: var(--dm-ink); }
.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: -120px;
  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;
}
.gl-wm img, .gl-wm .box-image{
	border-radius: 16px;
}

/* -----------------------------------------------------------------------------
   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: 12px 32px;
  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); }

/* -----------------------------------------------------------------------------
   16b. CHÂN TRANG
   Dán HTML ở footer.txt vào một widget "HTML tuỳ chỉnh" trong vùng Footer 1.
   Widget HTML giữ nguyên mã, KHÔNG chạy qua wpautop hay bộ lọc của trình soạn thảo —
   đây là chỗ an toàn nhất để đặt HTML thô trong WordPress.
   -------------------------------------------------------------------------- */
.dm-footer {
  background: var(--dm-charcoal);
  color: rgba(255, 255, 255, .7);
  font-family: var(--dm-font-body);
  font-size: 14.5px;
  line-height: 1.7;
}
.dm-footer .col{
	padding-bottom: 0 !important;
}
/* Khai tường minh: một số cấu hình Flatsome gạch chân link trong khu widget. */
.dm-footer a { color: inherit; text-decoration: none; }
.dm-footer a:hover { color: #0C5FBF; text-decoration: none; }

.dm-footer-inner {
  display: grid;
  grid-template-columns: 1.4fr .8fr 1fr 1.3fr;
  gap: 24px;
  max-width: var(--dm-container);
  margin: 0 auto;
  padding: 0 15px 5px;
}

/* Cột thương hiệu */
.dm-footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--dm-font-head);
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}
.dm-footer-logo .dmi {
  width: 100px;
  height: 100px;
  padding: 9px;
  border-radius: 12px;
  color: #fff;
  box-sizing: border-box;
}
.dm-footer-logo p{
	font-size: 24px;
	margin-bottom: 0;
    line-height: 1;
}
.dm-footer-logo p>span{
	font-size: 12px;
}
.dm-footer-tagline { margin: 14px 0 0; }
.dm-footer-promise { list-style: none; margin: 18px 0 0; padding: 0; }
.dm-footer-promise li { display: flex; gap: 10px; margin: 0 0 10px !important; }
.dm-footer-promise .dmi { margin-top: 5px; color: var(--dm-accent); font-size: 18px; }

/* Ba cột danh sách */
.dm-footer-head {
  margin: 0 0 18px !important;
  font-family: var(--dm-font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}
.dm-footer-links { list-style: none; margin: 0; padding: 0; }
.dm-footer-links li { margin: 0 0 10px; margin-left: 0 !important;}
.dm-footer-areas li,
.dm-footer-contact li { display: flex; gap: 10px; }
.dm-footer-areas .dmi,
.dm-footer-contact .dmi { margin-top: 5px; color: var(--dm-accent); font-size: 18px; }
.dm-footer-contact a { word-break: break-all; }

/* Hotline — phần quan trọng nhất của chân trang */
.dm-footer-hotline { margin: 0 0 18px; }
.dm-footer-hotline a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--dm-font-head);
  font-size: 21px;
  font-weight: 800;
  color: var(--dm-accent);
}
.dm-footer-hotline a:hover { color: var(--dm-accent-lt); }

.dm-footer-social { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.dm-footer-social a {
  padding: 8px 14px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 10px;
  font-size: 13px;
}
.dm-footer-social a:hover { border-color: var(--dm-accent); }

.dm-footer-bottom {
  margin: 0;
  padding: 15px 15px 0;
  border-top: 1px solid rgba(255, 255, 255, .10);
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, .45);
}
.absolute-footer.dark{
	display: none;
}

/* -----------------------------------------------------------------------------
   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); }


.main-menu-overlay{
	background-color: rgba(0, 102, 191, 0.8) !important;
}
.off-canvas-center .mfp-content{
	padding-top: unset !important;
}
.off-canvas-center .nav-sidebar.nav-vertical>li>a{
	color: #fff !important;
	font-size: 2em !important;
}
.mfp-close{
	color: #fff !important;
	opacity: 1 !important; 
}
.dark .wpcf7{
	color: #000 !important;
} 
/* -----------------------------------------------------------------------------
   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); }
  .dm-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; padding: 0 15px 36px; }
}

@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); }
  .dm-footer-inner { grid-template-columns: 1fr; gap: 28px; }

  /* 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 h3::before, .dm-device h3::after { transition: none; }
  .dm-card:hover, a.dm-card:hover { transform: none; }
}

@media print {
  .dm-float, .dm-callbar, .dm-booking { display: none !important; }
  .dm-footer { background: none; color: #000; }
}



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


}