/*
Theme Name: Điện Lạnh Tiến Phát
Theme URI: https://maylanhcuvungtau.com
Author: luuhung93
Author URI: https://maylanhcuvungtau.com
Description: Giao diện độc quyền được thiết kế cực kì tối ưu và nhẹ nhàng dành riêng cho Điện Lạnh Tiến Phát. Được trang bị tông màu Xanh Rêu hiện đại, chuẩn UI/UX ngành dịch vụ điện lạnh và đạt điểm tuyệt đối về tốc độ tải trang.
Version: 1.0.0
Text Domain: tp-maylanhcuvungtau
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


:root {
  --tp-primary: #0A4E5C;
  --tp-accent: #ff6b35;
  --tp-light: #f0f7ff;
  --tp-text: #222222;
}

/* Flatsome header color set to Coastline palette */
.header-wrapper,
.header {
  background-color: #ffffff;
}

.header-nav-main.nav>li>a,
.header-nav.nav>li>a,
.header-nav-main.nav>li>a span,
.header-nav.nav>li>a span,
.header .nav>li>a {
  color: var(--tp-text) !important;
}

.header-nav-main.nav>li>a:hover,
.header-nav.nav>li>a:hover,
.header .nav>li>a:hover,
.header-nav-main.nav>li.current-menu-item>a,
.header-nav.nav>li.current-menu-item>a {
  color: var(--tp-primary) !important;
}

/* Mobile menu links */
.nav-vertical.nav>li>a,
.off-canvas .nav-vertical>li>a {
  color: var(--tp-text) !important;
}

.nav-vertical.nav>li>a:hover,
.off-canvas .nav-vertical>li>a:hover,
.nav-vertical.nav>li.current-menu-item>a {
  color: var(--tp-primary) !important;
}

.header-button .button,
.header-button-1 .button,
.header-button-2 .button {
  background-color: var(--tp-accent);
  border-color: var(--tp-accent);
  color: #ffffff;
}

.header-button .button:hover,
.header-button-1 .button:hover,
.header-button-2 .button:hover {
  background-color: var(--tp-primary);
  border-color: var(--tp-primary);
  color: #ffffff;
}



@media (min-width: 960px) {
  #header a.nav-top-link {
    padding-bottom: 0;
  }
}


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


}

/* ========================================================
   MAYLANHCUVUNGTAU UI KIT - DESIGN SYSTEM
   Base Typography & Variables (Local Fonts)
======================================================== */

:root {
  /* Typography Variables */
  --font-body: 'Inter', 'Noto Sans', sans-serif;
  --font-heading: 'Newsreader', serif;

  /* Core Palette (UI Kit) */
  --bg-primary: #F4F7F6;
  --bg-secondary: #E8EEED;
  --surface-white: #FFFFFF;

  --ink-primary: #1A1A1A;
  --ink-soft: #2D3748;
  --ink-muted: #718096;

  /* Accents & Brand */
  --accent-teal-deep: #0A4E5C;
  --accent-teal-light: #218F9C;
  --accent-orange: #0A4E5C;

  /* Article Reading UI specific */
  --article-bg: #F7FAF9;
  --article-line: #DDE8E6;

  /* Borders & Radius */
  --radius-m: 16px;
  --border-soft: #DDE8E6;
}

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

body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--ink-soft);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================================
   TYPOGRAPHY RULES
======================================================== */

/* Editorial Headings (Dùng Newsreader) */
h1, h2, h3, h4, h5, h6,
.article-title,
.section-heading {
  font-family: var(--font-heading);
  color: var(--ink-primary);
  margin-bottom: 0.5em;
  font-weight: 600;
  line-height: 1.2;
}

.article-title {
  font-size: 2.5rem; /* ~40px */
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink-primary);
}

/* Base text elements (Dùng Inter) */
p, li, span, a, label, button, .meta-text {
  font-family: var(--font-body);
}

a {
  color: var(--accent-teal-deep);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--accent-teal-light);
}

/* ========================================================
   POST CONTENT READING UI
======================================================== */
.post-reading-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 20px;
  background-color: var(--surface-white);
  border-radius: var(--radius-m);
}

/* Hero & Meta Area */
.article-hero {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--article-line);
}

.article-meta-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/* Các nhãn category (Badge) */
.meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background-color: var(--article-bg);
  border-radius: 4px;
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
  color: var(--accent-teal-deep);
}

/* Các thông tin phụ: Ngày, tác giả, thời gian đọc */
.meta-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem; /* 14px */
  color: var(--ink-muted);
}

/* Content Body */
.post-content {
  font-size: 1.125rem; /* 18px */
  line-height: 1.8;
  color: var(--ink-primary);
}

.post-content p {
  margin-bottom: 1.5em;
}

.post-content h2 {
  font-size: 1.75rem; /* 28px */
  margin-top: 2em;
}

/* Highlight / Alert Block (Box thông tin nổi bật/gọi thợ) */
.content-alert {
  background-color: var(--article-bg);
  border-left: 4px solid var(--accent-orange);
  padding: 24px;
  margin: 32px 0;
  border-radius: 0 8px 8px 0;
}