/* =====================================================================
   AN UI — nguyenthanhan.com
   Thay thế bentofolio-core.css, bentofolio-custom.css, responsive.css.
   Giữ: bootstrap (lưới), spacing.css (class tiện ích), bentofolio-unit.css
   (mặc định nội dung WordPress), slick, magnific-popup, fontawesome.

   ĐỔI THƯƠNG HIỆU:
   - Màu nhấn: --primary trong :root (nền sáng) và trong html.an-dark (nền tối).
   - Font: --app-font, một dòng.
   ===================================================================== */

:root {
  color-scheme: light;

  /* ===== FONT ===== */
  --app-font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ===== MÀU NHẤN, CHỖ 1/2: NỀN SÁNG =====
     Xanh brand #4770FF hạ một bậc cùng sắc để chữ trắng trên nút đạt 5.15:1
     (#4770FF chỉ 4.18:1) và chữ xanh trên nền trang đạt 4.69:1. */
  --primary: #3a5ff0;
  --primary-hover: #3355d8;
  --primary-foreground: #ffffff;
  --primary-light: rgb(58 95 240 / 0.08);
  /* ======================================== */

  /* Nút "Let's Talk" trên header: khối đậm, giữ vai của bản gốc. */
  --ink: #1a1f2c;
  --ink-hover: #2c3344;
  --ink-foreground: #ffffff;

  --background: #f4f5f7;
  --surface: #ffffff;
  --foreground: #1a1f2c;
  --body-text: #474e5f;      /* chữ đoạn văn: 8.3:1 trên trắng */
  --muted: #646b7d;          /* chữ phụ: 5.4:1 trên trắng, 4.9:1 trên nền trang */
  --border: #eceef2;         /* đường tóc: viền card, vạch chia */
  --border-strong: #dfe2e8;  /* viền ô nhập, nút viền */
  --item-hover: #f4f5f7;
  --secondary: #eceef2;
  --secondary-hover: #e2e5eb;
  --tile: #f4f5f7;           /* ô icon, ô ảnh nằm trong card */
  --surface-overlay: #ffffff;
  --elevation-popover: 0 10px 15px -3px rgb(26 31 44 / 0.10), 0 4px 6px -4px rgb(26 31 44 / 0.10);
  --ring-focus: rgb(58 95 240 / 0.14);
  --border-focus: var(--primary);
  --star: #e9a23b;

  --success: #007a55;
  --success-bg: #ecfdf5;
  --error-text: #c10007;
  --error-bg: #fef2f2;
  --error-border: #ffc9c9;

  --an-radius-card: 16px;
  --an-radius: 12px;
  --an-radius-sm: 8px;
  --an-header-h: 64px;
  --an-gap: 20px;
}

/* ===== NỀN TỐI =====
   Bật bằng html.an-dark (script đầu trang + nút đổi giao diện của theme). */
html.an-dark {
  color-scheme: dark;

  /* ===== MÀU NHẤN, CHỖ 2/2: NỀN TỐI ===== */
  --primary: #7c9bff;
  --primary-hover: #6b8cf6;
  --primary-foreground: #05060f;
  --primary-light: rgb(124 155 255 / 0.12);
  /* ===================================== */

  --ink: #e9edf5;
  --ink-hover: #cfd5e0;
  --ink-foreground: #05060f;

  --background: #05060f;
  --surface: #0f111a;
  --foreground: #e9edf5;
  --body-text: #b7bdcc;
  --muted: #8b93a7;
  --border: rgb(160 180 220 / 0.12);
  --border-strong: rgb(160 180 220 / 0.18);
  --item-hover: rgb(255 255 255 / 0.05);
  --secondary: rgb(255 255 255 / 0.08);
  --secondary-hover: rgb(255 255 255 / 0.13);
  --tile: rgb(255 255 255 / 0.05);
  --surface-overlay: #171a26;
  --elevation-popover: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
  --ring-focus: rgb(124 155 255 / 0.18);
  --border-focus: rgb(124 155 255 / 0.6);
  --star: #f0b45a;

  --success: #00d492;
  --success-bg: rgb(0 188 125 / 0.15);
  --error-text: #ff6467;
  --error-bg: rgb(251 44 54 / 0.1);
  --error-border: rgb(251 44 54 / 0.3);
}

/* ===== THANH CUỘN TỰ ẨN (tokens.css của skill) ===== */
* { --scrollbar-thumb: transparent; }
*:hover { --scrollbar-thumb: color-mix(in srgb, var(--foreground) 16%, transparent); }
.is-scrolling { --scrollbar-thumb: color-mix(in srgb, var(--foreground) 28%, transparent); }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--foreground) 40%, transparent); }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  *:hover { scrollbar-color: color-mix(in srgb, var(--foreground) 18%, transparent) transparent; }
}
html:hover { --scrollbar-thumb: color-mix(in srgb, var(--foreground) 16%, transparent); }

/* =====================================================================
   1. NỀN TẢNG
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { background: var(--background); }

body {
  margin: 0;
  padding: 16px 0 24px;
  min-height: 100vh;
  font-family: var(--app-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--foreground);
  background: var(--background);
  overflow-x: hidden;
  word-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--app-font);
  color: var(--foreground);
  font-weight: 600;
  line-height: 1.25;
}

p { margin: 0; color: var(--body-text); font-size: 16px; line-height: 1.65; }
ul, ol { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }

a { color: var(--primary); text-decoration: none; transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
a:hover { color: var(--primary-hover); }
a, span, small { display: inline-block; }
button { font-family: inherit; transition: color .15s ease, background-color .15s ease, border-color .15s ease; }

::selection { background: var(--primary); color: var(--primary-foreground); }

/* Không vẽ vòng focus khi bấm chuột; chỉ khi đi bằng bàn phím. */
a:focus, button:focus, .btn:focus { outline: none; box-shadow: none; }
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--an-radius-sm);
}

.mt-24 { margin-top: var(--an-gap); }
.mb-24 { margin-bottom: var(--an-gap); }
.list-unstyled { padding-left: 0 !important; list-style: none; }
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
#page-content { display: none; }

/* Hình nền trôi và vật thể 3D của theme cũ: bỏ, nền phẳng. */
.background-shapes { display: none !important; }

/* Lưới Bootstrap: khe 20px cho mọi hàng .g-4 */
.row.g-4 { --bs-gutter-x: var(--an-gap); --bs-gutter-y: var(--an-gap); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   2. CARD
   ===================================================================== */
.card {
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--an-radius-card);
  box-shadow: none;
  color: var(--foreground);
}
.card-body { padding: 24px; }
.content-box-area .card { height: auto; }

.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--foreground);
}

/* Link "Xem tất cả" cạnh tiêu đề card */
.card-title .link-btn,
.link-btn.bo-border-btn,
.lets-talk-together-card .link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--primary);
  white-space: nowrap;
  min-height: 32px;
}
.card-title .link-btn { margin: -6px 0; }
.expertise-main.mt-24, .services-main.mt-24 { margin-top: 16px; }
.card-title .link-btn:hover,
.link-btn.bo-border-btn:hover,
.lets-talk-together-card .link-btn:hover { color: var(--primary-hover); }
.card-title .link-btn .icon,
.lets-talk-together-card .link-btn .icon,
.link-btn .icon { stroke: currentColor !important; width: 16px; height: 16px; }

/* =====================================================================
   3. HEADER
   ===================================================================== */
.header-area { position: sticky; top: 12px; z-index: 99; width: 100%; }
.header-area .navbar { padding: 0; }

.header-area .menu-container {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: var(--an-header-h);
  padding: 8px 8px 8px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--an-radius-card);
  box-shadow: none;
}

.header-area .container .navbar-brand { display: inline-flex; align-items: center; gap: 12px; padding: 0; }
.header-area .logo img { display: block; height: 44px; width: auto; max-width: 240px; object-fit: contain; }
html.an-dark .header-area .logo img { background: #fff; border-radius: var(--an-radius-sm); padding: 2px 6px; }

.header-area .container .navbar-main { display: inline-flex; align-items: center; gap: 12px; }
.header-area .navbar-expand-lg .navbar-info { display: block !important; }
.header-area .navbar-info { margin: 0 auto; padding: 0; }
.header-area .navbar-info li { position: relative; display: inline-block; list-style: none; }

.header-area .navbar-info a,
.header-area .navbar-expand-lg .navbar-info a {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px !important;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  color: var(--muted);
}
.header-area .navbar-info a .nav-icon {
  width: 18px;
  height: 18px;
  margin: 0;
  stroke: currentColor;
  transition: none;
}
.header-area .navbar-info li:hover > a { background: var(--item-hover); color: var(--foreground); }
.header-area .navbar-info .active > .nav-links,
.header-area .navbar-info .current-menu-item > .nav-links,
.header-area .navbar-info .current_page_parent > .nav-links {
  background: var(--secondary);
  color: var(--foreground);
  font-weight: 500;
}

/* Menu con (nếu có) */
.navbar-info .has-dropdown .submenu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 999;
  min-width: 220px;
  padding: 6px;
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  border-radius: var(--an-radius);
  box-shadow: var(--elevation-popover);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  transform-origin: top left;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.navbar-info li:hover > .submenu { visibility: visible; opacity: 1; transform: none; }
.navbar-info .has-dropdown .submenu li { display: block; width: 100%; }
.navbar-info .has-dropdown .submenu .submenu { left: 100%; top: 0; }

.header-right-info { gap: 8px; }

/* Nút đổi sáng/tối */
.header-area .header-right-info .theme-control-btn { padding: 0; background: transparent; border: 0; }
.header-area .header-right-info .theme-control-btn span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: var(--foreground);
}
.header-area .header-right-info .theme-control-btn span:hover { background: var(--item-hover); }
.header-area .header-right-info .theme-control-btn svg { width: 20px; height: 20px; }
.header-area .header-right-info .theme-control-btn svg path { stroke: currentColor; }
.header-area .header-right-info .theme-control-btn svg path[fill]:not([fill="none"]) { fill: currentColor; }
.theme-control-btn .light { display: none !important; }
html.an-dark .theme-control-btn .light { display: flex !important; }
html.an-dark .theme-control-btn .dark { display: none !important; }
.header-area .header-right-info .theme-control-btn small { font-size: 14px; color: var(--muted); }

/* Nút "Let's Talk": khối đậm */
.header-area .header-right-info .lets-talk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  margin: 0;
  padding: 0 18px;
  border-radius: var(--an-radius);
  background: var(--ink);
  color: var(--ink-foreground);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.header-area .header-right-info .lets-talk-btn:hover { background: var(--ink-hover); color: var(--ink-foreground); }
.header-area .header-right-info .lets-talk-btn .icon { margin: 0; width: 16px; height: 16px; }
.header-area .header-right-info .lets-talk-btn .icon path { stroke: currentColor; }

/* Nút mở menu trên mobile: 40×40 */
.header-area .mobile-menu-control-bar .mobile-menu-control-bar,
button.mobile-menu-control-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--foreground);
  font-size: 18px;
}
button.mobile-menu-control-bar:hover { background: var(--item-hover); }

.close-menu .close { position: absolute; top: 20px; right: 16px; cursor: pointer; }

/* Drawer menu dưới 1200px */
@media (max-width: 1199.98px) {
  .header-area .menu-container { justify-content: space-between; padding: 8px 8px 8px 16px; }
  .header-area .logo img { height: 40px; max-width: 200px; }

  .navbar .navbar-main,
  .header-area .container .navbar-main {
    position: fixed;
    top: 0;
    left: -300px;
    z-index: 9999;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 288px;
    max-width: 85vw;
    height: 100%;
    padding: 20px 16px;
    overflow-y: auto;
    background: var(--surface);
    border-right: 1px solid var(--border);
    transition: left .2s ease;
  }
  .navbar-main.show { left: 0 !important; }
  .header-area .container .inner-logo { width: 100%; padding: 0 4px 16px; border-bottom: 1px solid var(--border); }
  .header-area .container .navbar-info { width: 100%; margin: 16px 0 24px; }
  .header-area .navbar-info .nav-item { display: block; margin-bottom: 4px; }
  .header-area .navbar-info a, .header-area .navbar-expand-lg .navbar-info a { height: 44px; font-size: 16px; }

  .header-right-info { display: block !important; width: 100%; margin-top: auto; }
  .header-area .header-right-info .theme-control-btn { width: 100%; margin-bottom: 8px; }
  .header-area .header-right-info .theme-control-btn span { width: 100%; height: 44px; justify-content: flex-start; gap: 10px; padding: 0 12px; }
  .header-area .header-right-info .theme-control-btn span small { margin: 0; }
  .header-area .header-right-info .lets-talk-btn { display: flex; width: 100%; }

  .mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgb(5 6 15 / 0.5);
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s ease, visibility .2s;
  }
  .mobile-menu-overlay.show { visibility: visible; opacity: 1; }
}

/* =====================================================================
   4. BỐ CỤC TRANG
   ===================================================================== */
.home-area { margin-top: var(--an-gap); }
.content-box-area { margin-top: var(--an-gap) !important; margin-bottom: 0 !important; }
.content-box-area .main-sidebar { position: sticky; top: calc(var(--an-header-h) + 28px); }

/* Trang chủ dựng bằng Elementor full-width: khoá cùng bề rộng với header */
.elementor-445 > .e-con,
.elementor-445 > .elementor-section {
  --content-width: 1320px;
  max-width: 1320px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}
@media (max-width: 1399.98px) { .elementor-445 > .e-con { max-width: 1140px; } }
@media (max-width: 1199.98px) { .elementor-445 > .e-con { max-width: 960px; } }
@media (max-width: 991.98px)  { .elementor-445 > .e-con { max-width: 720px; } }
@media (max-width: 767.98px)  { .elementor-445 > .e-con { max-width: 540px; } }
@media (max-width: 575.98px)  { .elementor-445 > .e-con { max-width: 100%; } }

/* Elementor: bảng màu Default Kit (xanh nhạt #6EC1E4, xanh lá #61CE70…) chưa ai chỉnh, đưa về token */
[class*="elementor-kit-"] {
  --e-global-color-primary: var(--foreground);
  --e-global-color-secondary: var(--muted);
  --e-global-color-text: var(--body-text);
  --e-global-color-accent: var(--primary);
  --e-global-typography-primary-font-family: "Bricolage Grotesque";
  --e-global-typography-secondary-font-family: "Bricolage Grotesque";
  --e-global-typography-text-font-family: "Bricolage Grotesque";
  --e-global-typography-accent-font-family: "Bricolage Grotesque";
}
/* Tiêu đề Elementor dán kèm style inline (màu #6EC1E4, font Roboto): đưa về token */
.content-box-card .elementor-heading-title[style*="color"],
.content-box-card .elementor-heading-title[style*="font-family"] {
  color: var(--foreground) !important;
  font-family: var(--app-font) !important;
}

/* Link trong đoạn văn là chữ, không phải nút */
.elementor-widget-text-editor a,
.content-box-card .ele-description a,
.article-details-area .post-content a,
.portfolio-details-text a { display: inline; }
.portfolio-area .portfolio-item .text .info .title { display: block; }

/* Elementor: chữ đoạn và font mặc định của kit */
.elementor-widget-text-editor,
.elementor-widget-text-editor p { color: var(--body-text); font-family: var(--app-font) !important; }
.elementor-widget-heading .elementor-heading-title { font-family: var(--app-font) !important; color: var(--foreground); }

/* =====================================================================
   5. HỒ SƠ (profile card)
   ===================================================================== */
.profile-card .image {
  overflow: hidden;
  padding-top: 8px;
  background: var(--tile);
  border-radius: var(--an-radius);
}
.profile-card .image img { display: block; width: 100%; height: auto; margin: 0 auto; }
.profile-card .text { margin-top: 20px; }
.profile-card .text .card-title { font-size: 22px; align-items: flex-start; }
.profile-card .text p { margin-top: 8px; font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--body-text); }
.profile-card .text p span { color: var(--foreground); font-weight: 600; }

/* Hai nút: chính (xanh) + phụ (viền) */
.common-button-groups { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.common-button-groups .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  margin: 0;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--an-radius);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.common-button-groups .btn:hover,
.common-button-groups .btn.btn-call:focus { background: var(--primary-hover); color: var(--primary-foreground); border-color: transparent; }
.common-button-groups .btn .icon { margin: 0; width: 18px; height: 18px; }
.common-button-groups .btn.btn-call .icon path { stroke: currentColor; }
.common-button-groups .btn.btn-copy {
  position: relative;
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--foreground);
}
.common-button-groups .btn.btn-copy:hover { background: var(--item-hover); color: var(--foreground); }
.common-button-groups .btn.btn-copy .icon,
.common-button-groups .btn.btn-copy .icon path { stroke: currentColor; }
.common-button-groups .btn.btn-copy::before {
  content: "Copied to clipboard";
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  padding: 6px 10px;
  border-radius: var(--an-radius-sm);
  background: var(--ink);
  color: var(--ink-foreground);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.common-button-groups .btn.btn-copy.active::before { display: block !important; }

/* Mạng xã hội: một kiểu ô 40×40 cho mọi trang */
.social-media-icon { margin-top: 20px; }
.social-media-icon ul { display: flex; flex-wrap: wrap; gap: 8px; }
.social-media-icon ul li { display: inline-flex; margin: 0; }
.social-media-icon ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--foreground);
  font-size: 17px;
  line-height: 1;
}
.social-media-icon ul li a:hover { background: var(--item-hover); color: var(--primary); }
.social-media-icon ul li a img,
.social-media-icon ul li a svg { width: 20px; height: 20px; object-fit: contain; }
.social-media-icon ul li a i { font-size: 17px; }
/* Icon SVG của Elementor: tô theo màu chữ, tự đảo ở nền tối */
.social-media-icon ul li a svg,
.social-media-icon ul li a svg path { fill: currentColor; }
/* Icon ảnh (trang chủ) đổi sang trắng ở nền tối */
html.an-dark .social-media-icon ul li a img { filter: invert(1) hue-rotate(180deg); }

/* =====================================================================
   6. KINH NGHIỆM — danh sách tự chạy lên, lặp liền mạch
   Theme in hai <ul> giống nhau nối tiếp: cả hai cùng dời đúng chiều cao
   của một <ul> rồi quay về đầu, nên vòng lặp không thấy chỗ nối.
   Rê chuột vào thì dừng. Máy bật "giảm chuyển động" thì đứng yên, cuộn tay.
   ===================================================================== */
.work-experiance-card { height: auto; overflow: hidden; }
.work-experiance-card .work-experiance-main,
.work-experiance-main {
  display: block;
  height: 300px;
  max-height: none;
  margin-top: 12px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.work-experiance-card .work-experiance-slider,
.work-experiance-slider {
  display: block !important;
  margin: 0;
  animation: an-scroll-y 32s linear infinite;
  will-change: transform;
}
.work-experiance-main:hover .work-experiance-slider { animation-play-state: paused; }
@keyframes an-scroll-y {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .work-experiance-card .work-experiance-main,
  .work-experiance-main { overflow-y: auto; -webkit-mask-image: none; mask-image: none; }
  .work-experiance-main .work-experiance-slider + .work-experiance-slider { display: none !important; }
}
/* Mỗi mục cùng chiều cao và cùng đường kẻ dưới, kể cả mục đầu của <ul> thứ hai */
.work-experiance-slider li {
  display: grid !important;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: start;
  margin: 0 !important;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.work-experiance-slider li .date { margin: 0; padding-top: 6px; }
.work-experiance-slider li .date p { font-size: 13px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.work-experiance-slider li .info { display: flex; align-items: center; gap: 12px; }
.work-experiance-slider li .info .icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--tile);
}
.work-experiance-slider li .info .icon img { width: 22px; height: 22px; object-fit: contain; }
.work-experiance-slider li .info .text .title { display: block; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--foreground); }
.work-experiance-slider li .info .text .subtitle { display: block; font-size: 13px; line-height: 1.4; color: var(--muted); }

/* =====================================================================
   7. LĨNH VỰC + DỊCH VỤ (lưới ô icon)
   ===================================================================== */
.expertise-card { height: auto; }
.expertise-card .expertise-item { text-align: center; }
.expertise-card .expertise-item .image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 0;
  border-radius: var(--an-radius);
  background: var(--tile);
}
.expertise-card .expertise-item .image img { width: 32px; height: 32px; object-fit: contain; }
.expertise-card .expertise-item .text .title { margin-top: 8px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--foreground); }

.services-item {
  height: 100%;
  padding: 12px 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--an-radius);
  background: var(--tile);
  transition: border-color .15s ease;
}
.services-item:hover { border-color: var(--border-strong); }
.services-item .image {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  padding: 12px;
  border-radius: 10px;
  background: var(--surface);
}
.services-item .image img { max-height: 72px; width: auto; object-fit: contain; }
.services-item .text .title { display: block; margin-top: 12px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--foreground); text-wrap: balance; }
a .services-item .text .title, .services-item a.title:hover { color: var(--foreground); }

/* =====================================================================
   8. DỰ ÁN GẦN ĐÂY (trang chủ)
   ===================================================================== */
.card-projects .projects-main { margin-top: 16px; }
.card-projects .projects-main .row { --bs-gutter-y: 12px; }
.card-projects .project-item .image {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-radius: var(--an-radius);
  background: var(--tile);
  aspect-ratio: 16 / 10;
}
.card-projects .project-item .image > a,
.card-projects .project-item .image > img { display: block; height: 100%; }
.card-projects .project-item .image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.card-projects .project-item .image .info {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: none;
}
.card-projects .project-item .image .info .category {
  margin: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.92);
  color: #1a1f2c;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
.card-projects .project-item .image .full-image-preview,
.portfolio-area .portfolio-item .image .full-image-preview {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 50%;
  background: #fff;
  color: #1a1f2c;
  filter: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, visibility .15s;
}
.card-projects .project-item .image:hover .full-image-preview,
.portfolio-area .portfolio-item .image:hover .full-image-preview { opacity: 1; visibility: visible; }
.full-image-preview .icon { width: 20px; height: 20px; }

/* =====================================================================
   9. KHỐI "LET'S WORK TOGETHER" — chữ tĩnh, không trôi
   ===================================================================== */
.lets-talk-together-card .card-body { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.lets-talk-together-card .scrolling-info {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  height: auto;
  margin-bottom: 20px;
  padding: 6px 12px;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--primary-light);
  white-space: nowrap;
}
.lets-talk-together-card .scrolling-info { max-width: 100%; }
.lets-talk-together-card .scrolling-info .slider-item { animation: none !important; transform: none !important; display: block; min-width: 0; max-width: 100%; }
/* Câu lặp viết cho dải trôi: chỉ hiện một lượt, cắt bằng dấu "…" */
.lets-talk-together-card .scrolling-info p {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--primary) !important;
  animation: none !important;
}
.lets-talk-together-card .scrolling-info p ~ p { display: none; }
.lets-talk-together-card .card-title {
  display: block;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.lets-talk-together-card .link-btn { margin-top: 16px; font-size: 15px; }

/* =====================================================================
   10. TRANG NỘI DUNG (about, services, works, blog, contact)
   ===================================================================== */
.content-box-card .card-body,
.blog-box-padding.card-body { padding: 32px; }

.content-box-card .top-info {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
}
.content-box-card .top-info .text { flex: 1 1 auto; max-width: 640px; width: 100%; }
.content-box-card .top-info .main-title,
.content-box-card .main-title,
.section-title .main-title {
  margin-bottom: 12px;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--foreground);
}
.content-box-card .top-info .main-title span,
.content-box-card .main-title span { color: var(--primary); }
.content-box-card .top-info p,
.content-box-card .top-info .ele-description p { font-size: 16px; line-height: 1.65; color: var(--body-text); }
.content-box-card .top-info p b { font-size: inherit; font-weight: 600; color: var(--foreground); }

/* Phần giới thiệu dài viết thẳng trong mô tả (trang About): nhịp tiêu đề và danh sách */
.content-box-card .top-info .text h2,
.content-box-card .top-info .text h3,
.content-box-card .top-info .text h4 { margin: 28px 0 8px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); }
.content-box-card .top-info .text ul { margin: 0 0 4px; padding-left: 20px; }
.content-box-card .top-info .text li { margin: 6px 0; font-size: 15px; line-height: 1.6; color: var(--body-text); }
.content-box-card .top-info .text li strong,
.content-box-card .top-info .text li b { color: var(--foreground); font-weight: 600; }
.content-box-card .top-info .text .container { padding: 0; }

/* Huy hiệu "Available For Hire" */
.content-box-card .available-btn { flex: 0 0 auto; }
.content-box-card .available-btn span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 9999px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
.content-box-card .available-btn span i { margin: 0; font-size: 7px; position: relative; }
.content-box-card .available-btn span i::after { display: none; }

/* Tiêu đề khối trong trang */
.content-box-card .main-common-title {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--foreground);
}

/* Bộ đếm */
.content-box-card .counter-area .counter .counter-item .number { font-size: 36px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--foreground); font-variant-numeric: tabular-nums; }
.content-box-card .counter-area .counter .counter-item .subtitle { margin-top: 6px; font-size: 14px; color: var(--muted); }
.circle-area, .content-box-card .counter-area .circle-area { margin: 0; }
.circle-text { position: relative; flex: 0 0 auto; }
.circle-text .circle-image { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; transform: translate(-50%, -50%); animation: an-spin 16s linear infinite; }
html.an-dark .circle-text .circle-image { filter: invert(1); }
.circle-text .arrow-down { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--primary); }
@keyframes an-spin { to { transform: translate(-50%, -50%) rotate(1turn); } }

/* Logo đối tác: ảnh rộng vừa khung, không còn ô trống */
.content-box-card .working-with-area .working-with-main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 12px;
}
.content-box-card .working-with-area .working-with-main .items {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 72px;
  padding: 12px;
  border-radius: var(--an-radius);
  background: var(--tile);
}
html.an-dark .content-box-card .working-with-area .working-with-main .items { background: #f4f5f7; }
.content-box-card .working-with-area .working-with-main .items img { width: 100%; height: 100%; object-fit: contain; }

/* Nhận xét khách hàng (slick) */
.content-box-card .client-feedback .feedback-item {
  height: 100%;
  margin: 0 8px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--an-radius);
  background: var(--tile);
}
.content-box-card .client-feedback .slick-track { display: flex; }
.content-box-card .client-feedback .slick-slide { height: auto; }
.content-box-card .client-feedback .slick-slide > div { height: 100%; }
.content-box-card .client-feedback .feedback-item .feedback-top-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.content-box-card .client-feedback .feedback-item .feedback-top-info .website a { white-space: nowrap; }
.content-box-card .client-feedback .feedback-item .feedback-top-info .rating { display: flex; gap: 2px; flex: 0 0 auto; }
.content-box-card .client-feedback .feedback-item .feedback-top-info .rating i { font-size: 13px; color: var(--star); }
.content-box-card .client-feedback .feedback-item .feedback-top-info .website a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--primary);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
.content-box-card .client-feedback .feedback-item .feedback-top-info .website a:hover { background: var(--primary); color: var(--primary-foreground); }
.content-box-card .client-feedback .feedback-item .feedback-top-info .website a .arrow-up { margin: 0; stroke: currentColor; }
.content-box-card .client-feedback .feedback-item .details { margin-bottom: 20px; }
.content-box-card .client-feedback .feedback-item .details p { font-size: 16px; line-height: 1.6; color: var(--foreground); }
.content-box-card .client-feedback .feedback-item .designation p { font-size: 14px; color: var(--muted); }
.content-box-card .client-feedback .feedback-item .designation p span { font-size: 14px; font-weight: 600; color: var(--foreground); }

/* Mũi tên slider */
.content-box-card .client-feedback-slider,
.content-box-card .article-publications-slider { position: relative; }
.content-box-card .client-feedback-slider .icon,
.content-box-card .article-publications-slider .icon {
  position: absolute;
  top: -60px;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--foreground);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.content-box-card .client-feedback-slider .icon:hover,
.content-box-card .article-publications-slider .icon:hover { background: var(--item-hover); color: var(--foreground); }
.content-box-card .client-feedback-slider .icon.right,
.content-box-card .article-publications-slider .icon.right { right: 8px; }
.content-box-card .client-feedback-slider .icon.left,
.content-box-card .article-publications-slider .icon.left { right: 52px; }

/* Giải thưởng */
.content-box-card .awards-recognitions ul li + li { margin-top: 12px; }
.content-box-card .awards-recognitions .awards-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--an-radius);
  background: var(--tile);
}
.content-box-card .awards-recognitions .awards-item:hover { border-color: var(--border-strong); }
.content-box-card .awards-recognitions .awards-item .award-name { display: flex; align-items: center; gap: 16px; max-width: 320px; width: 100%; }
.content-box-card .awards-recognitions .awards-item .award-name .icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--surface); }
.content-box-card .awards-recognitions .awards-item .award-name .icon img { width: 24px; height: 24px; }
.content-box-card .awards-recognitions .awards-item .award-name .text .title,
.content-box-card .awards-recognitions .awards-item .winner-tag .title { font-size: 15px; font-weight: 500; color: var(--foreground); }
.content-box-card .awards-recognitions .awards-item .winner-tag { flex: 0 0 auto; width: 140px; }
.content-box-card .awards-recognitions .awards-item .winner-tag .title { display: flex; align-items: center; gap: 6px; }
.content-box-card .awards-recognitions .awards-item .winner-tag .title .icon { width: 18px; height: 18px; stroke: currentColor; }
.content-box-card .awards-recognitions .awards-item .project-btn span { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: var(--an-radius-sm); background: var(--surface); color: var(--foreground); font-size: 13px; }
.content-box-card .awards-recognitions .awards-item .project-btn span .arrow-up { stroke: currentColor; margin: 0; }

/* Dải "Let's Work Together" cuối trang: một dòng tĩnh */
.content-box-card .work-together-slider {
  overflow: hidden;
  padding: 24px;
  border-radius: var(--an-radius);
  background: var(--tile);
}
.content-box-card .work-together-slider .slider-main .slider-item {
  display: flex;
  justify-content: center;
  gap: 0;
  animation: none !important;
  transform: none !important;
  white-space: normal;
}
.content-box-card .work-together-slider a {
  margin: 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--foreground);
  text-align: center;
}
.content-box-card .work-together-slider a:hover { color: var(--primary); }
.content-box-card .work-together-slider a::before { display: none; }
.content-box-card .work-together-slider .slider-item a ~ a,
.content-box-card .work-together-slider .slider-main .slider-item ~ .slider-item { display: none !important; }

/* Ảnh khối trong trang dịch vụ */
.services { margin: 40px 0; }
.services .block-image { margin: 40px 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--an-radius); }
.services .block-image img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--an-radius); }

/* Câu hỏi thường gặp (accordion Bootstrap) */
.content-box-card .frequently-asked-questions .accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--border); }
.content-box-card .frequently-asked-questions .accordion-item {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0 !important;
  background: transparent;
}
.content-box-card .frequently-asked-questions .accordion-item:first-child { border-top: 1px solid var(--border); }
.content-box-card .frequently-asked-questions .accordion-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none;
  color: var(--foreground);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
}
.content-box-card .frequently-asked-questions .accordion-button:hover { color: var(--primary); }
.content-box-card .frequently-asked-questions .accordion-button:focus { box-shadow: none; }
.content-box-card .frequently-asked-questions .accordion-button:not(.collapsed) { background: transparent; box-shadow: none; color: var(--foreground); }
.content-box-card .frequently-asked-questions .accordion-button::after { display: none; }
.content-box-card .frequently-asked-questions .accordion-button .icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--an-radius-sm);
  background: var(--secondary);
  color: var(--foreground);
}
.content-box-card .frequently-asked-questions .accordion-button .icon svg path { stroke: currentColor; }
.content-box-card .frequently-asked-questions .accordion-button:not(.collapsed) .icon .icon-plus { display: none; }
.content-box-card .frequently-asked-questions .accordion-button:not(.collapsed) .icon .icon-minus { display: flex !important; }
.content-box-card .frequently-asked-questions .accordion-body { padding: 0 4px 20px; }
.content-box-card .frequently-asked-questions .accordion-body p { font-size: 16px; line-height: 1.65; color: var(--body-text); }

/* Nội dung Elementor tự gõ trong trang About */
.content-box-card .elementor-widget-text-editor h2,
.content-box-card .elementor-widget-text-editor h3,
.content-box-card .elementor-widget-text-editor h4 { margin: 28px 0 10px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); }
.content-box-card .elementor-widget-text-editor ul { margin: 0 0 8px; padding-left: 20px; }
.content-box-card .elementor-widget-text-editor li { margin: 6px 0; color: var(--body-text); line-height: 1.6; }
.content-box-card .elementor-widget-text-editor li strong,
.content-box-card .elementor-widget-text-editor b { color: var(--foreground); font-weight: 600; }

/* =====================================================================
   11. WORKS (danh mục dự án)
   ===================================================================== */
.portfolio-card .top-info { display: block; }
.portfolio-card .top-info .text { max-width: none; }
.portfolio-card .top-info .text p { font-size: 16px; line-height: 1.65; }

.portfolio-area .portfolio-item { overflow: hidden; border: 1px solid var(--border); border-radius: var(--an-radius-card); }
.portfolio-area .portfolio-item .image {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-radius: 0;
  background: var(--tile);
  aspect-ratio: 16 / 9;
}
.portfolio-area .portfolio-item .image > a { display: block; height: 100%; }
.portfolio-area .portfolio-item .image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.portfolio-area .portfolio-item .text { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 20px 20px; }
.portfolio-area .portfolio-item .text .info .title { margin: 0 0 2px; border: 0; font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--foreground); }
.portfolio-area .portfolio-item .text .info .title:hover { color: var(--primary); }
.portfolio-area .portfolio-item .text .info .subtitle { font-size: 14px; color: var(--muted); }
.portfolio-area .portfolio-item .text .visite-btn a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--an-radius-sm);
  color: var(--foreground);
  font-size: 13px;
  white-space: nowrap;
}
.portfolio-area .portfolio-item .text .visite-btn a:hover { background: var(--item-hover); color: var(--foreground); }
.portfolio-area .portfolio-item .text .visite-btn a .arrow-up { margin: 0; stroke: currentColor; }

/* Trang chi tiết dự án */
.portfolio-details-area .main-image { overflow: hidden; border-radius: var(--an-radius); }
.portfolio-details-area .main-image img { width: 100%; }
.portfolio-details-text .short-info { flex: 0 0 auto; max-width: 240px; }
.portfolio-details-text .short-info .info-item + .info-item { margin-top: 16px; }
.portfolio-details-text .short-info .info-item .subtitle { margin-bottom: 2px; font-size: 13px; font-weight: 500; color: var(--muted); }
.portfolio-details-text .short-info .info-item .website { font-size: 15px; font-weight: 500; color: var(--primary); }
.portfolio-details-text .short-info .info-item .website .arrow-up { stroke: currentColor; }
.portfolio-details-text .overview p { margin-bottom: 16px; font-size: 16px; }
.portfolio-details-text .overview p b { color: var(--foreground); }
.portfolio-details-area .inner-images { margin: 16px 0 20px; }
.portfolio-details-area .inner-images .image-item,
.portfolio-details-area .inner-images .image-item img { overflow: hidden; border-radius: var(--an-radius); }
.portfolio-details-area .more-info-block .more-info-title { margin-bottom: 12px; font-size: 24px; font-weight: 600; line-height: 1.3; }
.portfolio-details-area .more-info-block .more-info-subtitle { margin-bottom: 8px; font-size: 18px; font-weight: 600; }
.portfolio-details-area .more-info-block p,
.portfolio-details-area .more-info-block ul li { margin-bottom: 12px; font-size: 16px; color: var(--body-text); }
.portfolio-details-area .more-info-block ul li b { color: var(--foreground); }
.portfolio-details-area .prev-and-next-btn { display: flex; gap: 12px; margin-top: 32px; }
.portfolio-details-area .prev-and-next-btn .btn {
  display: flex;
  flex: 1 1 50%;
  align-items: center;
  justify-content: center;
  height: 56px;
  border: 1px solid var(--border-strong);
  border-radius: var(--an-radius);
  background: var(--surface);
  color: var(--foreground);
  font-size: 16px;
  font-weight: 500;
}
.portfolio-details-area .prev-and-next-btn .btn:hover { background: var(--item-hover); color: var(--foreground); border-color: var(--border-strong); }

/* =====================================================================
   12. BLOG — thẻ bài, phân trang, bài chi tiết
   ===================================================================== */
.postbox__item.mb-30 { margin-bottom: 32px; }
.article-publications-item .image {
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  border-radius: var(--an-radius);
  background: var(--tile);
  aspect-ratio: 16 / 10;
}
.article-publications-item .image > a:not(.tags) { display: block; height: 100%; }
.article-publications-item .image img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: none; }
.article-publications-item .image:hover img { transform: none; }
.article-publications-item .image .tags {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  height: auto;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.92);
  color: #1a1f2c;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
.article-publications-item .image .tags:hover,
.article-publications-item .image > a[rel~="tag"]:hover { background: #1a1f2c; color: #fff; }
@media (max-width: 767.98px) {
  /* Chỗ bấm 24px trở lên */
  .article-publications-item .image .tags { min-height: 26px; }
}
.article-publications-item .text .title {
  display: block;
  margin-bottom: 8px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--foreground);
}
.article-publications-item .text .title:hover { color: var(--primary); }
.article-publications-item .text p { font-size: 15px; line-height: 1.6; color: var(--body-text); }
.article-publications-item .text ul { display: flex; flex-wrap: wrap; gap: 0 8px; margin-top: 12px; }
.article-publications-item .text ul li,
.article-details-area .article-tags li {
  position: relative;
  display: inline-flex;
  margin: 0;
  padding: 0 0 0 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--muted);
}
.article-publications-item .text ul li:empty,
.article-details-area .article-tags li:empty { display: none; }
.article-publications-item .text ul li::before,
.article-details-area .article-tags li::before { display: none; }
.article-publications-item .text ul li + li::before,
.article-details-area .article-tags li + li::before {
  content: "·";
  position: static;
  display: inline;
  width: auto;
  height: auto;
  margin-right: 8px;
  background: none;
  transform: none;
  color: var(--muted);
}
.el-blog-slider .article-publications-item { margin: 0 8px; }
/* Bài liên quan: theme lồng link danh mục trong <a class="tags"> (template-helper.php),
   trình duyệt tách ra thành <a class="tags"></a><a rel="category tag">…</a>.
   Ẩn vỏ rỗng, vẽ link danh mục đầu tiên thành chip như thẻ bài ở trang Blog. */
.article-publications-item .image > a.tags:empty { display: none; }
.article-publications-item .image > a[rel~="tag"] {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.92);
  color: #1a1f2c;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
.article-publications-item .image > a[rel~="tag"] ~ a[rel~="tag"] { display: none; }

/* Phân trang */
.pagination { display: flex; justify-content: center; margin-top: 24px; }
.pagination ul { display: flex; align-items: center; gap: 6px; }
.pagination ul li { list-style: none; }
.pagination ul li a,
.pagination ul li span,
.pagination ul li button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--foreground);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.pagination ul li a:hover,
.pagination ul li button:hover { background: var(--item-hover); color: var(--foreground); border-color: var(--border-strong); }
.pagination ul li span.current { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.pagination ul li span.dots { border-color: transparent; background: transparent; color: var(--muted); }
.pagination ul li .icon { width: 16px; height: 16px; stroke: currentColor; }
.pagination ul li .icon-arrow-right { position: static; width: 18px; height: 18px; }
.pagination ul li .next-page,
.pagination ul li .next-page-number { display: none; }

/* Bài chi tiết */
.article-details-card { padding-top: 32px !important; }
.article-details-area .main-image { overflow: hidden; border-radius: var(--an-radius); aspect-ratio: 16 / 9; }
.article-details-area .main-image img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--an-radius); }
.article-details-area .article-tags { display: flex; flex-wrap: wrap; gap: 0 8px; margin-top: 16px; padding: 0; }
.article-details-area .article-details-text .main-title,
.single-blog-post .main-title,
.article-details-area h1 {
  margin-bottom: 16px;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--foreground);
}
.article-details-area .post-content { max-width: 72ch; }
.article-details-area .post-content,
.article-details-area .article-details-text p {
  margin-bottom: 20px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--body-text);
}
.article-details-area .post-content h2 { margin: 36px 0 12px; font-size: 26px; letter-spacing: -0.01em; }
.article-details-area .post-content h3 { margin: 28px 0 10px; font-size: 21px; }
.article-details-area .post-content h4 { margin: 24px 0 8px; font-size: 18px; }
.article-details-area .post-content ul,
.article-details-area .post-content ol { margin: 0 0 20px; padding-left: 22px; }
.article-details-area .post-content li { margin-bottom: 8px; line-height: 1.7; color: var(--body-text); }
.article-details-area .post-content strong,
.article-details-area .post-content b { color: var(--foreground); font-weight: 600; }
.article-details-area .post-content a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.article-details-area .post-content img,
.article-details-area .post-content figure img { border-radius: var(--an-radius); }
.article-details-area .post-content figure { margin: 24px 0; }
.article-details-area .post-content figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); text-align: center; }
.article-details-area .post-content pre,
.article-details-area .post-content code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
.article-details-area .post-content pre {
  margin: 0 0 20px;
  padding: 16px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--an-radius);
  background: var(--tile);
  color: var(--foreground);
}
.article-details-area .post-content :not(pre) > code { padding: 2px 6px; border-radius: 6px; background: var(--secondary); color: var(--foreground); }
.article-details-area .post-content table { width: 100%; margin: 0 0 20px; border-collapse: collapse; font-size: 15px; }
.article-details-area .post-content th,
.article-details-area .post-content td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; color: var(--body-text); }
.article-details-area .post-content th { color: var(--foreground); font-weight: 600; }
.article-details-area .post-content .wp-block-table { overflow-x: auto; }
.article-details-area .article-details-text blockquote,
.article-details-area .post-content blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--primary);
}
.article-details-area .article-details-text blockquote p { font-size: 18px; font-weight: 500; font-style: normal; color: var(--foreground); }
.article-details-area .article-details-text .listed-info li { position: relative; padding: 0 0 10px 24px; font-size: 17px; line-height: 1.7; }
.article-details-area .article-details-text .listed-info li::before { content: ""; position: absolute; top: 11px; left: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }

/* Thẻ và chia sẻ */
.article-details-area .tags-and-share { padding-top: 20px; border-top: 1px solid var(--border); }
.article-details-area .article-details-text .tags-and-share .tags,
.article-details-area .article-details-text .tags-and-share .share { display: flex; align-items: center; gap: 12px; }
.article-details-area .article-details-text .tags-and-share .title { font-size: 15px; font-weight: 600; color: var(--foreground); }
.article-details-area .article-details-text .tags-and-share .tags ul li a,
.wp-block-tag-cloud a, .tagcloud a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin: 0 4px 6px 0;
  padding: 0 10px;
  border: 0;
  border-radius: var(--an-radius-sm);
  background: var(--secondary);
  color: var(--foreground);
  font-size: 13px !important;
  line-height: 1;
}
.article-details-area .article-details-text .tags-and-share .tags ul li a:hover,
.wp-block-tag-cloud a:hover, .tagcloud a:hover { background: var(--secondary-hover); color: var(--foreground); border: 0; }
.article-details-area .related-post .article-publications-item { margin: 0; }

/* Bình luận */
.blog-post-comment .comment-reply-title,
.comment-reply-title { margin-bottom: 20px; font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--foreground); }
.blog-post-comment a, .blog-post-comment span { color: var(--foreground); }
.blog-post-comment a:hover { color: var(--primary); }
.blog-single-comment img { min-width: 48px; min-height: 48px; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.comment-form,
.el-contact-form .leave-comments-area .comments-box {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--an-radius-card);
  background: var(--tile);
}
.logged-in-as, .comment-notes { margin-bottom: 20px; font-size: 14px; color: var(--muted); }

/* =====================================================================
   13. Ô NHẬP, NÚT GỬI (form bình luận, form liên hệ CF7, ô tìm)
   ===================================================================== */
.form-label,
.leave-comments-area .comments-box .form-label,
.wpcf7-form label,
.wp-block-search__label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--foreground);
}
.form-control,
.form-select,
.leave-comments-area .comments-box .form-control,
.leave-comments-area .comments-box .form-select,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wp-block-search__input,
.main-sidebar form input,
.footer-area .search-widget input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--an-radius);
  background-color: var(--surface);
  color: var(--foreground);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.form-control, .wpcf7-form textarea { min-height: 140px; resize: vertical; }
.form-control::placeholder,
.wpcf7-form textarea::placeholder,
.wp-block-search__input::placeholder { color: var(--muted); opacity: 1; }
.form-control:focus,
.form-select:focus,
.leave-comments-area .comments-box .form-control:focus,
.leave-comments-area .comments-box .form-select:focus,
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wp-block-search__input:focus,
.main-sidebar form input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--ring-focus) !important;
  background-color: var(--surface);
  color: var(--foreground);
}
.form-select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23646b7d' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
}
.wpcf7-form .mb-4 { margin-bottom: 16px !important; }
.wpcf7-form p { margin: 0; }

/* Nút gửi: nút chính */
.leave-comments-area .comments-box .submit-btn,
.wpcf7-form .wpcf7-submit,
.comment-form .submit,
.comment-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--an-radius);
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.leave-comments-area .comments-box .submit-btn:hover,
.wpcf7-form .wpcf7-submit:hover,
.comment-form input[type="submit"]:hover { background: var(--primary-hover); }
.leave-comments-area .comments-box .submit-btn .icon { margin: 0; stroke: currentColor; }

/* Câu báo của CF7 và form AJAX */
.wpcf7 form .wpcf7-response-output { margin: 16px 0 0; padding: 10px 14px; border-radius: var(--an-radius); font-size: 14px; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.ajax-response.error { border: 1px solid var(--error-border); background: var(--error-bg); color: var(--error-text); }
.wpcf7 form.sent .wpcf7-response-output,
.ajax-response.success { border: 1px solid transparent; background: var(--success-bg); color: var(--success); }
.ajax-response { margin-top: 16px; padding: 10px 14px; border-radius: var(--an-radius); font-size: 14px; font-weight: 500; }
.wpcf7-not-valid-tip { margin-top: 4px; font-size: 13px; color: var(--error-text); }
.wpcf7-form .wpcf7-not-valid { border-color: var(--error-text) !important; }

/* Bản đồ */
.contact-map-area,
.elementor-widget-google_maps .elementor-custom-embed { overflow: hidden; margin-top: 32px; border-radius: var(--an-radius); aspect-ratio: 16 / 9; }
.contact-map-area iframe,
.elementor-widget-google_maps iframe { display: block; width: 100% !important; height: 100% !important; border: 0; }
html.an-dark .elementor-widget-google_maps iframe { filter: invert(.9) hue-rotate(180deg); }

/* =====================================================================
   14. SIDEBAR WIDGET (danh mục, tìm, bài mới)
   ===================================================================== */
.sidebar__widget { margin-bottom: var(--an-gap); }
.sidebar__widget:last-child { margin-bottom: 0; }
.sidebar__widget:not(.widget_bentofolio_offer_widget) { padding: 20px 24px; }
.side-wid-title,
.main-sidebar .wp-block-heading,
.footer-area .wp-block-heading,
.footer-area .widget-title {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.main-sidebar ul, .main-sidebar ol { padding: 0; }
.main-sidebar ul li, .main-sidebar ol li { list-style: none; }
.main-sidebar .widget_categories ul,
.main-sidebar .wp-block-latest-posts__list { display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; }
.main-sidebar ul li a,
.main-sidebar ol li a {
  display: block;
  padding: 7px 8px;
  border-radius: var(--an-radius-sm);
  color: var(--foreground);
  font-size: 15px;
  line-height: 1.45;
}
.main-sidebar ul li a:hover,
.main-sidebar ol li a:hover { background: var(--item-hover); color: var(--foreground); }

/* Nhãn ô tìm trong sidebar: cùng kiểu tiêu đề widget */
.main-sidebar .wp-block-search__label {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Ô tìm khối WordPress: ô + nút trên một hàng */
.wp-block-search__inside-wrapper { display: flex; gap: 8px; padding: 0 !important; border: 0 !important; }
.wp-block-search__button,
.main-sidebar form button.search-btn,
.footer-area form button.search-btn {
  position: static;
  flex: 0 0 auto;
  width: auto;
  height: 44px;
  margin: 0 !important;
  padding: 0 16px;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--an-radius) !important;
  background: var(--surface) !important;
  color: var(--foreground) !important;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
}
.wp-block-search__button:hover,
.main-sidebar form button.search-btn:hover { background: var(--item-hover) !important; }
.main-sidebar form { position: relative; width: 100%; }

/* =====================================================================
   15. FOOTER
   ===================================================================== */
.footer-area { margin-top: var(--an-gap); }
.footer-section { background: var(--surface); border: 1px solid var(--border); box-shadow: none; }
.footer-area ul li, .footer-area ol li { list-style: none; }
.footer-area ul li a, .footer-area ol li a { color: var(--foreground); }
.footer-area ul li a:hover, .footer-area ol li a:hover { color: var(--primary); }
.footer-area .text p { font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center; }
.footer-area .text p a { color: var(--foreground); font-weight: 500; }
.footer-area .text p a:hover { color: var(--primary); text-decoration: none; }

/* Phần còn lại của theme */
.bo-ml-auto { margin-left: auto; }
#cancel-comment-reply-link, .logged-in-as a { color: var(--primary); }
.blog-posts .postbox__item.sticky.post { border: 0; }
.mfp-bg { background: #05060f; }

/* Bootstrap + block WordPress ở nền tối */
html.an-dark .table { --bs-table-color: var(--body-text); --bs-table-bg: transparent; --bs-table-border-color: var(--border); }
html.an-dark .wp-block-separator { border-color: var(--border); }
html.an-dark .has-white-background-color { background-color: var(--surface) !important; }
html.an-dark .has-black-color { color: var(--foreground) !important; }

/* =====================================================================
   16. MÀN HẸP
   ===================================================================== */
@media (max-width: 1399.98px) {
  .common-button-groups .btn { padding: 0 16px; }
}

@media (max-width: 1199.98px) {
  /* Trang blog và bài viết: bài lên trước, sidebar xuống sau */
  body.blog .content-box-area .row > .col-xl-4,
  body.single-post .content-box-area .row > .col-xl-4,
  body.archive .content-box-area .row > .col-xl-4,
  body.search .content-box-area .row > .col-xl-4 { order: 2; }
  .content-box-area .main-sidebar { position: static; }
  .profile-card .image { aspect-ratio: auto; }
  .content-box-card .top-info { flex-direction: column; gap: 16px; }
  .content-box-card .available-btn { order: -1; }
}

@media (max-width: 991.98px) {
  .content-box-card .card-body,
  .blog-box-padding.card-body { padding: 24px; }
  .content-box-card .top-info .main-title,
  .content-box-card .main-title,
  .section-title .main-title { font-size: 30px; }
  .article-details-area .article-details-text .main-title,
  .article-details-area h1 { font-size: 26px; }
  .lets-talk-together-card .card-title { font-size: 30px; }
  .content-box-card .counter-area .circle-area { display: none; }
}

@media (max-width: 767.98px) {
  body { padding-top: 8px; }
  .header-area { top: 8px; }
  .content-box-card .awards-recognitions .awards-item { flex-wrap: wrap; }
  .content-box-card .work-together-slider a { font-size: 24px; }
  .portfolio-details-text { flex-direction: column; }
  .portfolio-details-text .short-info { max-width: 100%; }
  .article-details-area .post-content,
  .article-details-area .article-details-text p { font-size: 16px; }
  .article-details-area .tags-and-share { flex-direction: column; gap: 16px; }
}

@media (max-width: 575.98px) {
  .card-body { padding: 20px; }
  .content-box-card .card-body,
  .blog-box-padding.card-body { padding: 20px; }
  .card-title { flex-wrap: wrap; gap: 8px; }
  .content-box-card .top-info .main-title,
  .content-box-card .main-title,
  .section-title .main-title { font-size: 26px; }
  .work-experiance-slider li { grid-template-columns: 1fr; gap: 6px; }
  .work-experiance-slider li .date { padding-top: 0; }
  .common-button-groups .btn { flex: 1 1 auto; }
  .content-box-card .counter-area .counter { flex-wrap: wrap; gap: 24px; }
  .content-box-card .client-feedback .feedback-item .feedback-top-info { flex-wrap: wrap; gap: 8px; }
  /* Mũi tên slider xuống dưới tiêu đề */
  .client-feedback .main-common-title,
  .article-publications .main-common-title { padding-bottom: 52px; }
  .content-box-card .client-feedback-slider .icon.left,
  .content-box-card .article-publications-slider .icon.left { right: auto; left: 8px; }
  .content-box-card .client-feedback-slider .icon.right,
  .content-box-card .article-publications-slider .icon.right { right: auto; left: 52px; }
  .portfolio-area .portfolio-item .text { flex-direction: column; gap: 10px; }
  .portfolio-details-area .prev-and-next-btn { flex-direction: column; }
  .lets-talk-together-card .card-title { font-size: 28px; }
  .services-item .text .title { font-size: 13px; }
}