/* ===== Migrated from demoStyle.css; preserve legacy cascade order ===== */
:root {
  /* Brand Identity (60-30-10 Rule: 60% White, 30% Dark Teal #003C47, 10% Accent Orange #FF9900) */
  --color-primary: #003C47;
  --color-primary-hover: #002B33;
  --color-secondary: #FF9900;
  --color-secondary-hover: #E68A00;
  --color-title: #FF9900;

  /* Typography & Backgrounds */
  --color-text-main: #212529;
  --color-text-muted: #6c757d;
  --color-bg-body: #f8f9fa;
  --color-surface: #ffffff;
  --color-surface-hover: #f5f5f5;
  --color-border: #e9ecef;

  /* Badge Colors (Dành cho thẻ "Mới") */
  --color-badge-bg: #fff0f0;
  --color-badge-border: #c20000;
  --color-badge-text: #940000;
}

/* ==============================================================
   RESET & NORMALIZE
   ============================================================== */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font: inherit;
  vertical-align: baseline;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
}

html {
  margin-right: 0 !important;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  box-sizing: border-box;
  /* Đặt overflow-x ở đây thay vì body để tránh bug WebKit (Safari iOS,
     Zalo/FB in-app browser) khiến position:fixed bị tính lại theo
     document thay vì viewport -> header tưởng như tự ẩn/hiện khi cuộn */
  overflow-x: hidden;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption,
th,
td {
  font-weight: normal;
  text-align: left;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}
blockquote,
q {
  quotes: none;
}
a img {
  border: 0;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
select {
  max-width: 100%;
}

/* ==============================================================
   GENERAL TYPOGRAPHY
   ============================================================== */
body,
button,
input,
select,
textarea {
  font-family: "roboto", sans-serif;
  font-size: 17px;
  line-height: 19.6px;
  font-weight: 400;
  color: var(--color-text-main); /* Đã thay bằng biến màu chữ */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* overflow-x: hidden đã chuyển lên html — xem giải thích ở trên */
}

p {
  font-weight: 400;
  line-height: 24px;
  font-size: 17px;
}
strong,
b,
cite {
  font-weight: bold;
}
dfn,
cite,
em,
i,
blockquote {
  font-style: italic;
}
abbr,
acronym {
  border-bottom: 1px dotted var(--color-border);
  cursor: help;
}
.btn-link:focus,
.btn-link:hover,
mark,
ins {
  text-decoration: none;
}
sup,
sub {
  font-size: 75%;
  height: 0;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
small {
  font-size: 75%;
}
big {
  font-size: 125%;
}
address {
  font-style: italic;
  margin: 0 0 20px;
}

code,
kbd,
tt,
var,
samp,
pre {
  margin: 20px 0;
  padding: 4px 12px;
  background: var(--color-bg-body);
  border: 1px solid var(--color-border);
  overflow-x: auto;
  border-radius: 0;
  height: auto;
}

svg,
svg path {
  transition: all 0.3s ease;
}

a {
  color: var(--color-text-main);
  text-decoration: inherit;
  transition: 0.2s ease;
}

a:hover {
  color: var(--color-secondary); /* Đã thay bằng biến màu phụ (Cam) */
  text-decoration: inherit;
}

hr {
  margin-bottom: 20px;
  border: dashed 1px var(--color-border);
}

/* ==============================================================
   LISTS & TABLES
   ============================================================== */
ul,
ol {
  padding: 0;
}
ul {
  list-style: disc;
}
ol {
  list-style: decimal;
}
li > ul,
li > ol {
  margin-bottom: 0;
}
li {
  list-style: none;
}
ul li,
ol li {
  padding: 0;
}
dl,
dd {
  margin: 0 0 20px;
}
dt {
  font-weight: bold;
}
del,
.disable {
  text-decoration: line-through;
  opacity: 0.5;
}

table {
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
th {
  border-width: 0 1px 1px 0;
  font-weight: bold;
}
td {
  border-width: 0 1px 1px 0;
}
th,
td {
  padding: 8px 12px;
}

embed,
object,
video {
  margin-bottom: 20px;
  max-width: 100%;
  vertical-align: middle;
}
p > embed,
p > iframe,
p > object,
p > video {
  margin-bottom: 0;
}

.loading {
  background-color: var(--color-surface);
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1;
  margin-top: 0px;
  top: 0px;
  left: 0px;
  bottom: 0px;
  overflow: hidden;
  right: 0px;
  z-index: 999999;
}
.loading .loading-center {
  width: 100%;
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading .loading-center .loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading .loading-center .loader-container .wrap-loader {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading .loading-center .loader-container .wrap-loader .icon {
  position: absolute;
  /* max-width: 80px; */
}
.loading .loading-center .loader-container .loader {
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  border-top: 4px solid var(--color-secondary);
  animation: spin 1s linear infinite;
}
.loading .icon {
  width: 20rem;
  height: 20rem;
}

#header-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--color-surface);
  transition:
    transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

#header-logo-box {
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

#header-logo-box.hide-logo {
  display: none;
}

body {
  padding-top: 85px;
}

@media (max-width: 767.98px) {
  .modalLogin .otp-card-inputs {
    width: 100%;
    margin: var(--space-6, 2.4rem) 0;
    gap: var(--space-2, 0.8rem);
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .modalLogin .otp-card-inputs input {
    width: 100%;
    min-width: 0;
    height: clamp(4.6rem, 14vw, 5.8rem);
    padding: 0;
    border-width: 0.2rem !important;
    border-radius: var(--radius-sm, 0.8rem);
    font-size: clamp(2rem, 7vw, 2.6rem);
  }

  body {
    padding-top: 55px;
  }
}

@media (min-width: 769px) {
  .d-md-none {
    display: none !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-flex {
    display: flex !important;
  }
}

.mobile-search-section {
  padding: 10px 15px;
  background: var(--color-bg-body);
  margin-top: 6rem;
}

.mobile-search-bar {
  display: flex;
  background: #f2f2f2;
  border-radius: 8px;
  padding: 4px;
  border: 1px solid #e0e0e0;
}

.mobile-search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 15px;
  font-size: 15px;
  outline: none;
}

.mobile-search-bar .btn-search-mobile {
  background: #e03c31;
  color: white;
  border: none;
  border-radius: 6px;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mobile-quick-actions {
  justify-content: space-between;
  padding: 15px;
  background: #fff;
  gap: 10px;
}

.mobile-quick-actions .action-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 5px;
  border: 1px solid #eee;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.mobile-quick-actions .action-card .action-icon img {
  height: 40px;
  margin-bottom: 8px;
}
.mobile-quick-actions .action-card span {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}

.search-overlay.header-mode {
  position: relative;
  bottom: 0;
  left: 0;
  transform: none;
  width: 100%;
  max-width: 500px;
  margin-left: 20px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}

.search-overlay.header-mode .search-tabs {
  display: none;
}

.search-overlay.header-mode .search-bar {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.header-search-box {
  display: none;
  flex: 1;
  align-items: center;
  max-width: 450px;
  margin: 0 30px;
  align-items: center;
  min-width: 0;
}

/*
  FIX: khi JS di chuyển .search-overlay từ .client-slide sang
  #header-search-box (lúc cuộn qua banner), toàn bộ style scoped theo
  ".client-slide .search-overlay .search-bar ..." trong file này bị mất
  hiệu lực (vì element không còn nằm trong .client-slide nữa), nên trình
  duyệt rơi về các rule cũ/không liên quan trong customCss.css (.form-box,
  .btn-search màu xanh ngọc...) + input bị viền 2 lớp do trùng với rule
  ".header-search-box input" bên dưới -> giao diện vỡ dù cấu trúc đúng.
  Khối dưới đây tự chủ hoàn toàn style cho search-bar ở trạng thái
  header-mode, không phụ thuộc ancestor .client-slide, và có độ ưu tiên
  cao hơn mọi rule cũ trong customCss.css.
*/
.header-search-box .search-overlay.header-mode .search-bar {
  display: flex;
  align-items: center;
  background: var(--color-surface);
  padding: 6px 6px 6px 18px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.header-search-box .search-overlay.header-mode .search-bar .input-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 10px;
  min-width: 0;
}

.header-search-box .search-overlay.header-mode .search-bar .icon-search {
  color: var(--color-text-muted);
  flex-shrink: 0;
  opacity: 1;
}

.header-search-box .search-overlay.header-mode .search-bar input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 8px 0;
  font-size: 14px;
  color: var(--color-text-main);
}

.header-search-box .search-overlay.header-mode .search-bar input::placeholder {
  color: #a0a0a0;
}

.header-search-box .search-overlay.header-mode .search-bar .btn-search {
  background: var(--color-primary);
  color: var(--color-surface);
  border: none;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.3s ease;
}

.header-search-box .search-overlay.header-mode .search-bar .btn-search:hover {
  background: var(--color-primary-hover);
}

.header-search-box input {
  width: 100%;
  padding: 10px 18px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  outline: none;
  font-size: 15px;
}

header.is-scrolled .header-search-box:not(:empty) {
  display: flex;
  animation: fadeInSearch 0.3s ease-out forwards;
}

@media (max-width: 1023.98px) {
  .mobile-menu-container {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    width: 100%;
    z-index: 11000;
    transition: box-shadow 0.3s ease;
  }

  .mobile-header-slot {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
    overflow: visible !important;
  }

  #mobile-logo-link,
  .mobile-header-search-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    transition:
      opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
      transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  #mobile-logo-link {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }

  .mobile-header-search-box {
    opacity: 0;
    transform: translateX(16px);
    pointer-events: none;
    min-width: 0;
  }

  .mobile-menu-container.is-scrolled:has(.mobile-header-search-box:not(:empty)) #mobile-logo-link {
    opacity: 0;
    transform: translateX(-16px);
    pointer-events: none;
  }

  .mobile-menu-container.is-scrolled .mobile-header-search-box:not(:empty) {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }

  .mobile-header-search-box .mobile-search-bar {
    width: 100%;
    padding: 3px;
  }

  .mobile-header-search-box .mobile-search-bar input {
    padding: 7px 12px;
    font-size: 14px;
  }

  .mobile-header-search-box .mobile-search-bar .btn-search-mobile {
    width: 36px;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInSearch {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.client-slide .search-overlay {
  box-sizing: border-box;
  max-width: calc(100vw - 32px);
}

.client-project-section .project-tabs {
  width: auto;
  max-width: 100%;
  display: flex;
  justify-content: center;
}

@media (max-width: 767.98px) {
  #header-container {
    display: none;
  }
  #header-left-side {
    width: 100%;
    justify-content: space-between;
  }
  .client-project-section .project-tabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    /* overflow-y: auto; */
    -webkit-overflow-scrolling: touch;
  }
  .client-project-section .project-tabs::-webkit-scrollbar {
    display: none;
  }

  .client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-card.blog-featured .blog-img-box,
  .client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-card.blog-sub .blog-img-box {
    height: 200px !important;
  }
  .client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-card.blog-featured .blog-card-overlay .title,
  .client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-card.blog-sub .blog-card-overlay .title {
    font-size: 1.5rem !important;
  }
  .client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-card.blog-featured .blog-card-overlay .excerpt {
    font-size: 1rem !important;
    line-height: 1.5rem !important  ;
  }

  .box-action-realestate .layout-container .right-sidebar {
    display: none;
  }
}
.client-blog-section .blog-heading .blog-heading-title {
  line-height: 1.4 !important;
  word-wrap: break-word;
}

@media (max-width: 767.98px) {
  .footer-content-box {
    display: none; /* Ẩn content mặc định */
    padding-top: 15px;
  }
  .footer-content-box.active {
    display: block;
    animation: fadeInDown 0.3s ease;
  }
  /* Xoay icon (+) thành (x) khi mở */
  .btn-toggle-footer.active {
    transform: rotate(45deg);
    transition: transform 0.3s ease;
  }
}
.client-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* padding: 12px 16px; */
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  transition: all 0.4s ease;
}

header.is-scrolled .client-header {
  max-width: 1900px;
  padding: 6px 16px;
}

.client-left-side,
.client-right-side {
  display: flex;
  align-items: center;
  gap: 16px;
}

.client-left-side .left-side-logo img {
  height: 80px;
  width: auto;
  object-fit: contain;
  transition: all 0.4s ease;
}
header.is-scrolled .client-left-side .left-side-logo {
  display: block !important;
}
header.is-scrolled .client-left-side .left-side-logo img {
  height: 51px; /* Thu nhỏ lại như cũ */
}

.client-left-side .left-side-navigation {
  display: flex;
  align-items: center;
}

.client-left-side .left-side-navigation .left-side-navigation-list {
  display: flex;
  gap: 15px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.client-left-side .left-side-navigation .left-side-navigation-list > li {
  position: relative;
}

.client-left-side .left-side-navigation .left-side-navigation-list > li > a {
  display: block;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary); /* Đã thay thành Xanh mòng két */
  text-decoration: none;
  transition: 0.2s;
}

.client-left-side .left-side-navigation .left-side-navigation-list > li > a:hover {
  color: var(--color-secondary); /* Đã thay thành Vàng Cam */
}

/* Biểu tượng Dropdown */
.client-left-side .left-side-navigation .left-side-navigation-list li.menu-item-has-children > a::after {
  content: " ▼";
  font-size: 12px;
  margin-left: 4px;
  transition: 0.2s ease;
  color: var(--color-text-muted);
}

.client-left-side .left-side-navigation .left-side-navigation-list li.menu-item-has-children:hover > a::after {
  transform: rotate(180deg);
  color: var(--color-secondary);
}

/* Submenu Cấp 1 */
.client-left-side .left-side-navigation ul.submenu,
.client-left-side .left-side-navigation ul li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-surface);
  min-width: 220px;
  padding: 8px 0;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s ease;
  z-index: 999;
}

.client-left-side .left-side-navigation li:hover > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.client-left-side .left-side-navigation ul li {
  position: relative;
  white-space: nowrap;
}

.client-left-side .left-side-navigation ul li a {
  padding: 10px 14px;
  display: flex;
  font-size: 14px;
  color: var(--color-text-main);
  text-decoration: none;
  justify-content: space-between;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.client-left-side .left-side-navigation ul li a:hover {
  background: var(--color-surface-hover);
  color: var(--color-secondary);
}

/* Thẻ Badge (Mới) */
.client-left-side .left-side-navigation ul li a .badge-status-type-bds {
  background-color: var(--color-badge-bg);
  border-color: var(--color-badge-border);
  color: var(--color-badge-text);
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 8px;
  line-height: 0;
  border: 1px solid;
  display: flex;
  align-items: center;
  padding: 1rem;
}

/* Submenu Cấp 2 */
.client-left-side .left-side-navigation ul li ul ul {
  top: 0;
  left: 100%;
  transform: translateX(10px);
}

.client-left-side .left-side-navigation li:hover ul ul {
  transform: translateX(0);
}

/* ==============================================================
   HEADER RIGHT SIDE
   ============================================================== */
.client-right-side a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

/* Nút Yêu Thích */
.client-right-side .right-side-wishlist {
  font-size: 30px;
  color: var(--color-text-main);
  position: relative;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.client-right-side .right-side-wishlist .right-side-wishlist-header {
  border: 1px solid var(--color-border);
  color: var(--color-secondary);
  padding: 10px;
  font-size: 2rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  transition: 0.3s;
}

.client-right-side .right-side-wishlist .right-side-wishlist-header:hover {
  background-color: var(--color-primary);
  color: var(--color-surface);
}

/* Nút Đăng nhập / Đăng ký */
.client-right-side .right-side-auth-section .right-side-auth-section-btn {
  padding: 10px 12px;
  display: flex;
  width: 13rem;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.2s ease;
  font-size: 1.5rem;
  background: var(--color-primary);
  color: var(--color-surface);
  border: none;
  cursor: pointer;
}

.client-right-side .right-side-auth-section .right-side-auth-section-btn:hover {
  background: var(--color-primary-hover);
}

/* Nút Đăng Tin */
.client-right-side .right-side-post-realestate .box-add-realestate-header {
  font-size: 1.6rem;
  font-weight: 600;
  width: 13.5rem;
  display: flex;
  padding: 10px 20px;
  gap: 0.5rem;
  align-items: center;
  border: 2px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s ease;
}

.client-right-side .right-side-post-realestate .box-add-realestate-header svg {
  color: var(--color-secondary);
}

.client-right-side .right-side-post-realestate .box-add-realestate-header:hover {
  background: var(--color-primary);
  color: var(--color-surface);
}

.client-right-side .right-side-post-realestate .box-add-realestate-header:hover svg {
  color: var(--color-surface);
}

/* User Dropdown */
.client-right-side .side-dropdown .nav-user-wrapper {
  display: flex;
  align-items: center;
}

.client-right-side .side-dropdown .nav-user-wrapper .user-icon-box {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background-color: var(--color-surface);
  cursor: pointer;
}

.client-right-side .side-dropdown .nav-user-wrapper .info-header-box {
  display: flex;
  align-items: center;
  font-weight: 600;
  margin: 0 0 0 0.45rem;
  cursor: pointer;
  color: var(--color-text-main);
}

.client-right-side .side-dropdown .nav-user-wrapper .info-header-box i {
  font-size: 1.5rem;
  margin-left: 0.5rem;
  transform: rotate(-90deg);
  transition: all 0.3s ease;
}

.client-right-side .side-dropdown .header-user-name {
  display: block;
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  color: var(--color-text-main);
  font-weight: 600;
  line-height: 1.25;
  opacity: 0;
  pointer-events: none;
  text-overflow: ellipsis;
  transform: translateX(-8px);
  transition:
    max-width 0.25s ease,
    margin-left 0.25s ease,
    opacity 0.2s ease,
    transform 0.25s ease;
  white-space: nowrap;
}

/* Roles without the wishlist/posting actions have room to show the name before scrolling. */
.client-right-side .side-dropdown--name-visible .header-user-name {
  max-width: 16rem;
  margin-left: 0.75rem;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

@media (max-width: 767.98px) {
  .client-right-side .side-dropdown--name-visible .header-user-name {
    max-width: 10rem;
    margin-left: 0.5rem;
  }
}

@media (min-width: 1024px) {
  header.is-scrolled .client-right-side .side-dropdown .header-user-name {
    max-width: 160px;
    margin-left: 0.75rem;
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-right-side .side-dropdown .header-user-name {
    transition: none;
  }
}

/* ==============================================================
   SLIDE SIDE
   ============================================================== */
.client-slide {
  position: relative;
  width: 100%;
  height: auto;
}

.client-slide .swiper-slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition:
    transform 0.5s ease,
    filter 0.5s ease;
}

.client-slide .swiper-slide {
  filter: brightness(90%);
}

.client-slide .search-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 65%;
  display: flex;
  gap: 10px;
  z-index: 50;
  padding: 25px;
  border-radius: 14px;
}

.client-slide .search-overlay {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 94%;
  max-width: 760px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 25px;
  border-radius: 14px;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.client-slide .search-overlay .search-tabs {
  display: flex;
  justify-content: center;
  gap: 45px;
  margin-bottom: 24px;
}

.client-slide .search-overlay .search-tabs .tab {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  font-size: 17px;
  cursor: pointer;
  position: relative;
  padding-bottom: 8px;
  transition: 0.3s ease;
}
.client-slide .search-overlay .search-tabs .tab:hover {
  color: var(--color-surface);
}

.client-slide .search-overlay .search-tabs .tab.active {
  color: var(--color-secondary);
  font-weight: 600;
}
.client-slide .search-overlay .search-bar {
  display: none;
  align-items: center;
  background: var(--color-surface);
  padding: 8px 8px 8px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.client-slide .search-overlay .search-bar.active {
  display: flex;
  animation: fadeForm 0.3s ease forwards;
}

.client-slide .search-overlay .search-bar .input-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 12px;
}

.client-slide .search-overlay .search-bar .icon-search {
  color: var(--color-text-muted);
}

.client-slide .search-overlay .search-bar input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 16px;
  color: var(--color-text-main);
  background: transparent;
}

.client-slide .search-overlay .search-bar input::placeholder {
  color: #a0a0a0;
}

.client-slide .search-overlay .search-bar .btn-search {
  background: var(--color-primary);
  color: var(--color-surface);
  border: none;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s ease;
  white-space: nowrap;
}

.client-slide .search-overlay .search-bar .btn-search:hover {
  background: var(--color-primary-hover);
}
.client-slide .search-overlay .search-tabs .tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: var(--color-secondary);
  border-radius: 10px;
}

/* ==============================================================
   MOBILE HERO SLIDER (mới — Swiper riêng, không dùng chung instance
   với slider desktop, tránh tình trạng slide ẩn bằng d-none/d-block
   bị Swiper tính sai kích thước/loop gây vỡ layout)
   ============================================================== */
@media (max-width: 767.98px) {
  .mobile-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5; /* khung cố định, không phụ thuộc kích thước ảnh gốc */
    max-height: 460px;
    overflow: hidden;
    background: var(--color-bg-body);
  }

  .mobile-hero .swiper,
  .mobile-hero .swiper-wrapper,
  .mobile-hero .swiper-slide {
    width: 100%;
    height: 100%;
  }

  .mobile-hero .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* luôn lấp đầy khung, cắt ảnh thay vì bóp méo/vỡ */
    object-position: center;
    display: block;
  }

  .mobile-hero .swiper-pagination {
    bottom: 14px !important;
  }

  .mobile-hero .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.6;
  }

  .mobile-hero .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--color-secondary);
  }
}

@media (max-width: 480px) {
  .mobile-hero {
    aspect-ratio: 3 / 4;
    max-height: 250px;
  }
}
/* ==============================================================
   SELL REALESTATE SIDE
   ============================================================== */

.client-sale-section,
.client-rent-section {
  padding: 45px 15px;
  background: var(--color-bg-body);
}

.client-sale-section .sale-title,
.client-rent-section .rent-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 5px;
}

.client-sale-section .sale-subtitle,
.client-rent-section .rent-subtitle {
  text-align: center;
  color: var(--color-primary);
  margin-bottom: 25px;
  margin-top: 13px;
}

.client-sale-section .sale-grid,
.client-rent-section .rent-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.client-sale-section .sale-grid .sale-item,
.client-rent-section .rent-grid .rent-item {
  background: var(--color-surface);
  border-radius: 10px 10px 0px 0px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transition: 0.3s ease;
}
.client-sale-section .sale-grid .sale-item:hover,
.client-rent-section .rent-grid .rent-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.15);
}

.client-sale-section .sale-grid .sale-item .sale-img,
.client-rent-section .rent-grid .rent-item .rent-img {
  position: relative;
  height: 210px;
}
.client-sale-section .sale-grid .sale-item .sale-img img,
.client-rent-section .rent-grid .rent-item .rent-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.client-sale-section .sale-grid .sale-item .sale-img .sale-img-label .span-label-img,
.client-rent-section .rent-grid .rent-item .rent-img .rent-img-label .span-label-img {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}
.client-sale-section .sale-grid .sale-item .sale-img .sale-img-label,
.client-rent-section .rent-grid .rent-item .rent-img .rent-img-label {
  position: absolute;
  bottom: 0px;
  right: 0px;
  padding: 5px 12px;
  font-size: 1.5rem;
  color: var(--color-surface);
  border-radius: 6px;
  font-weight: 700;
  display: flex;
}

.client-sale-section .sale-grid .sale-item .sale-img .sale-label,
.client-rent-section .rent-grid .rent-item .rent-img .rent-label {
  position: absolute;
  top: 5px;
  left: 12px;
  background: var(--color-badge-border);
  padding: 5px 12px;
  font-size: 13px;
  color: var(--color-surface);
  border-radius: 6px;
  font-weight: 700;
}
.client-sale-section .sale-grid .sale-item .sale-content .box-info,
.client-rent-section .rent-grid .rent-item .rent-content .box-info {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  padding: 1rem 2rem 0 2rem;
  text-align: left;
}
.client-sale-section .sale-grid .sale-item .sale-content .sale-location,
.client-rent-section .rent-grid .rent-item .rent-content .rent-location {
  font-size: 2rem;
  color: var(--color-primary);
  margin-bottom: 5px;
  margin-top: 0.5rem;
  padding: 0 2rem;
}

.client-sale-section .sale-grid .sale-item .sale-content .sale-location svg,
.client-rent-section .rent-grid .rent-item .rent-content .rent-location svg {
  margin-right: 1rem;
  font-size: 2rem;
  font-weight: 400;
}
.client-sale-section .sale-grid .sale-item .sale-content .sale-location a,
.client-rent-section .rent-grid .rent-item .rent-content .rent-location a {
  font-size: 1.5rem;
  font-weight: 600;
}
.client-sale-section .sale-grid .sale-item .sale-content .sale-price,
.client-rent-section .rent-grid .rent-item .rent-content .rent-price {
  color: var(--color-badge-border);
  font-size: 18px;
  font-weight: 800;
  margin-top: 8px;
  padding: 0rem 2rem;
  display: flex;
  gap: 0.75rem;
}
.client-sale-section .sale-grid .sale-item .sale-content .sale-price svg,
.client-rent-section .rent-grid .rent-item .rent-content .rent-price svg {
  color: var(--color-text-muted);
}
.client-sale-section .sale-grid .sale-item .sale-footer,
.client-rent-section .rent-grid .rent-item .rent-footer {
  display: flex;
  justify-content: space-between;
  padding: 0 2rem;
  margin-bottom: 1rem;
}
.client-sale-section .sale-grid .sale-item .sale-footer .agent-box,
.client-rent-section .rent-grid .rent-item .rent-footer .agent-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.client-sale-section .sale-grid .sale-item .sale-footer .agent-box .agent-status,
.client-rent-section .rent-grid .rent-item .rent-footer .agent-box .agent-status {
  display: block;
  font-size: 1.5rem;
  color: #777;
  font-weight: 400;
}
.client-sale-section .sale-grid .sale-item .sale-footer .action-group,
.client-rent-section .rent-grid .rent-item .rent-footer .action-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.client-sale-section .sale-grid .sale-item .sale-footer .action-group .btn-like,
.client-rent-section .rent-grid .rent-item .rent-footer .action-group .btn-like {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: 0.25s;
}

.client-sale-section .sale-grid .sale-item .sale-footer .action-group .btn-like:hover,
.client-rent-section .rent-grid .rent-item .rent-footer .action-group .btn-like:hover {
  background: #ffecec;
  border-color: #ff4d4f;
}

.client-sale-section .sale-load,
.client-rent-section .rent-load {
  display: block;
  margin: 28px auto 0 auto;
  padding: 12px 34px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 12px;
  border: none;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s ease;
  font-weight: 600;
}

.client-sale-section .sale-load:hover,
.client-rent-section .rent-load:hover {
  background: var(--color-primary-hover);
}
/* ==============================================================
   NEIGHBORHOOD SIDE
   ============================================================== */

.client-area-section {
  margin: 20px auto;
  padding: 0 16px;
  background-color: var(--color-bg-body);
}

.client-area-section .area-section-title {
  margin-top: 30px;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-primary);
  position: relative;
  text-align: center;
}

.client-area-section .area-section-desc {
  text-align: center;
  font-size: 15px;
  color: var(--color-text-muted);
  margin-bottom: 32px;
}

.client-area-section .area-section-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.client-area-section .area-section-grid .area-card {
  position: relative;
  height: 250px;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(0, 60, 71, 0.15);
  transition:
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.4s ease;
}
.client-area-section .area-section-grid .area-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.client-area-section .area-section-grid .area-card::after {
  content: "";
  position: absolute;
  inset: 0;
}
.client-area-section .area-section-grid .area-card.featured {
  grid-column: span 2;
  height: 251px;
  box-shadow:
    0 18px 45px rgba(0, 60, 71, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.client-area-section .area-section-grid .area-card.featured::before {
  content: "Khu vực nổi bật";
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(0, 196, 204, 0.25);
  backdrop-filter: blur(6px);
  color: #ffffff;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 20px;
  z-index: 3;
}
.client-area-section .area-section-grid .area-card span {
  bottom: 16px;
  left: 16px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  z-index: 2;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.client-area-section .area-section-grid .area-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 55px rgba(0, 60, 71, 0.35);
}
.client-area-section .area-section-grid .area-card.small {
  grid-column: span 1;
}
.client-area-section .area-section-grid .area-card .area-text {
  position: absolute;
  bottom: 6px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}
.client-area-section .area-section-grid .area-card .area-text .area-name {
  color: #fff;
  font-size: 1.75rem;
  font-weight: 600;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.client-area-section .area-section-grid .area-card .area-text .area-count {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  color: #fff;
  border-radius: 18px;
  background: rgba(0, 196, 204, 0.25);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
/* ==============================================================
  INTRODUCE SIDE
   ============================================================== */
.client-intro-section {
  padding: 40px 20px;
  background: var(--color-bg-body);
  text-align: center;
}
.client-intro-section .container {
  margin: auto;
}

.client-intro-section .container .intro-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  text-align: left;
}

.client-intro-section .container .intro-wrapper .intro-image {
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
}

.client-intro-section .container .intro-wrapper .intro-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.client-intro-section .container .intro-wrapper .intro-content .intro-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(13, 148, 136, 0.1);
  color: var(--color-primary-hover);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 18px;
}

.client-intro-section .container .intro-wrapper .intro-content .intro-title {
  font-size: 3.6rem;
  line-height: 1.25;
  margin-bottom: 20px;
  font-weight: 600;
  color: var(--color-text-main);
}
.client-intro-section .container .intro-wrapper .intro-content .intro-desc {
  font-size: 1.6rem;
  line-height: 1.8;
  color: var(--color-text-muted);
  margin-bottom: 28px;
}

.client-intro-section .container .intro-wrapper .intro-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.client-intro-section .container .intro-wrapper .intro-features .feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-main);
  font-size: 1.5rem;
}

.client-intro-section .container .intro-wrapper .intro-features .feature-item svg {
  color: var(--color-primary-hover);
}

.client-intro-section .container .intro-wrapper .intro-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 12px;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.5rem;
  transition: 0.3s;
  box-shadow: 0 10px 25px rgba(20, 184, 166, 0.25);
}

.client-intro-section .container .intro-wrapper .intro-btn:hover {
  transform: translateY(-3px);
  background-color: var(--color-primary-hover);
}

/* ==============================================================
   PROJECT SIDE
   ============================================================== */
.client-project-section {
  padding: 80px 0;
  background: var(--color-bg-body);
}
.client-project-section .project-heading {
  text-align: center;
  margin-bottom: 35px;
}
.client-project-section .project-heading .project-heading-title {
  font-size: 3.2rem;
  margin-bottom: 2rem;
  font-weight: 600;
}
.client-project-section .project-heading .project-heading-subtitle {
  color: var(--color-text-muted);
}
.client-project-section .project-tabs {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  width: 43%;
  border-radius: 12px;
  margin: 0 auto 3rem auto;
  background: var(--color-surface);
}

.client-project-section .project-tabs .project-tab {
  border: none;
  cursor: pointer;
  padding: 12px 22px;
  border-radius: 12px;
  background: var(--color-surface);
  transition: 0.3s;
  font-weight: 600;
}

.client-project-section .project-tabs .project-tab.active {
  background: var(--color-primary-hover);
  color: var(--color-surface);
}
.client-project-section .project-content-wrapper .project-pane {
  display: none;
}
.client-project-section .project-content-wrapper .project-pane.active {
  display: block;
}
.client-project-section .project-content-wrapper .project-pane .project-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.client-project-section .project-content-wrapper .project-pane .project-grid .project-card {
  background: var(--color-surface);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.client-project-section .project-content-wrapper .project-pane .project-grid .project-card:hover {
  transform: translateY(-5px);
}

.client-project-section .project-content-wrapper .project-pane .project-grid .project-thumb {
  position: relative;
}

.client-project-section .project-content-wrapper .project-pane .project-grid .project-thumb__link {
  display: block;
}

.client-project-section .project-content-wrapper .project-pane .project-grid .project-thumb img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.client-project-section .project-content-wrapper .project-pane .project-grid .project-thumb .project-badge {
  position: absolute;
  top: 6px;
  left: 12px;
  background: var(--color-badge-border);
  color: var(--color-surface);
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 12px;
  font-size: 1.2rem;
  height: 2.5rem;
}
.client-project-section .project-content-wrapper .project-pane .project-grid .project-body {
  padding: 1rem 2rem;
  display: flex;
  flex: 1;
  flex-direction: column;
}
.client-project-section .project-content-wrapper .project-pane .project-grid .project-body .project-body-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  text-align: left;
}
.client-project-section .project-content-wrapper .project-pane .project-grid .project-body .project-body-location {
  color: var(--color-primary);
  margin-bottom: 15px;
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.client-project-section .project-content-wrapper .project-pane .project-grid .project-body .project-body-meta {
  display: flex;
  margin-bottom: 15px;
  color: var(--color-text-muted);
  font-size: 1.3rem;
  gap: 1rem;
}
.client-project-section .project-content-wrapper .project-pane .project-grid .project-body .project-body-meta .project-acreage,
.client-project-section .project-content-wrapper .project-pane .project-grid .project-body .project-body-meta .project-price {
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--color-badge-border);
}
.client-project-section .project-content-wrapper .project-pane .project-grid .project-body .project-body-meta .project-acreage svg,
.client-project-section .project-content-wrapper .project-pane .project-grid .project-body .project-body-meta .project-price svg {
  color: var(--color-text-muted);
}
.client-project-section .project-content-wrapper .project-pane .project-grid .project-footer {
  display: flex;
  margin-top: auto;
}
.client-project-section .project-content-wrapper .project-pane .project-grid .project-footer a {
  width: 100%;
  background: var(--color-primary);
  color: var(--color-surface);
  padding: 1rem 2rem;
  text-align: center;
  border-radius: 12px;
  font-weight: 600;
}

.client-project-section .project-empty-state {
  grid-column: 1 / -1;
  display: grid;
  min-height: 220px;
  padding: 3rem;
  color: var(--color-text-muted);
  font-weight: 600;
  text-align: center;
  border: 1px dashed #cbd8d5;
  border-radius: 18px;
  background: var(--color-surface);
  place-items: center;
}
/* ==============================================================
   PARTNER SIDE
   ============================================================== */
.client-partner-section {
  padding: 50px 0;
  background-color: var(--color-bg-body);
  overflow: hidden;
}
.client-partner-section .partner-heading {
  text-align: center;
  margin-bottom: 40px;
}

.client-partner-section .partner-heading .partner-heading-title {
  font-size: 3.2rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.client-partner-section .partner-heading .partner-heading-subtitle {
  font-size: 16px;
  color: var(--color-text-muted);
  margin: 0 auto;
}

.client-partner-section .brand-slide .swiper-wrapper {
  transition-timing-function: linear !important;
}
.client-partner-section .brand-slide .swiper-wrapper .partner-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  height: 100px;
}

.client-partner-section .brand-slide .swiper-wrapper .partner-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.client-partner-section .brand-slide .swiper-wrapper .partner-item img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.client-partner-section .brand-slide .swiper-wrapper .partner-item:hover img {
  filter: grayscale(0%);
}

/* ==============================================================
   UTILITIES SIDE
   ============================================================== */
.client-utility-section .utility-wrap {
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.client-utility-section .utility-wrap .utility-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-radius: 10px;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(230, 247, 248, 0.85));
  backdrop-filter: blur(12px);
  box-shadow:
    0 14px 40px rgba(0, 60, 71, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.75);
  transition: all 0.4s ease;
}

.client-utility-section .utility-wrap .utility-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(0, 196, 204, 0.35), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.client-utility-section .utility-wrap .utility-card .icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.28),
    inset 0 0 10px rgba(255, 255, 255, 0.35);
}

.client-utility-section .utility-wrap .utility-card .text {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-primary);
}

.client-utility-section .utility-wrap .utility-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 22px 55px rgba(0, 196, 204, 0.35),
    inset 0 0 0 1px rgba(0, 196, 204, 0.9);
}

.client-utility-section .utility-wrap .utility-card:hover::before {
  opacity: 1;
}

/* ==============================================================
   BLOG SIDE
   ============================================================== */
.client-blog-section {
  margin-top: 7rem;
}
.client-blog-section .blog-heading .blog-heading-title {
  font-size: 3.2rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.client-blog-section .blog-heading .blog-heading-subtitle {
  font-size: 16px;
  color: var(--color-text-muted);
  margin: 1rem 0 0;
}

.client-blog-section .tag-item {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

.client-blog-section .tag-item a {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 12px;
  background: var(--color-border);
  color: var(--color-primary);
  text-decoration: none;
  transition: all 0.25s ease;
}

.client-blog-section .tag-item a:hover {
  background: var(--color-primary-hover);
  color: var(--color-surface);
}

.client-blog-section .client-blog-content {
  position: relative;
}

.client-blog-section .client-blog-content .blog-content-group .blog-wrapper a {
  text-decoration: none;
  color: var(--color-text-main);
}
.client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-card {
  border-radius: 8px;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  margin-bottom: 20px;
  position: relative;
}

.client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-card.blog-featured .blog-img-box {
  height: 425px;
}

.client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-card.blog-featured .blog-card-overlay .title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 7px;
  line-height: 1.4;
  color: var(--color-title);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
}

.client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-card.blog-featured .blog-card-overlay .excerpt {
  color: var(--color-border);
  font-size: 1.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-card .blog-img-box {
  border-radius: 8px;
  overflow: hidden;
}

.client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-card .blog-img-box img {
  width: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-card:hover .blog-img-box img {
  transform: scale(1.05);
}

.client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-card .blog-img-box {
  position: relative;
}

.client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-card .blog-img-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 25%, rgba(0, 0, 0, 0.15) 50%, transparent 75%);
  border-radius: 8px;
  pointer-events: none;
}

.client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-card .blog-img-box .blog-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px 18px 14px;
  z-index: 1;
  color: var(--color-surface);
}

.client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-card.blog-sub .blog-img-box {
  height: 275px;
}

.client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-card.blog-sub .blog-card-overlay .title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  line-height: 1.35;
  color: var(--color-title);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-card.blog-sub .blog-card-overlay .excerpt {
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
  line-height: 1.35;
  color: var(--color-border);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-sidebar {
  background: var(--color-bg-body);
  padding: 20px;
  border-radius: 8px;
  height: 100%;
}

.client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-sidebar .blog-sidebar-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-primary);
  display: inline-block;
  text-transform: uppercase;
}

.client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-sidebar .blog-list-item {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e9ecef;
}
.client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-sidebar .blog-list-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-sidebar .blog-list-item img {
  width: 110px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
}

.client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-sidebar .blog-list-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-sidebar .blog-list-content .title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-title);
  margin: 0 0 5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-sidebar .blog-list-content .excerpt {
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
  line-height: 1.35;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.client-blog-section .client-blog-content .blog-content-group .blog-wrapper .blog-sidebar .blog-list-content .date {
  font-size: 0.8rem;
  color: #888;
}
/* ==============================================================
   RESPONSIVE SIDE
   ============================================================== */
@media (min-width: 1024px) {
  .client-sale-section .sale-grid,
  .client-rent-section .rent-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1024px) {
  .client-area-section .area-section-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .client-area-section .area-section-grid .area-card {
    height: 220px;
  }

  .client-area-section .area-section-grid .area-card.featured {
    grid-column: span 2;
    height: 260px;
  }
  .client-project-section .project-content-wrapper .project-pane .project-grid .project-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .client-header {
    gap: 8px;
  }

  .client-left-side .left-side-navigation .left-side-navigation-list > li > a {
    padding: 8px 10px;
    font-size: 14px;
  }

  .client-intro-section .container .intro-wrapper {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .client-intro-section .container .intro-wrapper .intro-content .intro-title {
    font-size: 2.8rem;
  }

  .client-project-section .project-content-wrapper .project-pane .project-grid .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767.98px) {
  .client-right-side {
    display: none;
  }

  .client-left-side .left-side-navigation {
    display: none;
  }

  .client-slide {
    height: auto;
    width: 100%;
  }

  .client-slide .swiper-slide img {
    height: auto;
    width: 100%;
  }

  /* search-overlay trên mobile đã neo bottom, thu nhỏ padding */
  .client-slide .search-overlay {
    bottom: 12px;
    padding: 16px 14px;
  }

  .client-slide .search-box {
    bottom: 10px;
    width: 92%;
    padding: 12px;
  }

  .client-slide .search-box input,
  .client-slide .search-box button {
    font-size: 14px;
    padding: 10px;
  }

  /* sale/rent: 2 cột trên tablet */
  .client-sale-section .sale-grid,
  .client-rent-section .rent-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .client-area-section .area-section-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .client-area-section .area-section-grid .area-card {
    height: 200px;
    border-radius: 18px;
  }

  .client-area-section .area-section-grid .area-card span {
    font-size: 17px;
  }

  .client-area-section .area-section-grid .area-card.featured {
    order: 10;
    grid-column: span 2;
    height: 260px;
    box-shadow: 0 20px 45px rgba(0, 60, 71, 0.4);
  }

  .client-area-section .area-section-grid .area-text .area-name {
    font-size: 17px;
  }

  .client-area-section .area-section-grid .area-text .area-count {
    font-size: 12px;
    padding: 5px 10px;
  }

  /* intro: 1 cột trên tablet/mobile */
  .client-intro-section .container .intro-wrapper {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: left;
  }

  .client-intro-section .container .intro-wrapper .intro-content .intro-title {
    font-size: 2.6rem;
  }

  /* project tabs: thu nhỏ lại */
  .client-project-section .project-tabs {
    width: 90%;
  }

  /* project grid: 2 cột trên tablet */
  .client-project-section .project-content-wrapper .project-pane .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .client-utility-section .utility-wrap {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .client-utility-section .utility-wrap .utility-card {
    flex-direction: column;
    padding: 20px 14px;
    text-align: center;
  }

  .client-utility-section .utility-wrap .utility-card .icon {
    width: 54px;
    height: 54px;
    font-size: 24px;
  }

  .client-utility-section .utility-wrap .utility-card .text {
    font-size: 14px;
    margin-top: 6px;
  }

  .modalLogin {
    width: 97vw !important;
    height: 58rem !important;
    top: 6rem !important;
    left: unset;
  }
}

.client-sale-section .sale-grid .sale-item.is-expired-listing,
.client-rent-section .rent-grid .rent-item.is-expired-listing {
  opacity: 0.82;
}

.client-sale-section .sale-grid .sale-item .sale-img .sale-label.expired,
.client-rent-section .rent-grid .rent-item .rent-img .rent-label.expired {
  color: #fff;
  background: rgba(45, 53, 51, 0.9);
}

@media (max-width: 576px) {
  .left-side-logo img {
    height: 40px;
  }

  /* search overlay: full width, sát đáy */
  .client-slide .search-overlay {
    width: 96%;
    padding: 14px 12px;
    bottom: 8px;
    border-radius: 10px;
  }

  .client-slide .search-overlay .search-tabs {
    gap: 20px;
    margin-bottom: 16px;
  }

  .client-slide .search-overlay .search-tabs .tab {
    font-size: 14px;
  }

  .client-slide .search-overlay .search-bar {
    flex-direction: column;
    padding: 12px;
    background: transparent;
    box-shadow: none;
    gap: 10px;
  }

  .client-slide .search-overlay .search-bar .input-wrapper {
    background: var(--color-surface);
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
  }

  .client-slide .search-overlay .search-bar .btn-search {
    width: 100%;
    padding: 12px;
    font-size: 15px;
  }

  /* sale/rent: 1 cột trên phone nhỏ */
  .client-sale-section .sale-grid,
  .client-rent-section .rent-grid {
    grid-template-columns: 1fr;
  }

  .client-sale-section,
  .client-rent-section {
    padding: 12px;
  }
  .client-sale-section .sale-subtitle,
  .client-rent-section .rent-subtitle {
    font-size: 1.5rem;
  }
  .client-intro-section {
    padding: 14px;
  }

  .client-intro-section .container .intro-wrapper .intro-content .intro-title {
    font-size: 2.2rem;
  }

  /* project: 1 cột trên phone */
  .client-project-section .project-content-wrapper .project-pane .project-grid {
    grid-template-columns: 1fr;
  }

  .client-project-section .project-tabs {
    width: 98%;
    gap: 6px;
    height: 4.5rem;
  }

  .client-project-section .project-tabs .project-tab {
    padding: 10px 14px;
    font-size: 11px;
  }

  /* area grid: 1 cột trên phone nhỏ */
  .client-area-section .area-section-grid {
    grid-template-columns: 1fr;
  }

  .client-area-section .area-section-grid .area-card.featured {
    grid-column: span 1;
  }

  /* bds-container */
  .bds-container {
    grid-template-columns: 1fr;
  }

  .property-meta {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 480px) {
  .client-slide .search-overlay .search-tabs {
    gap: 16px;
  }

  .btn-search {
    padding: 8px 14px;
  }

  .client-sale-section .sale-title,
  .client-rent-section .rent-title {
    font-size: 2rem;
  }

  .client-area-section .area-section-title {
    font-size: 2rem;
  }

  .client-project-section .project-heading .project-heading-title {
    font-size: 2.4rem;
  }

  /* footer banner gọn hơn */
  .bds-banner {
    padding: 20px 14px;
  }

  /* footer cols 1 cột */
  .footer-main {
    flex-direction: column;
    gap: 20px;
  }
}

@keyframes fadeForm {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Migrated from styles.css; preserve legacy cascade order ===== */
/*---------- Reset css styles ----------- */
/* Reset Browsers
-------------------------------------------------------------- */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font: inherit;
  vertical-align: baseline;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

html {
  margin-right: 0 !important;
  font-size: 62.5%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption,
th,
td {
  font-weight: normal;
  text-align: left;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}

blockquote,
q {
  quotes: none;
}

a img {
  border: 0;
}

img {
  max-width: 100%;
  height: auto;
}

select {
  max-width: 100%;
}
/* General
-------------------------------------------------------------- */
body,
button,
input,
select,
textarea {
  font-family: "roboto", sans-serif;
  font-size: 17px;
  line-height: 19.6px;
  font-weight: 400;
  color: #003c47;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic;
}

p {
  font-weight: 400;
  line-height: 24px;
  font-size: 17px;
}

strong,
b,
cite {
  font-weight: bold;
}

dfn,
cite,
em,
i,
blockquote {
  font-style: italic;
}

abbr,
acronym {
  border-bottom: 1px dotted #e0e0e0;
  cursor: help;
}

.btn-link:focus,
.btn-link:hover,
mark,
ins {
  text-decoration: none;
}

sup,
sub {
  font-size: 75%;
  height: 0;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

small {
  font-size: 75%;
}

big {
  font-size: 125%;
}

address {
  font-style: italic;
  margin: 0 0 20px;
}

code,
kbd,
tt,
var,
samp,
pre {
  margin: 20px 0;
  padding: 4px 12px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  overflow-x: auto;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  hyphens: none;
  border-radius: 0;
  height: auto;
}

svg,
svg path {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* Elements
-------------------------------------------------------------- */
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  color: #003c47;
  text-decoration: inherit;
}
a:hover {
  color: #0fb9b1;
  text-decoration: inherit;
}
hr {
  margin-bottom: 20px;
  border: dashed 1px #ccc;
}

/* List */
ul,
ol {
  padding: 0;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
}

li {
  list-style: none;
}

ul li,
ol li {
  padding: 0;
}

dl,
dd {
  margin: 0 0 20px;
}

dt {
  font-weight: bold;
}

del,
.disable {
  text-decoration: line-through;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

table {
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

caption,
th,
td {
  font-weight: normal;
  text-align: left;
}

th {
  border-width: 0 1px 1px 0;
  font-weight: bold;
}

td {
  border-width: 0 1px 1px 0;
}

th,
td {
  padding: 8px 12px;
}

/* Media */
embed,
object,
video {
  margin-bottom: 20px;
  max-width: 100%;
  vertical-align: middle;
}

p > embed,
p > iframe,
p > object,
p > video {
  margin-bottom: 0;
}

/* tf-container
-------------------------------------------------------------- */
.tf-container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 1320px;
  max-width: 100%;
}
.tf-container .row {
  margin-left: -20px !important;
  margin-right: -20px !important;
}
.tf-container .row > * {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.tf-container.xl {
  width: 1848px;
  background: #fff;
}
.tf-container.lg {
  width: 1800px;
}
.tf-container.md {
  width: 1760px;
}
.tf-container.full {
  width: 1920px;
  padding-right: 24px;
  padding-left: 24px;
}

.tf-container-xxl {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-right: 15px;
  padding-left: 15px;
  width: 1920px;
  max-width: 100%;
}
.tf-container-xxl .row {
  margin-left: -15px !important;
  margin-right: -15px !important;
}
.tf-container-xxl .row > * {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}
.row > * {
  padding-left: 15px;
  padding-right: 15px;
}

/* ===== DANH MỤC DỰ ÁN  ===== */
.dsduan-wrapper {
  max-width: 1300px;
  margin: 40px auto;
  padding: 0 15px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 30px;
  align-items: start;
}

/* LEFT */
.dsduan-left {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* ITEM */
.dsduan-item {
  display: flex;
  gap: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.dsduan-img {
  width: 260px;
  height: 160px;
  overflow: hidden;
  border-radius: 10px;
}

.dsduan-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* CONTENT */
.dsduan-title {
  font-size: 18px;
  font-weight: 600;
  color: #0b2e59;
  text-decoration: none;
  margin-top: 10px;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

  word-break: break-word;
  overflow-wrap: break-word;

  line-height: 1.4;
  max-height: calc(1.4em * 2);
}
.dsduan-text {
  font-size: 15px;
  color: #555;
  line-height: 1.6;

  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

  word-break: break-word;
  overflow-wrap: break-word;
}

/* RIGHT – STICKY */
.dsduan-right {
  position: sticky;
  top: 90px;
  background: #f9fafc;
  border-radius: 12px;
  padding: 20px;
}

.dsduan-right h3 {
  margin-bottom: 14px;
  font-size: 18px;
}

/* MOBILE */
@media (max-width: 992px) {
  .dsduan-wrapper {
    grid-template-columns: 1fr;
  }

  .dsduan-right {
    position: static;
  }
}

/* ===== HẾT DANH MỤC DỰ ÁN  ===== */
.mo-ta-vay {
  background: linear-gradient(135deg, #e6f5f8, #f9fdff);
  border-left: 6px solid #0b5c6b;
  padding: 20px 25px;
  border-radius: 12px;
  margin: 30px 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.mo-ta-vay h3 {
  margin: 0 0 10px;
  font-size: 22px;
  color: #0b5c6b;
}

.mo-ta-vay p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #444;
}
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s ease forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ===== CSS DỰ ÁN ===== */
.intro-section {
  padding: 40px 20px;
  text-align: center;
  border-bottom: 0px solid #e5e8ec;
}

/* .intro-section .container {
  max-width: 900px;
  margin: auto;
} */

.intro-title {
  font-size: 24px;
  font-weight: 700;
  color: #003c47;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.intro-desc {
  font-size: 17px;
  line-height: 1.6;
  color: #003c47;
  margin-bottom: 25px;
  opacity: 0.95;
}

/* Button */
.intro-btn {
  display: inline-block;
  padding: 12px 28px;
  background: linear-gradient(45deg, #003c47, #0fb9b1);
  color: #fff;
  font-size: 15px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.intro-btn:hover {
  background: linear-gradient(45deg, #0047c5, #00a7d7);
  transform: translateY(-3px);
}

/* ==== RESPONSIVE ==== */
@media (max-width: 767.98px) {
  .intro-desc {
    font-size: 17px;
  }
  .intro-btn {
    font-size: 17px;
    padding: 10px 24px;
  }
}

@media (max-width: 480px) {
  .intro-title {
    font-size: 27px;
    line-height: 34px;
    margin-top: 69px;
  }
  .intro-desc {
    font-size: 15px;
  }
}

/* ======= DỰ ÁN ======= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: roboto, sans-serif;
}

.project-section {
  padding: 45px 15px;
}

/* ======= SECTION TITLE ======= */
.project-section .title {
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  color: #003c47;
  margin-bottom: 5px;
}

.project-section .subtitle {
  text-align: center;
  color: #003c47;
  margin-bottom: 25px;
  margin-top: 13px;
}

/* ======= FILTER BUTTONS ======= */
.filter-btns {
  text-align: center;
  margin-bottom: 30px;
}

.filter-btns .btn-filter {
  display: inline-block;
  margin: 5px 10px;
  padding: 8px 18px;
  border: 1px solid #0fb9b1;
  background-color: white;
  color: #003c47;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btns .btn-filter.active,
.filter-btns .btn-filter:hover {
  background-color: #0fb9b1;
  color: white;
}

/* ======= PROJECT GRID ======= */
.project-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 3 dự án/row */
  gap: 20px;
}

/* ======= PROJECT ITEM ======= */
.project-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  background-color: #fff;
}

.project-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* ======= PROJECT IMAGE ======= */
.project-item figure {
  margin: 0;
  position: relative;
}

.project-item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 600 / 315; /* CHUẨN */
  object-fit: cover; /* CẮT ĐỀU – KHÔNG MÉO */
  display: block;
}

.project-item .tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 10px;
  color: white;
  font-size: 14px;
  border-radius: 3px;
}

.tag-open {
  background-color: #28a745;
} /* Mở Bán */
.tag-coming {
  background-color: #ffc107;
} /* Sắp Mở Bán */
.tag-hot {
  background-color: #dc3545;
} /* Hot */

/* ======= PROJECT CONTENT ======= */
.project-item figcaption {
  padding: 15px;
}

.project-item h3 {
  font-size: 18px;
  font-weight: 700;
  color: #003c47;
  margin-bottom: 6px;
}

.project-item .location {
  font-size: 14px;
  color: rgba(0, 60, 71, 0.75);
  margin-bottom: 5px;
}

.project-item .price {
  font-weight: bold;
  color: #0fb9b1;
}
.themotaduan {
  text-align: center;
  color: #003c47;
  margin-bottom: 25px;
  margin-top: 13px;
  font-size: 17px;
  width: 68%;
  margin: auto;
  margin-bottom: 30px;
}
/* ======= RESPONSIVE ======= */
@media (max-width: 992px) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 dự án/row tablet */
  }
}

@media (max-width: 600px) {
  .project-grid {
    grid-template-columns: 1fr; /* 1 dự án/mobile */
  }

  .project-item img {
    height: 180px;
  }
}

/* ===== HẾT CSS DỰ ÁN ===== */
.bds-project-bando {
  max-width: 1160px;
  margin: auto;
  padding: 10px 0px;
}
.project-info-box {
  background: #ffffff;
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  max-width: 420px;
  font-family: Arial, sans-serif;
}

.project-info-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 18px;
  color: #0b3c47;
}

.project-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.project-info-list li {
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed #ddd;
  font-size: 15px;
}

.project-info-list li:last-child {
  border-bottom: none;
}

.project-info-list .label {
  font-weight: 600;
  color: #003c47;
  width: 45%;
}

.project-info-list .value {
  text-align: right;
  color: #333;
  width: 55%;
  margin-left: 10px;
}

.project-info-list .highlight {
  color: #e63946;
  font-weight: 700;
}

.btn-brochure {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 22px;
  background: linear-gradient(135deg, #0b3c47, #0f6b7b);
  color: #fff;
  text-decoration: none;
  border-radius: 30px;
  font-weight: 600;
  text-align: center;
  transition: all 0.3s ease;
}

.btn-brochure:hover {
  background: linear-gradient(135deg, #0f6b7b, #0b3c47);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}
.policy-box {
  background: #ffffff;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border-left: 5px solid #0b5d66;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}

.policy-title {
  font-size: 22px;
  font-weight: 700;
  color: #0b5d66;
  margin-bottom: 14px;
  line-height: 1.4;
}

.policy-desc {
  font-size: 18px;
  color: #444;
  line-height: 1.7;
  margin-bottom: 18px;
}

.policy-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}

.policy-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  font-size: 18px;
  color: #222;
  line-height: 1.6;
}

.policy-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 2px;
  color: #0b5d66;
  font-weight: bold;
}

.policy-note {
  font-size: 18px;
  color: #777;
  font-style: italic;
  border-top: 1px dashed #ddd;
  padding-top: 14px;
}

/* ===== CSS CHI TIẾT DỰ ÁN ===== */

/* ===== RESET ===== */
* {
  box-sizing: border-box;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  text-decoration: none;
}

.section[id] {
  scroll-margin-top: 90px; /* chiều cao menu dự án */
}

/* ===== BDS TỔNG QUAN DỰ ÁN ===== */
.bds-project-overview {
  max-width: 1320px;
  margin: auto;
  padding: 10px 0px;
}

/* BOX NỘI DUNG */
.bds-overview-box {
  background: #ffffff;
  padding: 30px 32px;
  border-radius: 16px;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.06);
}

/* TIÊU ĐỀ H3 CHUẨN SEO */
.bds-overview-title {
  font-size: 26px;
  line-height: 1.3;
  color: #003c47;
  margin-bottom: 18px;
  position: relative;
  padding-left: 18px;
  font-weight: 600;
}

/* THANH NHẤN TRƯỚC TIÊU ĐỀ */
.bds-overview-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 5px;
  height: 70%;
  background: #003c47;
  border-radius: 3px;
}

/* NỘI DUNG MÔ TẢ */
.bds-overview-desc {
  font-size: 18px;
  line-height: 1.7;
  color: #444;
  margin: 0;
}

/* RESPONSIVE */
@media (max-width: 767.98px) {
  .bds-overview-box {
    padding: 22px 20px;
  }

  .bds-overview-title {
    font-size: 22px;
  }

  .bds-overview-desc {
    font-size: 15px;
  }
}

/* MOBILE */
@media (max-width: 767.98px) {
  .overview-box {
    padding: 22px 18px;
  }

  .overview-box h3 {
    font-size: 22px;
  }

  .overview-box p {
    font-size: 15px;
  }
}
/* ===== HEADER TỔNG ===== */
.news-headerduan {
  background:
    linear-gradient(rgba(0, 60, 71, 0.75), rgba(0, 60, 71, 0.75)),
    url(/project10/src/docs/images/common/project/caurongdanang.jpg) center / cover no-repeat;
  padding: 40px 20px;
  text-align: center;
  color: #fff;
}
.project-titleduan {
  font-size: 26px;
  line-height: 1.3;
  color: #e5b85a;
  margin-bottom: 8px;
  font-weight: 600;
}
.site-header {
  background: #fff;
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.project-descduan {
  max-width: 760px;
  margin: auto;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.6;
  color: #f1f1f1;
}

.tieudeduantong {
  font-size: 24px;
  color: #003c47;
  margin-bottom: 11px;
  line-height: 30px;
}
.project-menu-wrapper::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s;
  z-index: 9998;
}
.project-menu-wrapper.menu-open::before {
  opacity: 1;
  visibility: visible;
}
.project-menu-wrapper {
  background: #003c47;
  width: 100%;
  z-index: 1001;

  position: fixed;
  top: 0;
  left: 0;

  transform: translateY(-100%);
  visibility: hidden;

  transition:
    transform 0.4s ease-in-out,
    visibility 0.4s;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.project-menu-wrapper.is-sticky {
  transform: translateY(0);
  visibility: visible;
}
.project-menu a::after {
  display: none !important;
}

/* Nút X đóng menu tinh tế hơn */
.project-menu-close {
  display: block;
  position: absolute;
  top: 18px;
  right: 20px;
  font-size: 20px;
  color: #666 !important;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #f3f4f6;
  transition: all 0.2s;
}

.project-menu-close:hover {
  background-color: #e5e7eb;
  color: #000 !important;
}

#header-container,
.mobile-menu-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
  transition: transform 0.4s ease-in-out;
}

.header-hidden {
  transform: translateY(-100%) !important;
}

.project-menu-inner {
  max-width: 1300px;
  margin: auto;
  position: relative;
}

/* ACCESSIBILITY */
.sr-only {
  position: absolute;
  left: -9999px;
}

/* MOBILE */
@media (max-width: 767.98px) {
  .leadbox-wrapper {
    padding: 22px 18px;
  }

  .leadbox-title {
    font-size: 20px;
  }
}

/* ===== DESKTOP PROJECT HEADER ===== */
.project-menu {
  position: static;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 16px 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 34px;
  background: transparent;
  box-shadow: none;
  list-style: none;
}

.project-menu li {
  width: auto;
  border: 0;
}

.project-menu li a {
  display: block;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  padding: 8px 2px;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.project-menu li a:hover,
.project-menu li a.active {
  color: #55ddd6;
}
/* hover + active */
.project-menu a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #06b6d4, #2563eb);
  transition: 0.35s;
  transform: translateX(-50%);
}

.project-menu a:hover,
.project-menu a.active {
  color: #06b6d4;
}

.project-menu a:hover::after,
.project-menu a.active::after {
  width: 100%;
}

/* ===== MOBILE ===== */
.project-menu-toggle,
.project-menu-close {
  display: none;
}

/* ===== MOBILE STYLE ===== */
/* ===== MOBILE STYLE ĐÃ SỬA HIỆU ỨNG TRƯỢT & LÀM ĐẸP LI ===== */
@media (max-width: 991px) {
  .project-menu-toggle {
    display: block;
    background: none;
    border: 0;
    font-size: 24px;
    padding: 10px 14px;
    cursor: pointer;
    color: #fff;
  }

  /* Lớp nền tối mờ phía sau menu (Overlay) */
  .project-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.35s ease,
      visibility 0.35s ease;
  }

  .project-menu-overlay.show {
    opacity: 1;
    visibility: visible;
  }

  /* Khung menu mobile trượt từ cạnh trái */
  .project-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    background-color: #ffffff;
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    padding: 65px 18px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;

    /* SỬA LỖI HIỆU ỨNG: Dùng transform thay vì right/left để trượt ra/vô cực mượt */
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Khi có class .show sẽ trượt vào màn hình */
  .project-menu.show {
    transform: translateX(0);
  }

  /* --- LÀM ĐẸP CÁC THẺ LI VÀ LINK --- */
  .project-menu li {
    width: 100%;
    border-bottom: 1px dashed #eaefef;
  }

  .project-menu li:last-child {
    border-bottom: none;
  }

  .project-menu a {
    display: block;
    color: #003c47 !important;
    font-size: 15px;
    font-weight: 500;
    padding: 13px 12px;
    border-radius: 8px;
    transition: all 0.25s ease;
  }

  /* Hiệu ứng chạm/hover: Đổi màu nền, màu chữ và nhích nhẹ sang phải */
  .project-menu a:hover,
  .project-menu a.active {
    color: #0fb9b1 !important;
    background-color: #f0fdfc;
    padding-left: 18px;
    font-weight: 600;
  }

  /* Ẩn thanh gạch ngang bên dưới của bản desktop */
  .project-menu a::after {
    display: none !important;
  }

  /* Nút X đóng menu tròn, đẹp và dễ chạm */
  .project-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    font-size: 18px;
    color: #555 !important;
    background-color: #f3f4f6;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .project-menu-close:hover {
    background-color: #e5e7eb;
    color: #000 !important;
    transform: rotate(90deg);
  }
}
/* ===== SECTION DEMO ===== */
.sec {
  height: auto;
  padding: 0px;
  border-bottom: 0px solid #eee;
}
.secmatbang {
  height: auto;
  padding: 0px;
  /* border-bottom: 1px solid #eee; */
}

/* ===== ĐOẠN MỞ BÀI H1 - MÔ TẢ ===== */
.project-hero {
  position: relative;
  min-height: 185px;
  display: flex;
  align-items: center;
  background: #000;
  color: #fff;
  overflow: hidden;
}

/* lớp phủ tối cho chữ nổi */
.project-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.65));
  z-index: 1;
}

.project-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  padding: 0 20px;
  margin: auto;
  text-align: center;
}

.project-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.project-desc {
  max-width: 760px;
  margin: auto;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.6;
  color: #f1f1f1;
}

/* ===== MOBILE ===== */
@media (max-width: 767.98px) {
  .project-hero {
    min-height: 300px;
  }

  .project-title {
    text-transform: none;
  }
}

/* ===== MỤC SLIDE  ===== */

.project-slider {
  position: relative;
  max-width: 100%;
  margin: 0 auto 0px;
  overflow: hidden;
}

/* Ẩn radio */
.project-slider input {
  display: none;
}

/* Slide container */
.slides {
  display: flex;
  transition: transform 0.6s ease;
}

/* Mỗi slide */
.slide {
  width: 100%;
  flex-shrink: 0;
}

.slide img {
  width: 100%;
  height: auto;
  display: block;
}

/* Điều hướng */
.slider-nav {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.slider-nav label {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  cursor: pointer;
}

/* Active slide */
#slide1:checked ~ .slides {
  transform: translateX(0%);
}
#slide2:checked ~ .slides {
  transform: translateX(-100%);
}
#slide3:checked ~ .slides {
  transform: translateX(-200%);
}

#slide1:checked ~ .slider-nav label:nth-child(1),
#slide2:checked ~ .slider-nav label:nth-child(2),
#slide3:checked ~ .slider-nav label:nth-child(3) {
  background: #24cdd5;
}

@media (max-width: 767.98px) {
  .slider-nav {
    display: none;
  }
  .slides {
    width: 100%;
  }
  .slide:not(:first-child) {
    display: none;
  }
}

/* ===== HOME GIỚI THIỆU  ===== */
/* LAYOUT */

/* --- LAYOUT TỔNG --- */
.sec-gioithieu {
  background: url(/project10/src/docs/images/common/project/nenduandanang.png) center / cover no-repeat;
  padding: 0px 0px;
  color: #fff;
}

/* Container 2 cột 6:4 */
.project-intro {
  max-width: 1350px;
  margin: auto;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 40px;
  align-items: start;
}

/* HÌNH ẢNH BÊN TRÁI */
.project-media img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
}

/* ẨN RADIO INPUT */
.project-info input[type="radio"] {
  display: none;
}

/* --- TABS --- */
.project-tabs {
  display: inline-flex;
  border: 1px solid #d2c1aa;
  border-radius: 30px;
  /* overflow: hidden; */
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.project-tabs label {
  padding: 8px 22px;
  font-size: 14px;
  cursor: pointer;
  color: #003c47;
  transition: 0.3s;
  white-space: nowrap;
  border-radius: 20px;
}

#tab-tongquan:checked ~ .project-tabs label[for="tab-tongquan"],
#tab-vitri:checked ~ .project-tabs label[for="tab-vitri"],
#tab-chudautu:checked ~ .project-tabs label[for="tab-chudautu"] {
  background: #003c47;
  color: #fff;
}

/* --- NỘI DUNG TAB --- */
.tab-content {
  display: none;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  animation: fade 0.3s ease;
}

#tab-tongquan:checked ~ .tongquan,
#tab-vitri:checked ~ .vitri,
#tab-chudautu:checked ~ .chudautu {
  display: block;
}

.tab-content h2 {
  font-size: 26px;
  margin-bottom: 16px;
}

.tab-content ul {
  padding-left: 18px;
}

.tab-content li {
  margin-bottom: 8px;
}

/* BUTTON TẢI BROCHURE */
.btn-brochure {
  display: inline-block;
  margin-top: 24px;
  padding: 12px 28px;
  background: #6b4b2a;
  color: #fff;
  text-decoration: none;
  border-radius: 30px;
  font-size: 14px;
}

/* --- MOBILE --- */
@media (max-width: 992px) {
  .project-intro {
    grid-template-columns: 1fr;
  }

  .project-tabs {
    justify-content: center;
  }
}

/* --- ANIMATION --- */
@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- ACCESSIBILITY --- */
.sr-only {
  position: absolute;
  left: -9999px;
}

/* CSS VỊ TRÍ TRANG */

/* --- LAYOUT TỔNG --- */
.sec-vitri {
  background: #fff;
  padding: 0;
  color: #fff;
  font-family: Arial, sans-serif;
}

.project-overview {
  padding: 35px 20px;
  background: #ffffff;
}

/* --- GRID 6:4 --- */
.project-wrap {
  max-width: 1300px;
  margin: auto;
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 50px;
  align-items: center;
  padding: 10px 16px;
}

/* IMAGE */
.project-media {
  border-radius: 16px;
  overflow: hidden;
}

.project-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* CONTENT */
.project-content {
  color: #3a3a3a;
}

.project-subtitle {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #8b6f4e;
  margin-bottom: 10px;
}

.project-title {
  font-size: 32px;
  line-height: 1.3;
  color: #4a3620;
  margin-bottom: 20px;
}

.project-info p {
  margin: 10px 0;
}

.project-info ul {
  padding-left: 18px;
  margin-bottom: 15px;
}

.project-info ul li {
  margin-bottom: 6px;
  list-style: disc;
}

/* BUTTON BROCHURE */
.btn-brochure {
  display: inline-block;
  margin-top: 25px;
  padding: 12px 28px;
  background: #003c47;
  color: #fff;
  border-radius: 30px;
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s;
}

.btn-brochure:hover {
  background: #52371f;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
  .project-wrap {
    grid-template-columns: 1fr;
  }

  .project-title {
    font-size: 26px;
  }

  .project-subtitle {
    font-size: 13px;
  }
}
/* --- RESPONSIVE --- */
@media (max-width: 992px) {
  .project-wrap {
    grid-template-columns: 1fr;
  }

  /* Mobile: nội dung hiển thị trước ảnh */
  .project-media {
    order: 2; /* ảnh xuống sau */
  }

  .project-content {
    order: 1; /* nội dung lên trước */
  }
}

/* ===============================
   POLICY + FORM SECTION
================================ */

/* ===== GRID 6:4 ===== */
.policy-grid {
  max-width: 1280px;
  margin: auto;
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: 36px;
  padding: 24px 16px;
  margin-bottom: 30px;
}

/* ===== LEFT POLICY ===== */
.policy-box {
  background: #ffffff;
  border: 3px solid #003c47;
  border-radius: 22px;
  padding: 32px;
}

.policy-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.policy-list li {
  font-size: 16px;
  line-height: 1.7;
  color: #003c47;
  margin-bottom: 14px;
}

.policy-list strong {
  color: #d62828;
  margin-right: 6px;
}

.policy-note {
  margin-top: 18px;
  font-size: 13px;
  color: #666;
}

/* ===== RIGHT FORM ===== */
.leadbox-wrapper {
  background: #003c47;
  border-radius: 22px;
  padding: 32px;
  color: #fff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

.leadbox-header {
  text-align: center;
  margin-bottom: 18px;
}

.leadbox-title {
  font-size: 22px;
  font-weight: bold;
  color: #ffd28a;
}

/* INPUT */
.leadbox-form input {
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: 8px;
  border: none;
  font-size: 15px;
  outline: none;
}

/* BUTTON */
.leadbox-submit {
  width: 100%;
  padding: 15px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f04a2a, #ff6b4a);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  transition: 0.3s ease;
}

.leadbox-submit:hover {
  background: linear-gradient(135deg, #d63e22, #f04a2a);
  transform: translateY(-1px);
}

/* TEXT */
.leadbox-note {
  font-size: 13px;
  margin-top: 16px;
  color: #d9e5e8;
}

.leadbox-policy {
  font-size: 12px;
  margin-top: 8px;
  color: #cfd8dc;
}

.leadbox-policy a {
  color: #ffd28a;
  text-decoration: underline;
}

/* ===== MOBILE ===== */
@media (max-width: 767.98px) {
  .policy-grid {
    grid-template-columns: 1fr;
  }

  .leadbox-title {
    font-size: 20px;
  }
}

/* ACCESSIBILITY */
.sr-only {
  position: absolute;
  left: -9999px;
}

.project-video {
  padding: 0px 1px;
  text-align: center;
  margin-bottom: 0px;
}

.video-header .video-title {
  font-size: 28px;
  color: #003c47;
  margin-bottom: 10px;
  text-rendering: optimizeLegibility;
  font-weight: 600;
}

.video-header p {
  font-size: 16px;
  color: #666;
  margin-bottom: 30px;
}

.video-frame {
  max-width: 900px;
  margin: auto;
  border-radius: 24px;
  overflow: hidden;
  /* box-shadow: 0 25px 60px rgba(0, 0, 0, .15); */
  padding-bottom: 30px;
}

/* GIỮ TỈ LỆ 16:9 – KHÔNG MÉO */
.video-frame iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

/* MOBILE */
@media (max-width: 767.98px) {
  .video-header .video-title {
    font-size: 22px;
  }
}

.bds-form-btn {
  width: 100%;
  padding: 14px 20px;
  background: #003c47;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.bds-form-btn:hover {
  background: #025866;
}

.bds-form-info {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #fff;
}

.bds-form-policy {
  margin-top: 8px;
  font-size: 12.5px;
  color: #fff;
}

.bds-form-policy a {
  color: #fff;
  text-decoration: underline;
}
/* ===== LEAD FORM BOX ===== */
.leadbox-wrapper {
  background: #ffffff;
  padding: 26px 24px;
  border-radius: 18px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.08);
  max-width: 420px;
  margin: auto;
}

/* TITLE */
.leadbox-title {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #003c47;
  margin-bottom: 20px;
  line-height: 1.35;
  position: relative;
}

/* Thanh nhấn */
.leadbox-title::after {
  content: "";
  display: block;
  width: 70px;
  height: 3px;
  background: #003c47;
  border-radius: 3px;
  margin: 10px auto 0;
}

/* FORM */
.leadbox-form input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 20px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 14px;
  outline: none;
}

.leadbox-form input:focus {
  border-color: #003c47;
}

/* BUTTON */
.leadbox-submit {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #003c47, #0b5f6e);
  color: #fff;
  border: none;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.leadbox-submit:hover {
  opacity: 0.9;
}

/* NOTE */
.leadbox-note {
  font-size: 15px;
  color: #555;
  margin-top: 14px;
  line-height: 1.6;
  text-align: left;
}

/* POLICY */
.leadbox-policy {
  font-size: 12.5px;
  color: #777;
  margin-top: 10px;
}

.leadbox-policy a {
  color: #003c47;
  text-decoration: underline;
}

.filter-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.btn-filter {
  padding: 8px 18px;
  border-radius: 30px;
  border: none;
  background: #f2f2f2;
  cursor: pointer;
  font-size: 14px;
  transition: 0.25s;
}

.btn-filter:hover {
  background: #cfa44a;
  color: #fff;
}

.btn-filter.active {
  background: #111;
  color: #fff;
}

/* ===== PROJECT ===== */
.project-block {
  max-width: 1300px;
  margin: 6px auto;
  padding: 10px;
  /* border: 1px solid #eee; */
  border-radius: 12px;
}

.project-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 15px;
  padding-bottom: 20px;
}

.project-item {
  display: none;
  padding: 15px;
  border: 0px solid #ddd;
  border-radius: 10px;
  background: #fff;
}

.project-item.show {
  display: block;
}

.project-item h3 {
  font-size: 16px;
  margin-bottom: 5px;
}
/* ===== FILTER ===== */
.filter-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.btn-filter {
  padding: 8px 18px;
  border-radius: 30px;
  border: none;
  background: #f2f2f2;
  cursor: pointer;
  font-size: 14px;
  transition: 0.25s;
}

.btn-filter:hover {
  background: #cfa44a;
  color: #fff;
}

.btn-filter.active {
  background: #111;
  color: #fff;
}

/* ===== PROJECT ===== */

.project-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 15px;
}

.project-item {
  display: none;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}

.project-item.show {
  display: block;
}

.project-item h3 {
  font-size: 16px;
  margin-bottom: 5px;
}

.faq-sectionduan {
  padding: 50px 15px;
}

.featured-tieude {
  font-size: 20px;
  font-weight: 700;
  color: #003c47;
  margin-bottom: 18px;
}

.area-v2__card {
  cursor: pointer;
}

.area-v2__card img {
  transition: transform 0.35s ease;
}

.area-v2__card:hover img {
  transform: scale(1.05);
}

/* nháy */
.btnprimary,
.btnprimary-alt {
  background: #003c47;
}
.button {
  position: relative;
  display: inline-block;
  font-size: 13px;
  padding: 1.8rem 2.5rem;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  z-index: 1;
  border: 1px solid transparent;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  overflow: hidden;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
    /* Starting shadow color, adjust as needed */
  }

  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 15px rgba(0, 123, 255, 0);
    /* Expanding shadow, fading out */
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}

.button.btnprimary.pagescroll {
  animation: pulse 0.5s infinite;
  font-weight: 500;
  color: #ffffff;
}

/* .button.btnsecondary.pagescroll {
        animation: pulse 2s infinite;
        font-weight: 500;
        color: #F8F8F8;
    } */

/* nháy */

/* ===== TIN LIÊN QUAN DỰ ÁN ===== */

.duanbds-section {
  padding: 0px 0;
  background: #fff;
}

.duanbds-container {
  max-width: 1290px;
  margin: auto;
  padding: 0 0px;
}

/* ===== TITLE ===== */
.duanbds-title {
  font-size: 26px;
  margin-bottom: 10px;
}

.duanbds-title a {
  color: #0b2e59;
  text-decoration: none;
}

.duanbds-desc {
  max-width: 700px;
  color: #555;
  margin-bottom: 30px;
}

/* ===== GRID ===== */
.duanbds-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

/* ===== ITEM ===== */
.duanbds-item article {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.duanbds-item article:hover {
  transform: translateY(-5px);
}

/* ===== IMAGE ===== */
.duanbds-img {
  position: relative;
}

.duanbds-img img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

/* ===== LABEL ===== */
.duanbds-label {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #e63946;
  color: #fff;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 20px;
}

/* ===== CONTENT ===== */
.duanbds-content {
  padding: 15px;
}

.duanbds-name {
  font-size: 16px;
  margin: 0 0 8px;
}

.duanbds-name a {
  color: #0b2e59;
  text-decoration: none;
}

.duanbds-location {
  font-size: 14px;
  color: #666;
  margin-bottom: 6px;
}

.duanbds-price {
  font-size: 16px;
  font-weight: bold;
  color: #d00000;
}

/* ===== VIEW MORE ===== */
.duanbds-more {
  display: inline-block;
  margin: 30px auto 0;
  padding: 12px 28px;
  background: #0b2e59;
  color: #fff;
  text-decoration: none;
  border-radius: 30px;
  transition: background 0.3s ease;
}

.duanbds-more:hover {
  background: #06305f;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 767.98px) {
  .duanbds-img img {
    height: 160px;
  }

  .duanbds-title {
    font-size: 22px;
  }
}

/* LOGO DOI TÁC */
.hover-logo {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.hover-logo img {
  width: 75%;
  height: auto;
  transition: 0.4s ease;
  filter: grayscale(100%);
  opacity: 0.8;
}

.hover-logo:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.05);
}

/* LOGO DOI TÁC */

/* HÌNH ẢNH DƯỚI ĐỐI TÁC
-------------------------------------------------------------- */

.area-v2 {
  max-width: 1250px;
  margin: 0 auto;
  padding: 40px 16px;
}

.area-v2__header {
  text-align: center;
  margin-bottom: 32px;
}

.area-v2__title {
  font-size: 28px;
  margin-bottom: 8px;
}

.area-v2__desc {
  color: #666;
}

/* GRID GỐC */
.area-v2__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* CARD */
.area-v2__card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.area-v2__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  transition: transform 0.4s ease;
}

.area-v2__card:hover img {
  transform: scale(1.05);
}

/* OVERLAY */
.area-v2__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
  color: #fff;
}

.area-v2__name {
  font-weight: 600;
  font-size: 16px;
}

.area-v2__count {
  font-size: 13px;
  opacity: 0.85;
}

/* ===== DESKTOP BỐ CỤC HỘI AN Ở GIỮA ===== */
@media (min-width: 1024px) {
  .card-5 {
    grid-column: 1 / span 1;
  }

  .card-hoian {
    grid-column: 2 / span 2;
  }

  .card-6 {
    grid-column: 4 / span 1;
  }
}

/* ===== MOBILE CHUẨN THEO SƠ ĐỒ ===== */
@media (max-width: 767px) {
  .area-v2__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .area-v2__card {
    grid-column: auto;
    order: initial;
  }

  .card-1 {
    order: 1;
  }
  .card-2 {
    order: 2;
  }
  .card-3 {
    order: 3;
  }
  .card-4 {
    order: 4;
  }

  .card-hoian {
    order: 5;
    grid-column: 1 / -1;
  }

  .card-5 {
    order: 6;
  }
  .card-6 {
    order: 7;
  }

  .area-v2__card img {
    aspect-ratio: 600 / 315;
  }
}
/* ===== TIÊU ĐỀ CAO CẤP ===== */
.area-v2__title {
  font-size: 24px;
  font-weight: 800;
  color: #003c47;
  font-family: "Roboto";
}

.area-v2__desc {
  font-size: 17px;
  color: #003c47;
  margin-top: 15px;
}

/* ===== CARD CAO CẤP ===== */
.area-v2__card {
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.area-v2__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.18);
}

/* ===== ẢNH ===== */
.area-v2__card img {
  transition: transform 0.5s ease;
}

.area-v2__card:hover img {
  transform: scale(1.08);
}

/* ===== OVERLAY SANG TRỌNG ===== */
.area-v2__overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.1) 100%);
  padding: 18px;
}

/* ===== TÊN KHU VỰC ===== */
.area-v2__name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

/* ===== SỐ LƯỢNG TIN – BADGE CAO CẤP ===== */
.area-v2__count {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  width: fit-content;
}

/* ===== HỘI AN NỔI BẬT HƠN ===== */
.area-v2__card--featured .area-v2__name {
  font-size: 18px;
  padding-bottom: 5px;
}

.area-v2__card--featured .area-v2__count {
  font-size: 14px;
  padding: 6px 14px;
}

/* ===== MOBILE TINH GỌN ===== */
@media (max-width: 767px) {
  .area-v2__title {
    font-size: 24px;
  }

  .area-v2__name {
    font-size: 15px;
  }

  .area-v2__card--featured .area-v2__name {
    font-size: 18px;
  }
}

/* ===== kết thúc tin tức đầu trang ===== */

/* =========================
KHÁM PHÁ BĐS
========================= */

.section-title {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: #003c47;
  margin-bottom: 7px;
  margin-top: 60px;
  line-height: 30px;
}

.section-desc {
  text-align: center;
  font-size: 15px;
  color: #5f7d83;
  margin-bottom: 32px;
}

/* TEXT BAR */

/* TÊN PHƯỜNG */

/* BADGE TIN */

/* ICON */
.count-icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
}

/* MOBILE */

/* =========================
   GRID
========================= */
.area-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* =========================
   CARD CHUNG
========================= */

/* Overlay xanh ngọc */

/* Text */

/* Hover nhẹ */

/* =========================
   HÀNG DƯỚI DESKTOP
========================= */

/* =========================
   TABLET
========================= */
/* =========================
   MOBILE
========================= */

/* Đối tác
-------------------------------------------------------------- */

.wrap-partners {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.wrap-partners:hover .partner-item:not(:hover) {
  filter: brightness(0.9) saturate(0) contrast(1.2) blur(2px);
}

.partner-item {
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.partner-item:hover svg path {
  fill: var(--Primary);
}
.partner-item.style-2 {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  height: 100%;
  border-radius: 16px;
  text-align: center;
}
.partner-item.style-2:hover {
  border-color: #0fb9b1;
}

/*------------ DANH SÁCH CÁC PHƯỜNG footer ---------------- */

/* ===== BANNER DESKTOP ===== */
.bds-banner {
  background-color: #003c47;
  padding-top: 60px;
  background-image: url(/project10/src/docs/images/common/gia-bds-danang.png);
  padding: 30px 95px;
  color: #fff;
  margin-top: 30px;
  margin-bottom: 30px;
}

.bds-banner-inner {
  max-width: 1292px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 22px;
  align-items: center;
}

/* TEXT */
.banner-title {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 18px;
  color: #0fb9b1;
}

.banner-desc {
  font-size: 14px;
  line-height: 1.7;
  color: #d7eef2;
  margin-bottom: 20px;
}

.banner-list {
  list-style: none;
  margin-bottom: 28px;
}

.banner-list li {
  margin-bottom: 10px;
  font-size: 13px;
  color: #e5b85a;
}

/* BUTTON */
.banner-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.banner-actions a {
  padding: 14px 28px;
  border-radius: 30px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-primary {
  background: #0fb9b1;
  color: #fff;
}

.btn-primary:hover {
  background: #003c47;
  transform: translateY(-2px);
}

.btn-outline {
  border: 2px solid rgba(255, 255, 255, 0.85);
  color: #fff;
}

.btn-outline:hover {
  background: #fff;
  color: #0f4c5c;
}

/* IMAGE */
.bds-banner-visual {
  position: relative;
}

.bds-banner-visual img {
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}

.banner-location {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(0, 0, 0, 0.55);
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  backdrop-filter: blur(4px);
}

/* ===== MOBILE OPTIMIZE ===== */
@media (max-width: 767.98px) {
  .bds-banner {
    padding: 36px 14px;
  }

  .bds-banner-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .banner-title {
    font-size: 20px;
  }

  .banner-desc {
    font-size: 14px;
  }

  .banner-list li {
    font-size: 14px;
  }

  .banner-actions {
    justify-content: center;
  }

  .banner-actions a {
    width: 100%;
    text-align: center;
  }

  .bds-banner-visual img {
    max-height: 220px; /* giảm chiều cao banner mobile */
  }
}

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0, 196, 204, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
  font-size: 18px;
  transition: all 0.3s ease;
}

@media (hover: hover) {
  .footer-social a:hover {
    background: linear-gradient(135deg, #00c2c7, #003c47);
    color: #fff;
    transform: translateY(-3px);
  }
}
.bds-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 26px 10px 0;
  font-size: 14px;
  color: #003c47;
  text-decoration: none;
  border-bottom: 1px dashed #e5e7eb;
  transition:
    color 0.25s ease,
    padding 0.25s ease;
}

/* ICON MŨI TÊN */
.bds-item::after {
  width: 18px;
  height: 18px;
  content: "";
  position: absolute;
  right: 0;
  background-color: #9ca3af;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M15 16l4-4'/%3E%3Cpath d='M15 8l4 4'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M15 16l4-4'/%3E%3Cpath d='M15 8l4 4'/%3E%3C/svg%3E")
    center / contain no-repeat;
  transition:
    transform 0.25s ease,
    background-color 0.25s ease;
}

/* HOVER DESKTOP */
@media (hover: hover) {
  .bds-item:hover {
    color: #00c2c7;
    padding-left: 4px;
  }

  .bds-item:hover::after {
    transform: translateX(6px);
    background-color: #00c2c7;
  }
}

/* MOBILE TAP */
@media (max-width: 767.98px) {
  .bds-item:active {
    background: rgba(0, 194, 199, 0.08);
  }
}

.bds-container {
  max-width: 1300px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.bds-col {
  background: #f9fbfc;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 1;
}

/* HEADER */
.bds-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* TITLE */
.bds-title {
  font-size: 15px;
  font-weight: 700;
  color: #f59e0b;
  line-height: 1.7;
}

/* TOGGLE BUTTON */
.bds-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #00e6ef, #003c47);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  visibility: hidden;
}

.bds-toggle span {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform 0.3s ease;
}

@media (max-width: 767.98px) {
  .bds-toggle {
    visibility: visible;
  }
}

/* LIST */
.bds-list {
  margin-top: 12px;
}

/* MOBILE */
@media (max-width: 767.98px) {
  .bds-container {
    grid-template-columns: 1fr;
  }

  .bds-toggle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #00e6ef, #003c47);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    pointer-events: auto;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    display: block;
  }
  .bds-list {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      max-height 0.35s ease,
      opacity 0.25s ease;
  }

  .bds-col.active .bds-list {
    max-height: 600px;
    opacity: 1;
  }

  .bds-col.active .bds-toggle span {
    transform: rotate(45deg);
    display: inline-block;
  }
}

/* LINKS */
.bds-list a {
  display: block;
  padding: 13px 0;
  font-size: 15px;
  color: #003c47;
  text-decoration: none;
  border-bottom: 1px dashed #e5e7eb;
}

/*------------ KẾT THÚC CÁC PHƯỜNG footer ---------------- */

/*------------ HÌNH ẢNH DỰ ÁN ---------------- */
/* Reset gọn */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Wrapper */
.bds-wrapper {
  max-width: 1200px;
  margin: auto;
  padding: 16px;
}

/* Grid giống hình */
.bds-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* Card */
.bds-card {
  display: block;
  height: 220px;
  border-radius: 14px;
  overflow: hidden;
  background: #eee;
}

/* Card lớn (Hội An) */
.bds-large {
  grid-column: span 2;
}

/* Figure */
.bds-card figure {
  position: relative;
  height: 100%;
}

/* Image */
.bds-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s ease;
}

/* Overlay */
.bds-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.7));
}

/* Tag */
.bds-tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* Hover zoom */
.bds-card:hover img {
  transform: scale(1.08);
}

/* ================= GALLERY FULLSCREEN ================= */

.bds-gallery {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  z-index: 9999;
}

.bds-gallery:target {
  display: block;
}

/* Track lướt ngang */
.bds-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.bds-track img {
  min-width: 100%;
  height: 100%;
  object-fit: contain;
  scroll-snap-align: center;
}

/* Close */
.bds-close {
  position: absolute;
  top: 18px;
  right: 26px;
  font-size: 40px;
  color: #fff;
  text-decoration: none;
  z-index: 10;
}

/* ================= RESPONSIVE ================= */

/* Tablet */
@media (max-width: 1024px) {
  .bds-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bds-large {
    grid-column: span 2;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .bds-grid {
    grid-template-columns: 1fr;
  }

  .bds-large {
    grid-column: span 1;
  }

  .bds-card {
    height: 200px;
  }
}

/*------------ HÌNH ẢNH DỰ ÁN ---------------- */

/*------------  footer ---------------- */

.footer {
  background: linear-gradient(135deg, #003c47, #002e36);
  color: #cfe8ec;
  font-size: 14px;
}

/* TOP */
.footer-top {
  max-width: 1280px;
  margin: auto;
  padding: 36px 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logo-box img {
  max-height: 56px;
}

.footer-slogan {
  margin-top: 6px;
  font-size: 13px;
  color: #00c4cc;
}

/* CONTACT */
.footer-contact {
  display: flex;
  gap: 28px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-item .icon {
  font-size: 22px;
  color: #00c4cc;
}

/* SOCIAL */
.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.footer-social img {
  width: 18px;
  height: 18px;
}

.footer-social a:hover {
  background: rgba(0, 196, 204, 0.35);
  transform: translateY(-3px);
}
/* CONTACT WRAPPER */
.footer-contact {
  display: flex;
  gap: 20px;
  justify-content: center;
}
/* FOOTER ABOUT */
.footer-col.about {
  max-width: 420px;
  line-height: 1.6;
}

.footer-about {
  font-size: 17px;
  color: #d1d5db; /* xám nhạt dễ đọc trên nền footer */
  margin: 0;
}

/* Nhấn thương hiệu */
.footer-about strong {
  color: #ffffff;
  font-weight: 600;
}

/* Mobile tối ưu */
@media (max-width: 767.98px) {
  .footer-col.about {
    max-width: 100%;
  }

  .footer-about {
    font-size: 13.5px;
  }
}

.social-links {
  display: flex;
  gap: 14px;
  margin: auto;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f2f6f7;
  color: #003c47;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 60, 71, 0.15);
  transition: all 0.35s ease;
}

.social-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Hover sang trọng */
.social-icon:hover {
  background: linear-gradient(135deg, #003c47, #0aa1a8);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 60, 71, 0.25);
}
.social-icon:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(10, 161, 168, 0.15);
}

/* CARD */
.contact-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.3s ease;
}

/* ICON */
.contact-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0, 196, 204, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* TEXT */
.contact-info span {
  font-size: 12px;
  color: #9fdbe0;
}

.contact-info strong {
  display: block;
  font-size: 15px;
  color: #ffffff;
  margin-top: 2px;
}

/* HOVER */
.contact-card:hover {
  background: rgba(0, 196, 204, 0.25);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 60, 71, 0.4);
}

/* HOTLINE nổi hơn */
.contact-card.hotline {
  background: rgba(0, 196, 204, 0.22);
}

/* MOBILE */
@media (max-width: 992px) {
  .footer-contact {
    flex-direction: column;
    align-items: center;
  }

  .contact-card {
    width: 100%;
    max-width: 360px;
    justify-content: center;
  }
}
/* Desktop giữ nguyên */
.accordion-content {
  display: block;
}

/* MOBILE */
@media (max-width: 767.98px) {
  .accordion {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 8px 0;
  }

  .accordion-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: #e6ffff;
    cursor: pointer;
  }

  .icon-toggle {
    font-size: 20px;
    color: #00c4cc;
    transition: transform 0.3s ease;
  }

  .accordion-content {
    display: none;
    padding: 8px 0 0 0;
  }

  .accordion.active .accordion-content {
    display: block;
    animation: fadeIn 0.3s ease;
  }

  .accordion.active .icon-toggle {
    transform: rotate(45deg);
  }

  .accordion-content li a {
    display: block;
    padding: 6px 0;
    font-size: 14px;
    color: #cceff2;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* MAIN */
.footer-main {
  max-width: 1280px;
  margin: auto;
  padding: 50px 20px;
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 30px;
}

.footertieude {
  color: #00c4cc;
  font-size: 17px;
  margin-bottom: 14px;
  text-transform: capitalize;
}

.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col li {
  margin-bottom: 10px;
}

.footer-col a {
  color: #cfe8ec;
  text-decoration: none;
  position: relative;
  transition: 0.3s;
}

.footer-col a:hover {
  color: #00e6ef;
  padding-left: 4px;
}

.footer-col a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: #00c4cc;
  transition: width 0.3s;
}

.footer-col a:hover::after {
  width: 100%;
}

/* ABOUT */
.footer-col.about p {
  line-height: 1.7;
}

/* BOTTOM */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  padding: 16px;
  font-size: 13px;
  color: #b7dfe5;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .footer-top {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-contact {
    justify-content: center;
    flex-wrap: wrap;
    grid-auto-flow: row !important ;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .footer-main {
    grid-template-columns: 1fr;
    padding: 40px 16px;
  }
}

/*------------ TOP  ---------------- */

.progress-wrap {
  position: fixed;
  right: 20px;
  bottom: 100px;
  width: 56px;
  height: 56px;
  cursor: pointer;
  z-index: 999;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 196, 204, 0.35), rgba(0, 60, 71, 0.65));
  box-shadow:
    0 8px 25px rgba(0, 196, 204, 0.35),
    inset 0 0 0 1.5px rgba(0, 196, 204, 0.6);
  backdrop-filter: blur(6px);
}

.progress-wrap svg {
  position: absolute;
  inset: 0px;
  transform: rotate(-90deg);
}

.progress-wrap path {
  fill: none;
  stroke: linear-gradient(135deg, #00e6ef, #00b3bd);
  stroke-width: 4;
}

.progress-icon {
  position: absolute;
  inset: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #ffffff;
  background: radial-gradient(circle at top left, rgba(0, 255, 255, 0.35), rgba(0, 60, 71, 0.8));
  border-radius: 50%;
  box-shadow: inset 0 0 12px rgba(0, 196, 204, 0.6);
  transition: all 0.3s ease;
}

.progress-wrap:hover {
  transform: translateY(-4px);
}

.progress-wrap:hover .progress-icon {
  background: #00e6ef;
  color: #003c47;
  box-shadow:
    0 0 20px rgba(0, 230, 239, 0.8),
    inset 0 0 0 rgba(0, 0, 0, 0);
}

/* SECTION */
.utility-section {
  padding: 30px 20px;
  background: transparent;
}

/* GRID */

/* CARD */

/* VIỀN PHÁT SÁNG */

/* TEXT */

/* ICON COLORS */
.bg-teal {
  background: linear-gradient(135deg, #00c4cc, #007a85);
}
.bg-orange {
  background: linear-gradient(135deg, #ff9f43, #ff6f00);
}
.bg-purple {
  background: linear-gradient(135deg, #8e44ad, #5e2b97);
}
.bg-yellow {
  background: linear-gradient(135deg, #f6c90e, #f39c12);
}

.ripple {
  position: absolute;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(0, 196, 204, 0.4), transparent 60%);
  transform: translate(-50%, -50%) scale(0);
  animation: ripple 0.6s ease-out;
  pointer-events: none;
  border-radius: 50%;
}

@keyframes ripple {
  to {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0;
  }
}

/* ===== CÂU HỎI THƯỜNG GẶP ===== */

.h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: "roboto", sans-serif;
  color: #e5b85a;
  margin: 0;
  text-rendering: optimizeLegibility;
  font-weight: 600;
}
.faq-answer p,
.faq-answer ul li {
  line-height: 1.6;
  margin-bottom: 6px;
}

.faq-answer ul {
  padding-left: 20px;
}

.faq-question span {
  flex: 1;
  line-height: 1.5;
}

.faq-item {
  border-bottom: 1px solid #eee;
  padding: 12px 0;
}

.faq-section-title {
  font-size: 20px;
  font-weight: 600;
  margin: 15px 0;
  padding-left: 5px;
  border-left: 4px solid #003c47;
}
.faq-section {
  padding: 50px 15px;
  background: #f4f7ff;
}

.faq-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  gap: 40px;
}
.faq-list {
  list-style: none;
  padding-left: 0;
}

.faq-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 6px;
}

.faq-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #007aff; /* màu xanh bất động sản */
  font-size: 18px;
}

.faq-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%; /* làm tròn */
  background-color: #003c47; /* màu nền nổi bật, có thể đổi màu bạn thích */
  color: white; /* chữ màu trắng */
  font-size: 20px; /* chữ to hơn */
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease; /* hiệu ứng khi hover */
}

.faq-icon:hover {
  background-color: #0056b3; /* đổi màu khi hover */
  transform: scale(1.1); /* phóng to nhẹ khi hover */
}
/* ===== LEFT ===== */
.faq-left {
  flex: 2;
}

.faq-title {
  font-size: 28px;
  font-weight: 700;
  color: #143b64;
  margin-bottom: 25px;
}

.faq-item {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 15px;
  border: 1px solid #e2e6ea;
  transition: 0.3s ease;
}

.faq-item:hover {
  border-color: #cc9933;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  color: #003c47;
}

.faq-icon {
  font-size: 22px;
  transition: 0.3s;
}

#tiendo .faq-icon {
  box-sizing: border-box;
  display: inline-grid;
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  flex: 0 0 42px;
  padding: 0 !important;
  place-items: center;
  border: 1px solid rgba(0, 80, 90, 0.16);
  border-radius: 50%;
  color: #00505a;
  background: #e7f3f2;
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  appearance: none;
  transform: none;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

#tiendo .faq-item.active .faq-icon,
#tiendo .faq-icon:hover,
#tiendo .faq-icon:focus-visible {
  border-color: #00505a;
  color: #fff;
  background: #00505a;
  transform: none;
}

#tiendo .faq-icon:focus-visible {
  outline: 3px solid rgba(242, 140, 24, 0.28);
  outline-offset: 3px;
}

.faq-answer {
  display: none;
  margin-top: 12px;
  color: #333;
  font-size: 17px;
  line-height: 33px;
  padding: 5px;
}

/* ===== RIGHT (STICKY BOX) ===== */
.faq-right {
  flex: 1;
  position: relative;
}

.faq-sticky-box {
  position: sticky;
  top: 100px;
  background: #ffffff;
  padding: 25px;
  border-radius: 16px;
  border: 1px solid #e6e6e6;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.08);
}

.faq-sticky-box h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #143b64;
}

.faq-sticky-box p {
  margin-bottom: 20px;
  color: #555;
  line-height: 1.5;
}

/* BUTTONS */
.faq-btn {
  display: block;
  text-align: center;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 10px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s ease;
  color: #fff;
}

.faq-btn.call {
  background: #003c47;
}

.faq-btn.call:hover {
  background: #004a94;
}

.faq-btn.zalo {
  background: #0aa1ff;
}

.faq-btn.zalo:hover {
  background: #067dc4;
}

/* ===== Responsive ===== */

@media (max-width: 992px) {
  .faq-container {
    flex-direction: column;
  }
  .faq-right {
    width: 100%;
  }
  .faq-sticky-box {
    position: relative;
    top: 0;
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

@media (max-width: 600px) {
  .faq-title {
    font-size: 24px;
  }
  .faq-question {
    font-size: 16px;
  }
}

/* HÌNH ẢNH DỰ ÁN */

/* Grid */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  padding: 16px;
}

/* Card */
.gallery a {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  /* aspect-ratio: 4/3; */
  background: #ccc;
  text-decoration: none;
}

/* Image */
.gallery img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: 0.4s;
}

.gallery a:hover img {
  transform: scale(1.05);
}

/* Overlay */
.gallery a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
}

.gallery span {
  position: absolute;
  bottom: 12px;
  left: 12px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  z-index: 2;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.lightbox img {
  max-width: 92%;
  max-height: 92%;
  border-radius: 14px;
}

/* Arrows */
.lightbox button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: white;
  font-size: 42px;
  cursor: pointer;
  padding: 20px;
}

.prev {
  left: 10px;
}
.next {
  right: 10px;
}

/* Mobile */
@media (max-width: 600px) {
  .lightbox button {
    font-size: 34px;
  }
}

.tien-ich-du-an {
  max-width: 1100px;
  margin: 50px auto;
  padding: 0 20px;
  font-family: Arial, sans-serif;
}

.tien-ich-du-an h2 {
  font-size: 28px;
  color: #0b5c6b;
  margin-bottom: 10px;
}

.tien-ich-du-an .desc {
  font-size: 18px;
  color: #555;
  margin-bottom: 25px;
}

.tien-ich-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px 40px;
}

.tien-ich-grid li {
  background: #fff;
  padding: 19px 18px;
  border-radius: 10px;
  font-size: 18px;
  color: #333;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: 0.3s;
}

.tien-ich-grid .utility-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #173f46;
}

.tien-ich-grid .utility-item > svg.icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  padding: 9px;
  border: 1px solid rgba(0, 80, 90, 0.12);
  border-radius: 11px;
  color: #00505a;
  background: #e7f3f2;
  stroke: currentColor;
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.tien-ich-grid .utility-item > span {
  color: inherit;
  font-weight: 600;
  line-height: 1.4;
}

.tien-ich-grid li:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.tien-ich-grid li:hover .utility-item > svg.icon {
  color: #fff;
  background: #00505a;
  border-color: #00505a;
}

#tienich .project-utility-copy {
  box-sizing: border-box;
  border: 1px solid rgba(0, 80, 90, 0.1);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 60, 71, 0.06);
}

#tienich .project-utility-copy--detail {
  width: calc(100% - 40px);
  max-width: 1100px;
  margin: 24px auto 40px;
  padding: 28px 32px;
}

#tienich .project-utility-copy--detail > :first-child {
  margin-top: 0;
}

#tienich .project-utility-copy--detail > :last-child {
  margin-bottom: 0;
}

.tien-ich-du-an .note {
  margin-top: 25px;
  font-size: 18px;
  color: #555;
  line-height: 1.6;
}

/* Mobile tự động về 1 cột */
@media (max-width: 767.98px) {
  .tien-ich-grid {
    grid-template-columns: 1fr;
  }

  #tienich .project-utility-copy {
    border-radius: 14px;
  }

  #tienich .project-utility-copy--detail {
    width: calc(100% - 24px);
    margin: 18px auto 28px;
    padding: 20px;
  }
}

/* ===== Migrated from tintuc247.css; preserve legacy cascade order ===== */
.hover-logo {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.hover-logo img {
  width: 75%;
  height: auto;
  transition: 0.4s ease;
  filter: grayscale(100%);
  opacity: 0.8;
}

.hover-logo:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.05);
}
/* LOGO DOI TÁC */

/* TIEU DE ALL CÁC TRANG */
.bds-tieude247 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  font-size: 16px;
  font-weight: 600;
  color: #003c47;
  line-height: 1.45;
  margin-bottom: 6px;
}

.bds-tieude247:hover {
  color: #0ea5a4; /* xanh ngọc nhẹ */
}
@media (max-width: 767.98px) {
  .bds-tieude247 {
    font-size: 15px;
  }
}

.fontchuh1 {
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  color: #0fb9b1;
  margin-bottom: 10px;
  line-height: 30px;
}

.fontchuh2 {
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  color: #003c47;
  margin-bottom: 5px;
  padding-top: 7px;
}

.titlebdsdn {
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  color: #003c47;
  margin-bottom: 10px;
  line-height: 28px;
}
.titlebdsdn a {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}

.titlebdsdn a:hover {
  color: #003c47;
}
.themotabds {
  text-align: center;
  color: #003c47;
  margin-bottom: 25px;
  margin-top: 13px;
  font-size: 17px;
  width: 51%;
  margin: auto;
  margin-bottom: 30px;
}
.tieudemuctt {
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  color: #003c47;
  margin-bottom: 10px;
  margin-top: 45px;
}
.motatintc {
  text-align: center;
  font-size: 15px;
  line-height: 20px;
}

/* TIÊU ĐỀ TIN TỨC */

.news-header {
  background:
    linear-gradient(rgba(0, 60, 71, 0.75), rgba(0, 60, 71, 0.75)),
    url("/project10/src/docs/images/common/project/caurongdanang.jpg") center/cover no-repeat;

  /* background: url(/project10/src/docs/images/common/project/caurongdanang.jpg);	*/
  padding: 70px 20px;
  text-align: center;
  color: #fff;
}

.news-header__inner {
  max-width: 900px;
  margin: auto;
}

.news-header h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 10px;
  color: #e5b85a;
  line-height: 32px;
}

.news-header p {
  font-size: 16px;
  opacity: 0.9;
}

/* Mobile */
@media (max-width: 767.98px) {
  .news-header {
    padding: 45px 15px;
  }
  .news-header h1 {
    font-size: 22px;
  }
  .news-header p {
    font-size: 14px;
  }

  .themotabds {
    text-align: center;
    color: #003c47;
    margin-bottom: 25px;
    margin-top: 13px;
    font-size: 15px;
    width: 86%;
    margin: auto;
    margin-bottom: 30px;
  }

  .fontchuh1 {
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    color: #0fb9b1;
    margin-bottom: 10px;
    line-height: 35px;
  }
}

/* KẾT THÚC TIÊU ĐỀ TIN TỨC */

/* ===============================
CSS MỤC TIN TỨC ĐẦU
================================ */

/* ===============================
   LEFT – NEWS MAIN
================================ */

/* ===============================
   NEWS RELATED – SCROLL SANG
================================ */

.tintemtintd {
  font-size: 14px;
  font-weight: 600;
  color: #003c47;
  line-height: 1.4;
  margin-top: 6px;
}

/* SCROLLBAR ngang – đẹp */
.news-related::-webkit-scrollbar {
  height: 8px;
}

.news-related::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #00c2c7, #003c47);
  border-radius: 8px;
}

.news-related::-webkit-scrollbar-track {
  background: rgba(0, 60, 71, 0.08);
}

.news-sidebar::-webkit-scrollbar-thumb {
  opacity: 0;
}

.news-sidebar:hover::-webkit-scrollbar-thumb {
  opacity: 1;
}
/* ===============================
   MIDDLE – NEWS SIDEBAR
================================ */

/* ITEM */

/* SCROLLBAR dọc */
.news-sidebar::-webkit-scrollbar {
  width: 10px;
}

.news-sidebar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00c2c7, #003c47);
  border-radius: 10px;
}

.news-sidebar::-webkit-scrollbar-track {
  background: rgba(0, 60, 71, 0.08);
}

/* ===============================
   RIGHT – BANNER
================================ */
.banner-quang-cao {
  padding-top: 20px;
  padding-left: 0px;
}

.banner-quang-cao img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

/* ===============================
   RESPONSIVE – TABLET
================================ */
@media (max-width: 1024px) {
  .news-grid {
    grid-template-columns: 1.8fr 1.2fr;
  }
}

/* ===============================
   RESPONSIVE – MOBILE
================================ */

/* TOUCH SCROLL MƯỢT */

/* ===============================
   MOBILE FIX – NEWS SIDEBAR
================================ */

/* Tag tin tức */
.tags {
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
}

/* RESET NHẸ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.area-v2 {
  max-width: 1250px;
  margin: 0 auto;
  padding: 40px 16px;
}

.area-v2__header {
  text-align: center;
  margin-bottom: 32px;
}

.area-v2__title {
  font-size: 28px;
  margin-bottom: 8px;
}

.area-v2__desc {
  color: #666;
}

/* GRID GỐC */
.area-v2__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* CARD */
.area-v2__card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.area-v2__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  transition: transform 0.4s ease;
}

.area-v2__card:hover img {
  transform: scale(1.05);
}

/* OVERLAY */
.area-v2__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
  color: #fff;
}

.area-v2__name {
  font-weight: 600;
  font-size: 16px;
}

.area-v2__count {
  font-size: 13px;
  opacity: 0.85;
}

/* ===== DESKTOP BỐ CỤC HỘI AN Ở GIỮA ===== */
@media (min-width: 1024px) {
  .card-5 {
    grid-column: 1 / span 1;
  }

  .card-hoian {
    grid-column: 2 / span 2;
  }

  .card-6 {
    grid-column: 4 / span 1;
  }
}

/* ===== MOBILE CHUẨN THEO SƠ ĐỒ ===== */
@media (max-width: 767px) {
  .area-v2__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .area-v2__card {
    grid-column: auto;
    order: initial;
  }

  .card-1 {
    order: 1;
  }
  .card-2 {
    order: 2;
  }
  .card-3 {
    order: 3;
  }
  .card-4 {
    order: 4;
  }

  .card-hoian {
    order: 5;
    grid-column: 1 / -1;
  }

  .card-5 {
    order: 6;
  }
  .card-6 {
    order: 7;
  }

  .area-v2__card img {
    aspect-ratio: 600 / 315;
  }
}
/* ===== TIÊU ĐỀ CAO CẤP ===== */
.area-v2__title {
  font-size: 24px;
  font-weight: 800;
  color: #003c47;
}

.area-v2__desc {
  font-size: 17px;
  color: #003c47;
  margin-top: 15px;
}

/* ===== CARD CAO CẤP ===== */
.area-v2__card {
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.area-v2__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.18);
}

/* ===== ẢNH ===== */
.area-v2__card img {
  transition: transform 0.5s ease;
}

.area-v2__card:hover img {
  transform: scale(1.08);
}

/* ===== OVERLAY SANG TRỌNG ===== */
.area-v2__overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.1) 100%);
  padding: 18px;
}

/* ===== TÊN KHU VỰC ===== */
.area-v2__name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

/* ===== SỐ LƯỢNG TIN – BADGE CAO CẤP ===== */
.area-v2__count {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  width: fit-content;
}

/* ===== HỘI AN NỔI BẬT HƠN ===== */
.area-v2__card--featured .area-v2__name {
  font-size: 18px;
  padding-bottom: 5px;
}

.area-v2__card--featured .area-v2__count {
  font-size: 14px;
  padding: 6px 14px;
}

/* ===== MOBILE TINH GỌN ===== */
@media (max-width: 767px) {
  .area-v2__title {
    font-size: 24px;
  }

  .area-v2__name {
    font-size: 15px;
  }

  .area-v2__card--featured .area-v2__name {
    font-size: 18px;
  }
}

/* ===== kết thúc tin tức đầu trang ===== */

/* ===== TIN LIÊN QUAN GIỚI THIỆU  ===== */
.bd-breadcrumb {
  margin: 15px auto 5px;
  padding: 0 15px;
  font-size: 15px;
  color: #6b7280;
}

.bd-breadcrumb a {
  color: #003c47;
  text-decoration: none;
}

.bd-breadcrumb a:hover {
  text-decoration: underline;
}

.bd-breadcrumb span {
  margin: 0 5px;
}

.bd-breadcrumb .current {
  color: #9ca3af;
}

.titlerelate {
  font-size: 18px;
  line-height: 32px;
  font-weight: 600;
}
.related-box {
  margin: 40px auto;
  max-width: 900px;
  padding: 0 10px;
}

.related-titlelq {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #003c47; /* Màu xanh điểm nhấn */
}

.related-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.related-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 16px 18px;
  background: #f5f8f9;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid #e1ecee;
  transition: 0.25s;
}

.related-item:hover {
  background: #e9f6f7;
  border-color: #39c3d6;
  transform: translateY(-2px);
}

.related-item .icon {
  font-size: 26px;
  color: #39c3d6;
  min-width: 32px;
}

.related-item .text h3 {
  font-size: 17px;
  font-weight: 600;
  color: #003c47;
  margin: 0 0 3px;
}

.related-item .text p {
  margin: 0;
  font-size: 14px;
  color: #4f5f60;
}

/* Responsive */
@media (max-width: 480px) {
  .related-item {
    padding: 14px 16px;
  }
  .related-item .icon {
    font-size: 22px;
  }
}

/* ===== TIN LIÊN QUAN GIỚI THIỆU  ===== */

/* ===============================
 MỤC TIN TRANG CHỦ
================================ */
/* WRAPPER & BOX */
.btn-detail {
  display: inline-block;
  padding: 6px 14px;
  background: #0fb9b1;
  color: #fff;
  font-size: 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s ease;
  margin: 20px;
}

.btn-detail:hover {
  background: #0056b3;
  color: #fff;
  transform: translateY(-2px);
}
.utility-wrapper {
  width: 100%;
  padding: 20px;
  margin-top: 20px;
}
.utility-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.utility-box .item {
  background: #fff;
  border-radius: 10px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: 0.25s;
}
.utility-box .item:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.utility-box img {
  width: 30px;
  height: 30px;
}
.utility-box span {
  font-size: 17px;
  font-weight: 600;
  color: #003c47;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .utility-box {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .utility-box {
    grid-template-columns: 1fr;
  }
  .utility-box .item {
    padding: 12px;
  }
  .utility-box span {
    font-size: 15px;
  }
  .item {
    margin-bottom: 2px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e2e2;
  }
}

/* BASIC FIX */
.bg-lighttin {
  background: #f1f5f9 !important;
  border: 3px solid #f6f6f6;
  margin-top: 25px;
}
.tf-container .row {
  margin: 0 !important;
}
.py-4 {
  padding: 4.5rem 0 1.5rem !important;
}
.mb-3 {
  margin-bottom: 2rem !important;
}
hr {
  margin-bottom: 10px;
  border: 1px dashed #ccc;
}

/* TAG */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  margin-bottom: 10px;
}
.tags a {
  padding: 8px 12px;
  background: #0fb9b1;
  border-radius: 20px;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  transition: 0.3s;
  font-weight: bold;
}
.tags a:hover {
  background: #003c47;
  color: #e5b85a;
}

/* TITLE */
.titletin {
  padding: 5px;
  font-size: 18px;
  line-height: 23px;
}
.category-title {
  font-size: 23px;
  font-weight: 900;
  text-align: center;
  line-height: 1.4;
}

/* ARTICLE ITEM DESKTOP */
.article-item {
  background: #f1f6ff;
  padding: 5px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.article-item .article-thumb img {
  width: 100%;
  margin-bottom: 5px;
  display: block;
}
.h3 {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 10px;
}

/* ARTICLE MOBILE – ảnh trái chữ phải */
@media (max-width: 767.98px) {
  .category-title {
    text-align: left;
  }
  .article-item {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .article-item .article-thumb {
    width: 35% !important;
    flex-shrink: 0 !important;
  }
  .article-item .article-thumb img {
    height: 80px !important;
    object-fit: cover !important;
  }
  .article-item .article-content {
    width: 65% !important;
    padding-left: 5px !important;
  }
  .article-item .article-content .title a {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
  .article-item .article-content .date {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }
}

/* RELATED ARTICLES */
.related-articles .related-item {
  display: flex;
  align-items: flex-start;
  background: #fff;
  border-radius: 0px;
  overflow: hidden;
  margin-bottom: 15px;
  padding: 4px;
  transition: 0.3s;
}
.related-articles .related-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  background: linear-gradient(90deg, #f0f8ff, #e6f0ff);
}
.related-blog-item .related-img img {
  width: 100px;
  height: 65px;
  object-fit: cover;
  border-radius: 8px;
}
.related-content {
  flex: 1;
  margin-left: 10px;
}
.related-content .date {
  font-size: 12px;
  color: #888;
}
.related-titleright {
  font-size: 14px;
  font-weight: 600;
  color: #003c47;
  text-decoration: none;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  max-height: calc(1.4em * 2);
}
.related-title:hover {
  color: #007bff;
}
.related-content .excerpt {
  font-size: 13px;
  color: #555;
  line-height: 1.3;
}

/* RELATED MOBILE */
@media (max-width: 576px) {
  .related-img img {
    width: 110px;
    height: 65px;
  }
  .related-title {
    font-size: 15px;
  }
  .related-content .excerpt {
    font-size: 12px;
  }
  .related-content .date {
    font-size: 11px;
    margin-bottom: 0px;
  }
}

/* RIGHT SIDEBAR */
.article {
  background: #fff;
  padding: 10px;
  border-radius: 5px;
}
.article-img {
  width: 100%;
  border-radius: 0px;
}
.article-info .date {
  font-size: 13px;
  color: #333;
  margin: 5px 0;
}
.article-info .title a {
  color: #333;
  font-weight: 600;
  text-decoration: none;
}
.article-info .title a:hover {
  color: #007bff;
}
.article-info .excerpt {
  font-size: 16px;
  color: #333;
  line-height: 24px;
}
.btn-read {
  font-size: 14px;
  color: #007bff;
  font-weight: 600;
  text-decoration: none;
}
.btn-read:hover {
  text-decoration: underline;
}

/* SIDE-SLIDER */
.hoatdong-block {
  width: 100%;
  border-top: 1px solid #eee;
  padding: 25px 0 5px;
  display: flex;
  gap: 13px;
  align-items: flex-start;
  border-bottom: 1px solid #eee;
}
.hoatdong-title {
  min-width: 160px;
  font-size: 18px;
  font-weight: 500;
  color: #003c47;
  line-height: 1.2;
  padding-top: 1px;
}
.hoatdong-title .t1,
.hoatdong-title .t2 {
  color: #003c47;
  font-weight: 700;
  font-size: 19px;
}
.hoatdong-title .t3 {
  font-size: 14px;
  color: #888;
}
.hoatdong-slider-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.hoatdong-slider {
  display: flex;
  gap: 25px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 10px;
}
.hoatdong-slider::-webkit-scrollbar {
  height: 0;
}
.hoatdong-slider .item {
  min-width: 260px;
  display: flex;
  gap: 10px;
  cursor: pointer;
  align-items: flex-start;
}
.hoatdong-slider .item img {
  width: 85px;
  height: 55px;
  object-fit: cover;
  border-radius: 4px;
}
.hoatdong-slider .item p:hover {
  margin: 0;
  font-size: 15px;
  color: #d4a017;
  line-height: 1.3;
}
.hoatdong-slider .item p {
  margin: 0;
  font-size: 15px;
  color: #003c47;
  line-height: 1.3;
  padding-top: 7px;
}
.arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ccc;
  color: #333;
  font-size: 22px;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  transition: 0.25s;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.arrow.prev {
  left: 0;
}
.arrow.next {
  right: 0;
}
.arrow:hover {
  background: #f4f4f4;
  transform: translateY(-50%) scale(1.15);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}
@media (max-width: 767.98px) {
  .hoatdong-block {
    flex-direction: column;
    padding: 0 30px;
  }
  .arrow {
    width: 28px;
    height: 28px;
    font-size: 18px;
    line-height: 26px;
  }
  .hoatdong-title {
    min-width: 160px;
    font-size: 16px;
    font-weight: 500;
    color: #003c47;
    line-height: 1.2;
    padding-top: 16px;
  }
}

.item {
  margin-bottom: 1px;
  padding-bottom: 1px;
  border-bottom: 0px solid #e2e2e2;
}
.item:last-child {
  border-bottom: none;
  width: 92%;
  margin: auto;
}

.desc {
  font-size: 16px;
  color: #333;
  line-height: 24px;
  margin-top: 4px;
  margin-bottom: 15px;
}
.thumb img,
.ads img {
  width: 100%;
  border-radius: 12px;
  display: block;
  margin-bottom: 20px;
}

.tindiemden {
  line-height: 27px;
  font-size: 16px;
  padding: 10px;
  /* border-bottom: 1px solid #f6f6f6; */
  border-top: 1px solid #f6f6f6;
}

/* Featured article */
.featured-article {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.featured-article img {
  width: 60rem;
  height: 30rem;
  object-fit: cover;
  border-radius: 10px;
}

.article-info h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 0.5rem 0;
}

.article-info p {
  font-size: 14px;
  color: #555;
}

.small-articles .article-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.small-articles .article-card:hover {
  transform: translateY(-3px);
}

.small-articles .article-card img {
  width: 30rem;
  height: 15rem;
  object-fit: cover;
}

.small-articles figcaption {
  padding: 10px;
  background-color: #fff;
}

.small-articles .titletin {
  font-size: 15px;
  font-weight: 500;
  margin: 0;
}

.small-articles .titletin a {
  color: #003c47;
  text-decoration: none;
}

.small-articles .titletin a:hover {
  color: #007bff;
}

/* Responsive: Mobile - 1 hình lớn, 2 hình nhỏ ngang */
@media (max-width: 991px) {
  .main-articles {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .small-articles {
    flex-direction: row; /* 2 hình nhỏ nằm ngang */
  }

  .small-articles .article-card {
    flex: 1; /* bằng nhau */
  }
}

/* Desktop - 2 hình nhỏ xếp dọc */
@media (min-width: 992px) {
  .small-articles {
    flex-direction: column;
  }
}

/* ===============================
 kết thúc MỤC TIN TRANG CHỦ
================================ */

/* ===============================
 MỤC TIN TỨC NỔI BẬT KHÁM PHÁ - TIỆN ÍCH
================================ */
.fonttieudetin {
  font-size: 20px;
  font-weight: bold;
  margin-top: 8px;
}
.tintuc-bds-titletv {
  color: #003c47;
  border-bottom: 2px solid #e5b85a;
  padding-bottom: 6px;
  font-size: 18px;
  margin-bottom: 25px;
  font-weight: 600;
}
/* Wrapper */
.tintuc-bds-wrapper {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 0 auto;
  max-width: 1300px;
  padding: 0 15px;
  box-sizing: border-box;
  margin-top: 30px;
}

/* CỘT TRÁI */
.tintuc-bds-left {
  flex: 2 1 0;
  min-width: 300px;
}

/* Tin tức item: Hình 3 phần, text 7 phần */
.tintuc-bds-news-item {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.tintuc-bds-news-img {
  flex: 3 0 30%;
  min-width: 100px;
}
.tintuc-bds-news-img img {
  width: 26rem;
  height: 13rem;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}
.tintuc-bds-news-content {
  flex: 7 0 65%;
}

.tintuc-bds-news-title:hover {
  font-weight: bold;
  margin-bottom: 2px;
  text-decoration: none;
  color: #00c2c7;
  font-size: 16px;
  line-height: 21px;
}
.tintuc-bds-text {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  display: block;
}

/* CỘT PHẢI */
.tintuc-bds-right {
  flex: 1 1 0;
  min-width: 250px;
}

/* Sticky desktop */
@media (min-width: 992px) {
  .tintuc-bds-right {
    position: sticky;
    top: 8rem;
    align-self: flex-start;
  }
}

/* Box tiện ích */
.tintuc-bds-box {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
}
.tintuc-bds-gold-box table {
  width: 100%;
  border-collapse: collapse;
}
.tintuc-bds-gold-box th,
.tintuc-bds-gold-box td {
  border: 1px solid #ccc;
  padding: 5px;
  text-align: center;
}
.tintuc-bds-note {
  font-size: 0.85rem;
  color: #666;
  margin-top: 5px;
}
.tintuc-bds-weather-box {
  text-align: center;
}
.tintuc-bds-temp {
  font-size: 2rem;
  font-weight: bold;
}
.tintuc-bds-weather-info span {
  display: block;
  font-size: 0.9rem;
}
.tintuc-bds-news-title {
  display: block;
  font-weight: bold;
  margin-bottom: 2px;
  text-decoration: none;
  color: #003c47;
  font-size: 16px;
  line-height: 21px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  overflow: hidden;
}

/* RESPONSIVE MOBILE */
@media (max-width: 991px) {
  .tintuc-bds-wrapper {
    flex-direction: column;
  }
  .tintuc-bds-left,
  .tintuc-bds-right {
    width: 100%;
    flex: none;
  }
  .tintuc-bds-news-item {
    flex-direction: row;
  }
  .tintuc-bds-news-img {
    flex: 3 0 30%;
  }
  .tintuc-bds-news-content {
    flex: 7 0 65%;
  }
  .tintuc-bds-right {
    position: relative;
    margin-top: 20px;
  }
  .tintuc-bds-news-title {
    display: block;
    font-weight: bold;
    margin-bottom: 2px;
    text-decoration: none;
    color: #003c47;
    font-size: 16px;
    line-height: 21px;
  }
  .tintuc-bds-text {
    font-size: 14px;
    line-height: 1.3;
    color: #333;
    display: none;
  }
}
/* ===============================
 KẾT THÚC MỤC TIN TỨC NỔI BẬT KHÁM PHÁ - TIỆN ÍCH
================================ */

/* ===============================
CSS ĐIỂM ĐẾN - DU LỊCH
================================ */

h2 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #003c47;
  font-size: 1.5rem;
}

.desc {
  font-size: 15px;
  color: #333;
  line-height: 26px;
}

/* Responsive */

.ads-top {
  background: #f7f7f7;
  padding: 12px 0;
}
.breadcrumb-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #666;
  margin-bottom: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumb-bar a {
  color: #003c47;
}

.breadcrumb-bar strong {
  color: #e5b85a;
  font-weight: 600;
}

.layout {
  display: grid;
  grid-template-columns: 3fr 1.3fr;
  gap: 32px;
  margin-top: 50px;
}
.breadcrumb {
  font-size: 14px;
  color: #777;
  margin-bottom: 14px;
}
.breadcrumb a {
  color: #003c47;
}

/* THUMB */
.article-thumb {
  margin: 18px 0;
  text-align: center;
}
.article-thumb img {
  border-radius: 10px;
  text-align: center;
  margin: auto;
}
.article-thumb figcaption {
  font-size: 13px;
  color: #777;
  margin-top: 6px;
  text-align: center;
}
.related-listct {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.related {
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}
.related-title {
  font-size: 18px;
  color: #0fb9b1;
  margin-bottom: 12px;
}
.related-list {
  list-style: none;
  padding: 0;
}
.related-list li {
  margin-bottom: 10px;
}
.related-list a {
  color: #003c47;
}
.related-list a:hover {
  color: #e5b85a;
  text-decoration: none;
}

/* SIDEBAR */
.sidebar {
  position: sticky;
  top: 20px;
}

.sidebar-title {
  font-size: 16px;
  color: #003c47;
  border-bottom: 2px solid #e5b85a;
  padding-bottom: 6px;
  margin-bottom: 10px;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: relative;
    margin-top: 24px;
  }
}

/* ===== Migrated from customCss.css; preserve legacy cascade order ===== */
.mobile-menu-container {
  width: 100%;
  height: 55px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  overflow: visible;
  box-sizing: border-box;
  background: #fff;
}

/* Nút mở menu */
.mobile-menu-btn {
  font-size: 28px;
  color: #f59118;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  transition: transform 0.2s ease;
}

.mobile-menu-btn:hover {
  transform: scale(1.1);
}

.mobile-header-slot {
  flex: 1;
  min-width: 0;
}

.mobile-user-menu-btn {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(245, 145, 24, 0.25);
  border-radius: 50%;
  background: #fff7ed;
  color: #f59118;
  cursor: pointer;
  padding: 0;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.mobile-user-menu-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(245, 145, 24, 0.18);
}

.mobile-user-menu-btn img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

/* ===== SIDEBAR MENU ===== */
.mobile-menu {
  position: fixed;
  top: 0;
  left: -380px;
  width: 280px;
  height: 100vh; /* fallback cho trình duyệt cũ */
  height: 100dvh; /* viewport thật, tránh hở đáy khi thanh địa chỉ mobile ẩn/hiện */
  background: #fff;
  padding-top: 60px;
  transition: left 0.35s ease;
  z-index: 9999;
  overflow-y: auto;
}

.mobile-menu.open {
  left: 0;
}

.mobile-user-menu {
  position: fixed;
  top: 0;
  right: -310px;
  width: 310px;
  max-width: 86vw;
  height: 100vh;
  height: 100dvh;
  background: #fff;
  padding: 9rem 0 18px;
  transition: right 0.35s ease;
  z-index: 9999;
  overflow-y: auto;
  box-shadow: -12px 0 28px rgba(0, 0, 0, 0.16);
}

.mobile-user-menu.open {
  right: 0;
}

.mobile-user-menu .close-user-menu {
  position: absolute;
  top: 18px;
  left: 16px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f7f7f7;
  border: none;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
  color: #5ca545;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    background 0.2s ease;
}

.mobile-user-menu .close-user-menu:hover {
  transform: rotate(90deg);
  background: #eef8ea;
}

.mobile-user-menu-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mobile-user-menu-profile img,
.mobile-user-menu-guest-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
}

.mobile-user-menu-profile img {
  object-fit: cover;
}

.mobile-user-menu-guest-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f59118;
  background: #fff7ed;
}

.mobile-user-menu-profile strong {
  display: block;
  color: #1f2933;
  font-size: 15px;
  line-height: 1.3;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-user-menu-profile span {
  display: block;
  margin-top: 3px;
  color: #667085;
  font-size: 13px;
  line-height: 1.35;
}

.mobile-user-menu-list {
  padding: 10px 0;
}

.mobile-user-menu .dropdown-item,
.mobile-user-auth-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  padding: 12px 18px;
  color: #20242a;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: normal;
  border: 0;
  background: transparent;
  text-align: left;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    transform 0.25s ease,
    opacity 0.25s ease;
}

.mobile-user-menu .dropdown-item:hover,
.mobile-user-auth-btn:hover {
  color: #f59118;
  background: #fff7ed;
}

.mobile-user-menu .dropdown-item svg,
.mobile-user-auth-btn svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.mobile-user-menu.open .dropdown-item,
.mobile-user-menu.open .mobile-user-auth-btn {
  animation: slideInRight 0.36s ease forwards;
  opacity: 0;
}

.mobile-user-auth-actions {
  padding: 10px 0;
}

.mobile-user-menu hr {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.mobile-user-menu.open .dropdown-item:nth-child(1),
.mobile-user-menu.open .mobile-user-auth-btn:nth-child(1) {
  animation-delay: 0.05s;
}
.mobile-user-menu.open .dropdown-item:nth-child(2),
.mobile-user-menu.open .mobile-user-auth-btn:nth-child(2) {
  animation-delay: 0.1s;
}
.mobile-user-menu.open .dropdown-item:nth-child(3) {
  animation-delay: 0.15s;
}
.mobile-user-menu.open .dropdown-item:nth-child(4) {
  animation-delay: 0.2s;
}
.mobile-user-menu.open .dropdown-item:nth-child(5) {
  animation-delay: 0.25s;
}
.mobile-user-menu.open .dropdown-item:nth-child(6) {
  animation-delay: 0.3s;
}
.mobile-user-menu.open .dropdown-item:nth-child(7) {
  animation-delay: 0.35s;
}
.mobile-user-menu.open .dropdown-item:nth-child(8) {
  animation-delay: 0.4s;
}
.mobile-user-menu.open .dropdown-item:nth-child(9) {
  animation-delay: 0.45s;
}
.mobile-user-menu.open .dropdown-item:nth-child(10) {
  animation-delay: 0.5s;
}
.mobile-user-menu.open .dropdown-item:nth-child(n + 11) {
  animation-delay: 0.55s;
}

/* Nút đóng */
.mobile-menu .close-menu {
  position: absolute;
  top: 20px;
  right: 15px;
  background: none;
  border: none;
  font-size: 30px;
  color: #5ca545;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.mobile-menu .close-menu:hover {
  transform: rotate(90deg);
}

/* DANH SÁCH MENU */
.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu ul li {
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.4s ease;
}

.mobile-menu.open ul li {
  opacity: 1;
  transform: translateX(0);
}

.mobile-menu.open ul li:nth-child(1) {
  transition-delay: 0.1s;
}
.mobile-menu.open ul li:nth-child(2) {
  transition-delay: 0.2s;
}
.mobile-menu.open ul li:nth-child(3) {
  transition-delay: 0.3s;
}
.mobile-menu.open ul li:nth-child(4) {
  transition-delay: 0.4s;
}
.mobile-menu.open ul li:nth-child(5) {
  transition-delay: 0.5s;
}
.mobile-menu.open ul li:nth-child(6) {
  transition-delay: 0.6s;
}
.mobile-menu.open ul li:nth-child(7) {
  transition-delay: 0.7s;
}
.mobile-menu.open ul li:nth-child(8) {
  transition-delay: 0.8s;
}
.mobile-menu.open ul li:nth-child(9) {
  transition-delay: 0.9s;
}

.mobile-menu li:last-child {
  border-bottom: none;
}
.menu-parent {
  display: flex;
  justify-content: space-between;
  padding-right: 1.5rem;
  width: 100%;
}
.mobile-menu a {
  display: block;
  padding: 12px 15px;
  color: #000;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.25s ease;
  width: 100%;
}

.mobile-menu a:hover {
  color: #f59219;
}

/* ===== DROPDOWN MENU ===== */
.menu-item-has-children {
  position: relative;
}

.menu-item-has-children > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Mũi tên */
.menu-item-has-children .arrow {
  font-size: 12px;
  margin-left: 8px;
  transition: transform 0.3s ease;
  display: inline-block;
}

/* Xoay mũi tên khi mở */
.menu-item-has-children.open .arrow {
  transform: rotate(180deg);
}

/* SUBMENU */
.submenu {
  display: none;
  padding-left: 20px;
}

.menu-item-has-children.open .submenu {
  display: block;
}

.submenu a {
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.submenu a:hover {
  color: #f59219;
}

/* Mobile navigation drawer */
.mobile-menu {
  width: min(86vw, 340px);
  padding: 68px 14px 18px;
  background: #fbfdfd;
  box-shadow: 16px 0 42px rgba(0, 45, 54, 0.18);
}

.mobile-menu > ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-menu > ul > li {
  border-radius: 12px;
}

.mobile-menu > ul > li > a,
.mobile-menu .menu-parent > a {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  color: #173a40;
  font-size: 16px;
  line-height: 1.35;
}

.mobile-menu > ul > li > a:hover,
.mobile-menu .menu-parent:hover,
.mobile-menu .menu-item-has-children.open > .menu-parent {
  color: #d87520;
  background: #fff4e8;
}

.mobile-menu .menu-parent {
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding-right: 6px;
  border-radius: 12px;
  transition:
    color 0.2s ease,
    background 0.2s ease;
}

.mobile-menu .submenu-toggle {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: #075462;
  background: transparent;
}

.mobile-menu .submenu-toggle svg {
  width: 21px;
  height: 21px;
  transition: transform 0.25s ease;
}

.mobile-menu .menu-item-has-children.open > .menu-parent .submenu-toggle svg {
  transform: rotate(90deg);
}

.mobile-menu .submenu {
  margin: 4px 8px 8px;
  padding: 7px;
  border: 1px solid #e2ecec;
  border-radius: 12px;
  background: #f3f8f8;
}

.mobile-menu .submenu a {
  padding: 9px 11px;
  border-radius: 8px;
  color: #49666b;
  font-size: 13px;
}

.mobile-menu .submenu a:hover {
  color: #075462;
  background: #fff;
}

.mobile-menu-assist {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px 12px;
  margin-top: 18px;
  padding: 15px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg, #003c47, #075462);
  box-shadow: 0 12px 28px rgba(0, 60, 71, 0.2);
  opacity: 0;
  transform: translateX(-20px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.mobile-menu.open .mobile-menu-assist {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.9s;
}

.mobile-menu-assist__icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #f6a348;
  background: rgba(255, 255, 255, 0.12);
}

.mobile-menu-assist__content span,
.mobile-menu-assist__content strong {
  display: block;
}

.mobile-menu-assist__content span {
  margin-bottom: 3px;
  color: #ffc98e;
  font-size: 12px;
  font-weight: 700;
}

.mobile-menu-assist__content strong {
  font-size: 13px;
  line-height: 1.45;
}

.mobile-menu-assist__actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mobile-menu .mobile-menu-assist__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.mobile-menu .mobile-menu-assist__primary {
  color: #173a40;
  background: #f6a348;
}

.mobile-menu .mobile-menu-assist__secondary {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.08);
}

.mobile-menu-footnote {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 13px 4px 2px;
  color: #6f8589;
  font-size: 11px;
  opacity: 0;
  transform: translateX(-20px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.mobile-menu.open .mobile-menu-footnote {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 1s;
}

.mobile-menu-footnote span::before {
  content: "✓";
  margin-right: 5px;
  color: #d87520;
  font-weight: 800;
}

@media (min-width: 769px) {
  .mobile-menu,
  .mobile-user-menu,
  .mobile-menu-container {
    display: none !important;
  }
}

input:-webkit-autofill {
  background: white !important;
  box-shadow: 0 0 0 1000px white inset !important;
}

.header-search-menu {
  display: flex;
  align-items: center;
  margin-left: 15px;
}

.search-form {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 20px;
  padding: 5px 10px;
  border: 1px solid #ddd;
}

.search-input {
  border: none;
  outline: none;
  width: 180px;
  padding: 5px 10px;
}

.search-btn {
  background: none;
  border: none;
  color: #ff385c;
  font-size: 16px;
  cursor: pointer;
}

.menu-item-has-children {
  position: relative;
}

.menu-item-has-children svg {
  transition: transform 0.3s ease;
}

.menu-item-has-children.open svg {
  transform: rotate(90deg);
}

.menu-item-has-children ul {
  background: #ccc;
  padding: 0.5rem 1rem;
}
.menu-item-has-children ul li {
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}

/* =========================
   HEADER LAYOUT CHÍNH
========================= */

/* =========================
   LOGO
========================= */

/* =========================
   MENU CHÍNH
========================= */

/* =========================
   NÚT ĐĂNG KÝ / ĐĂNG NHẬP + ICON
========================= */

.icon-btn {
  padding: 1rem;
  border-radius: 10px;
  color: #d81b60;
  border: 1px solid rgba(216, 27, 96, 0.1);
  background: rgba(216, 27, 96, 0.05);
  cursor: pointer;
}

/* =========================
   RESPONSIVE
========================= */

.icon-search:before {
  content: "\e954";
}

/* Tabs */

/* Form search */
.form-box {
  display: none;
}

.form-box.active {
  display: flex;
  background: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  align-items: center;
  gap: 12px;
}

.icon-search {
  font-size: 18px;
  opacity: 0.6;
}

.form-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
}

.btn-search {
  background: #0fb9b1;
  color: #fff;
  border: none;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 480px) {
  .search-overlay {
    padding: 18px;
    margin-top: 0px;
  }

  .search-tabs {
    gap: 20px;
  }
}

.btn-search:hover {
  opacity: 0.9;
}
.btn-like {
  width: 58px;
  height: 42px;
  background: #f5f5f5;
  border: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: 0.25s;
}
/* Mobile Responsive */

/* NÚT NEXT – PREV */
.swiper-button-next,
.swiper-button-prev {
  color: #fff;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
}

.intro-title {
  font-size: 24px;
  font-weight: 700;
  color: #003c47;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.intro-desc {
  font-size: 17px;
  line-height: 1.6;
  color: #003c47;
  margin-bottom: 25px;
  opacity: 0.95;
}

/* Button */
.intro-btn {
  display: inline-block;
  padding: 12px 28px;
  background: linear-gradient(45deg, #003c47, #0fb9b1);
  color: #fff;
  font-size: 15px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.intro-btn:hover {
  background: linear-gradient(45deg, #0047c5, #00a7d7);
  transform: translateY(-3px);
}

/* ==== RESPONSIVE ==== */
@media (max-width: 767.98px) {
  .intro-title {
    font-size: 26px;
  }

  .intro-desc {
    font-size: 17px;
  }

  .intro-btn {
    font-size: 17px;
    padding: 10px 24px;
  }
}

@media (max-width: 480px) {
  .intro-title {
    font-size: 27px;
    line-height: 34px;
    margin-top: 69px;
  }

  .intro-desc {
    font-size: 15px;
  }
}

.project-section {
  text-align: center;
  padding: 50px 20px;
  background: #f4f7ff;
}

.project-section .title {
  font-size: 24px;
  font-weight: 700;
  color: #003c47;
}

.project-section .subtitle {
  font-size: 17px;
  color: #003c47;
  margin-bottom: 25px;
}

.filter-btns {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.btn-filter {
  padding: 10px 22px;
  border-radius: 25px;
  border: 1px solid #cfd7e4;
  background: #fff;
  cursor: pointer;
  font-size: 15px;
  transition: 0.25s;
}

.btn-filter.active,
.btn-filter:hover {
  background: #e5b85a;
  color: #003c47;
}

.project-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.project-item {
  background: #fff;
  border-radius: 12px;
  padding: 15px;
  text-align: left;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
}

.project-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.project-item img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
}

.project-item h3 {
  font-size: 18px;
  font-weight: 600;
  color: #0a2a68;
}

.project-section {
  padding: 40px 20px;
  background: #f4f7ff;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

.project-item {
  background: #fff;
  border-radius: 7px 7px 0px 0px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
}

.project-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.project-img {
  position: relative;
}

.project-img img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* TAG */
.tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 20px;
  font-weight: 600;
}

/* Mở bán */
.tag-open {
  background: #e8f7ee;
  color: #2e8b57;
}

/* Sắp mở bán */
.tag-coming {
  background: #fff5d6;
  color: #e5b85a;
}

/* Hot */
.tag-hot {
  background: #e5f0ff;
  color: #0a66c2;
}

.project-content {
  padding: 15px;
}

.project-content h3 {
  font-size: 18px;
  font-weight: 700;
  color: #003c47;
  margin-bottom: 5px;
}

.location {
  font-size: 14px;
  color: rgba(0, 60, 71, 0.75);
  margin-bottom: 5px;
}

.price {
  font-size: 15px;
  color: #e5b85a;
}

.price strong {
  color: #003c47;
}

/* BUTTON */

/* SECTION */
.rent-section {
  padding: 10px 20px;
  background: #f5f8ff;
  text-align: center;
}

.rent-title {
  font-size: 24px;
  font-weight: 800;
  color: #003c47;
}

.rent-subtitle {
  color: #003c47;
  margin-bottom: 25px;
  margin-top: 13px;
}

/* GRID */
.rent-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

/* ITEM */
.rent-item {
  background: #ffffff;
  border-radius: 7px 7px 0px 0px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
}

.rent-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* IMAGE */
.rent-img {
  position: relative;
}

.rent-img img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.rent-location,
.rent-info {
  font-size: 14px;
  color: rgba(0, 60, 71, 0.75);
  margin-bottom: 4px;
}

/* LOAD MORE BUTTON */
.rent-load {
  margin-top: 30px;
  padding: 12px 32px;
  font-size: 17px;
  background: #0fb9b1;
  color: #fff;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: 0.3s;
  font-weight: 600;
  margin-bottom: 30px;
}

.rent-load:hover {
  background: #003c47;
}
.progress-wrap {
  position: fixed;
  bottom: 25px;
  right: 25px;
  height: 60px;
  width: 60px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.35s ease;
  z-index: 9999;
}

.progress-wrap.active {
  opacity: 1;
  visibility: visible;
}

.progress-wrap svg {
  transform: rotate(-90deg);
}

.progress-wrap path {
  stroke: #003c47;
  stroke-width: 5;
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.1s linear;
}

/* Hiệu ứng hover */
.progress-wrap:hover {
  transform: scale(1.08);
  box-shadow: 0 5px 16px rgba(0, 118, 255, 0.35);
}

/* Mobile tối ưu kích thước */
@media (max-width: 600px) {
  .progress-wrap {
    height: 48px;
    width: 48px;
    bottom: 70px;
    right: 20px;
  }
}
.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0, 196, 204, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
  font-size: 18px;
  transition: all 0.3s ease;
}

@media (hover: hover) {
  .footer-social a:hover {
    background: linear-gradient(135deg, #00c2c7, #003c47);
    color: #fff;
    transform: translateY(-3px);
  }
}

.bds-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 26px 10px 0;
  font-size: 14px;
  color: #003c47;
  text-decoration: none;
  border-bottom: 1px dashed #e5e7eb;
  transition:
    color 0.25s ease,
    padding 0.25s ease;
}

/* ICON MŨI TÊN */
.bds-item::after {
  width: 18px;
  height: 18px;
  content: "";
  position: absolute;
  right: 0;
  background-color: #9ca3af;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M15 16l4-4'/%3E%3Cpath d='M15 8l4 4'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M15 16l4-4'/%3E%3Cpath d='M15 8l4 4'/%3E%3C/svg%3E")
    center / contain no-repeat;
  transition:
    transform 0.25s ease,
    background-color 0.25s ease;
}

/* HOVER DESKTOP */
@media (hover: hover) {
  .bds-item:hover {
    color: #00c2c7;
    padding-left: 4px;
  }

  .bds-item:hover::after {
    transform: translateX(6px);
    background-color: #00c2c7;
  }
}

/* MOBILE TAP */
@media (max-width: 767.98px) {
  .bds-item:active {
    background: rgba(0, 194, 199, 0.08);
  }
}

.bds-container {
  max-width: 1300px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.bds-col {
  background: #f9fbfc;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 1;
}

/* HEADER */
.bds-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* TITLE */
.bds-title {
  font-size: 15px;
  font-weight: 700;
  color: #f59e0b;
}

/* TOGGLE BUTTON */
.bds-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #00e6ef, #003c47);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  pointer-events: auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}

/* LIST */
.bds-list {
  margin-top: 12px;
}

/* MOBILE */
@media (max-width: 767.98px) {
  .bds-container {
    grid-template-columns: 1fr;
  }

  .bds-toggle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #00e6ef, #003c47);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    pointer-events: auto;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    display: block;
  }

  .bds-list {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      max-height 0.35s ease,
      opacity 0.25s ease;
  }

  .bds-col.active .bds-list {
    max-height: 600px;
    opacity: 1;
  }

  .bds-col.active .bds-toggle span {
    transform: rotate(45deg);
    display: inline-block;
  }
}

.bds-list a {
  display: block;
  padding: 10px 0;
  font-size: 15px;
  color: #003c47;
  text-decoration: none;
  border-bottom: 1px dashed #e5e7eb;
}
.property-gallery {
  position: relative;
  display: block;
}

.property-gallery.diamond {
  max-width: 900px;
  margin: 0 auto 10px;
}
.property-gallery.gold {
  max-width: 360px;
}
.property-gallery.silver {
  max-width: 240px;
}
.property-gallery.normal {
  max-width: 240px;
}
.property-gallery::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 25%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0) 65%);
  pointer-events: none;
  z-index: 9;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 10px;
}

.gallery-grid.diamond {
  display: flex;
  /* display: grid;
  grid-template-columns: 2fr 0.9fr; */
  gap: 10px;
}
.gallery-grid.gold {
  display: grid;
  grid-template-rows: 2fr 0.9fr;
  gap: 5px;
  width: 360px;
}

.gallery-grid.silver {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 320px;
}
.gallery-grid.normal {
  width: 240px;
}

.gallery-grid.diamond .gallery-left {
  width: 70%;
}

.gallery-grid.diamond .gallery-left img {
  width: 100%;
  height: 30.5rem;
  object-fit: cover;
  border-radius: 10px;
}
.gallery-grid.gold .gallery-top img {
  width: 100%;
  height: 18rem;
  object-fit: cover;
  border-radius: 10px;
}
.gallery-grid.gold .gallery-bot {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.gallery-grid.gold .gallery-bot img {
  width: 100%;
  height: 8rem;
  object-fit: cover;
  border-radius: 10px;
}
.gallery-grid.silver .gallery-top img {
  display: block;
  width: 100%;
  height: 14.5rem;
  object-fit: cover;
  border-radius: 8px;
}
.gallery-grid.silver .gallery-bot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}
.gallery-grid.silver .gallery-bot img {
  display: block;
  width: 100%;
  height: 7rem;
  object-fit: cover;
  border-radius: 6px;
}
.gallery-grid.normal .gallery-top img {
  width: 100%;
  height: 23rem;
  object-fit: cover;
  border-radius: 10px;
}
.gallery-right {
  gap: 8px;
}

.gallery-right img {
  width: 100%;
  height: 15rem;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.25s ease;
  border: 2px solid transparent;
}

.gallery-right img:hover {
  transform: scale(1.01);
}
.gallery-grid.diamond .gallery-right {
  display: flex;
  flex-direction: column;
  width: 30%;
  height: 15.5rem;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.25s ease;
  border: 2px solid transparent;
}
.gallery-grid.diamond .gallery-right img {
  width: 100%;
  height: 14.75rem;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.25s ease;
  border: 2px solid transparent;
}
.gallery-grid.diamond .gallery-right .gallery-right-sub2 {
  display: flex;
  width: 50%;
}
@media (max-width: 767.98px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    width: 488px !important;
  }

  .gallery-right {
    grid-template-columns: repeat(4, 1fr);
  }

  .gallery-right img {
    height: 45px;
    /* Cực gọn cho mobile */
  }

  .gallery-left img {
    height: 220px;
    /* Giảm thêm để mobile nhẹ */
  }
}

.property-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid #eee;
  margin-top: 12px;
}

/* Môi giới */
.agent-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.agent-box img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ddd;
}

.agent-name {
  display: block;
  font-weight: 600;
  font-size: 15px;
  color: #003c47;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.agent-status {
  display: block;
  font-size: 1.5rem;
  color: #777;
  font-weight: 400;
}

/* Nhóm nút */
.action-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Nút gọi */
.btn-call {
  background: #ff4d4f;
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: 0.25s;
}

.btn-call:hover {
  background: #e13e3f;
}

/* Nút tim */

.btn-calldt {
  width: 100%;
  background: #003c47;
  border: 1px solid #003c47;
  color: #fff;
  padding: 8px;
  font-weight: 600;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.btn-calldt:hover {
  background: #d4a017;
  color: white;
}

.search-wrapper-elite {
  justify-content: center;
  margin: 10rem 0 20px 0;
}

.search-box-elite {
  width: 100%;
  max-width: 1040px;
  background: #fff;
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e7e7e7;
}

.search-box-elite i {
  font-size: 20px;
  color: #666;
}

.search-box-elite input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
}

.btn-search {
  background: #003c47;
  color: white;
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.25s;
}

.btn-search:hover {
  background: #FF9900;
}

.btn-map {
  background: #003c47;
  color: white;
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.25s;
}

.btn-map:hover {
  background: #FF9900;
}

/* =============================
   BỘ LỌC CAO CẤP
============================= */

/* .filter-bar-elite {
  margin: 25px 0;
} */

.filter-title .title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #003c47;
}

.filter-title p {
  font-size: 15px;
  color: #666;
}

.filter-chips {
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.u-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e9f4ff, #ffffff);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ff6600;
  font-size: 18px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

.chip {
  padding: 10px 18px;
  border: 3px solid #33333314;
  border-radius: 14px;
  background: #f4f6f9;
  font-size: 15px;
  font-weight: 500;
  color: #003c47;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: 0.25s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.chip:hover {
  background: #e8edf3;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.chip.active {
  background: linear-gradient(135deg, #003c47, #003c47);
  color: white;
}

.chip.toggle {
  position: relative;
  padding-right: 48px;
}

.chip.toggle .switch {
  position: absolute;
  right: 12px;
  width: 26px;
  height: 14px;
  background: #d3d3d3;
  border-radius: 20px;
  transition: 0.25s;
}

.chip.toggle .switch::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  top: -1px;
  left: -1px;
  transition: 0.25s;
}

.chip.toggle.active .switch {
  background: #16a085;
}

.chip.toggle.active .switch::after {
  left: 11px;
}
/* =========================================
   THANH CHIP BỘ LỌC (CUỘN NGANG CÓ KÉO CHUỘT)
========================================= */
@media (min-width: 769px) {
  .filter-chips {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
  }

  .filter-chips-scroll {
    display: flex;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 10px;
  }
}
/* MOBILE */
@media (max-width: 600px) {
  .search-box-elite {
    flex-wrap: wrap;
    padding: 12px;
  }

  .btn-search {
    width: 100%;
  }

  .chip {
    font-size: 14px;
    padding: 8px 14px;
  }

  .filter-title .title {
    font-size: 21px;
  }
}

/* --- RESET & BASE --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  background: #f5f8ff;
  position: relative;
}

/* --- CONTAINER --- */
.box-list-realestate {
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  padding: 15px;
}

/* ===========================
   LAYOUT – LEFT / RIGHT
=========================== */
.layout-container {
  display: flex;
  gap: 25px;
}

.left-content {
  width: 75%;
}

.right-sidebar {
  width: 25%;
  display: block;
}

.sticky-box {
  position: sticky;
  top: 20px;
  padding: 20px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.property-card {
  background: #fff;
  border-radius: 18px;
  /* overflow: hidden; */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  margin-bottom: 35px;
  border: 1px solid #eee;
  position: relative;
}

.property-card.gold .container-gallery,
.property-card.silver .container-gallery,
.property-card.normal .container-gallery {
  display: flex;
  justify-content: space-between;
}

.tag-vip {
  color: #fff;
  padding: 6px 16px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: absolute;
  top: 8px;
  left: -6px;
  z-index: 10;
  border-radius: 8px;
  border-bottom-left-radius: 0;
}

/* Tạo phần tam giác gấp bóng râm 3D bên dưới */
.tag-vip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-top: 6px solid #333; /* Màu tối mặc định */
  border-left: 6px solid transparent;
}

/* Tùy chỉnh màu nếp gấp 3D cho từng loại VIP (Màu tối hơn màu nền) */
.tag-vip.diamond {
  background-color: #432f80;
}
.tag-vip.diamond::before {
  border-top-color: #231647;
}

.tag-vip.gold {
  background-color: #cfc925;
}
.tag-vip.gold::before {
  border-top-color: #8c8710;
}

.tag-vip.silver {
  background-color: #009194;
}
.tag-vip.silver::before {
  border-top-color: #005759;
} /* Tam giác gấp màu xanh tối */

.tag-vip.normal {
  background-color: #444;
}
.tag-vip.normal::before {
  border-top-color: #111;
}

.img-count {
  position: absolute;
  bottom: 0px;
  right: 5px;
  background: rgba(0, 0, 0, 0);
  color: #fff;
  padding: 6px;
  font-size: 13px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
}

.property-body {
  padding: 5px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.property-card.normal .property-body {
  /* width: 72%; */
}

.property-title {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 12px;
}

.property-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  font-size: 15px;
  color: #444;
  margin-bottom: 15px;
}

/* FOOTER */
.property-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.agent-box {
  display: flex;
  gap: 12px;
  align-items: center;
}

.agent-box img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.action-group .btn-call {
  padding: 10px 18px;
  background: #009688;
  color: #fff;
  border-radius: 12px;
}

/* MOBILE */
@media (max-width: 900px) {
  .layout-container {
    flex-direction: column;
  }

  .left-content,
  .right-sidebar {
    width: 100%;
  }
}

/* ----------------- realestate ----------------------*/
:root {
  --accent: #00adef;
  --darkbar: #2b2f34;
  --thumb-w: 100px;
  --thumb-h: 70px;
  --main-height-desktop: 520px;
  --gap: 12px;
  --radius: 10px;
  --text-white: #ffffff;
}

/* MOSAIC LAYOUT */
.rever-mosaic {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--gap);
  align-items: stretch;
  position: relative;
  height: 52rem;
}
.rever-mobile-swiper {
  display: none;
}

.mosaic-left {
  height: var(--main-height-desktop);
  overflow: hidden;
  border-radius: var(--radius);
  background: #f2f2f2;
  position: relative;
  cursor: zoom-in;
}

.mosaic-right {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--gap);
}

.mosaic-right .small {
  overflow: hidden;
  border-radius: var(--radius);
  background: #e9e9e9;
  cursor: zoom-in;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* MAIN IMAGE FADE */
.main-img-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

.main-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.35s ease;
  opacity: 0;
}

.main-img-wrap img.show {
  opacity: 1;
  z-index: 2;
}

/* small right images */
.small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* BOTTOM BAR (THUMBS + TABS) */
.rever-bottombar {
  margin-top: 14px;
  background: var(--darkbar);
  padding: 12px;
  border-radius: 8px;
  color: var(--text-white);
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 40px;
}

/* thumb nav buttons */
.thumb-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  flex: 0 0 auto;
}

.thumb-arrow:hover {
  background: rgba(255, 255, 255, 0.09);
}
.swiper-mosaic-realestate {
  height: 52rem !important;
}
.swiper-slide-wrap#image-wrap-panorama {
  height: 100%;
  min-height: 450px;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper-slide-wrap#box-info-detail-video,
.swiper-slide-wrap#info-detail-location {
  min-height: 450px;
  height: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Swiper thumbs */
.thumbs-swiper {
  width: 100%;
}

.thumbs-swiper .swiper-slide {
  width: var(--thumb-w) !important;
  height: var(--thumb-h);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.02);
}

.thumbs-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rever-thumb-active {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) inset;
  border: 2px solid var(--accent);
}

.rever-tabs {
  margin-left: auto;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-shrink: 0;
}

.rever-tab {
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
}

.rever-tab.active {
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent);
}
.rever-tab.disabled {
  color: #495057;
  cursor: not-allowed;
  pointer-events: none;
}
#count-mosaic {
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 10px;
  background-color: #ccc;
  font-size: 1.5rem;
  font-weight: 600;
  width: 5rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* RESPONSIVE */
@media (max-width: 960px) {
  :root {
    --main-height-desktop: 380px;
    --thumb-w: 86px;
    --thumb-h: 64px;
  }
}

.main-img-wrap,
.mosaic-right {
  overflow: hidden;
}

.mosaic-anim {
  transition:
    transform 0.45s ease,
    opacity 0.45s ease;
}

.slide-out-left {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-in-right {
  transform: translateX(100%);
  opacity: 0;
}

.slide-to-main {
  transform: scale(1.05);
}

.gallery-bar {
  position: relative;
  padding: 0rem 4rem;
  width: 100%;
  max-width: 84rem;
}

.thumb-arrow.prev {
  position: absolute;
  top: 1.5rem;
  left: 1rem;
  z-index: 10;
}

.thumb-arrow.next {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  z-index: 10;
}

/* .swiper-slide-active {
  border: 2px solid #003c47 !important;
  box-shadow:
    0 0 0 2px rgba(0, 60, 71, 0.2),
    0 8px 20px rgba(0, 0, 0, 0.15);
} */

.breadcrumb {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  font-weight: 600;
}
.breadcrumb li:not(:last-child) {
  position: relative;
}
.breadcrumb li a {
  /* color: var(--Primary); */
  color: #003c47;
}
/* .breadcrumb li:not(:last-child)::after {
  content: "\e908";
  position: absolute;
  font-family: "icomoon";
  color: var(--Text);
  font-size: 8px;
  line-height: normal;
  top: 5px;
  margin: 0 12.5px 0 11.5px;
} */
/* ----------------------------------- realestate related ------------------------------------ */
.related-section {
  margin-top: 28px;
}

.related-section h2 {
  font-size: 20px;
  margin-bottom: 18px;
  font-weight: 700;
  color: #333;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.related-item {
  display: block;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #eaeaea;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: 0.3s ease;
}

.related-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* Image */
.related-img img {
  width: 24rem;
  height: 12rem;
  object-fit: cover;
}

/* Info */
.related-info {
  padding-top: 12px;
}

.related-info h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #222;
  line-height: 1.4;
}

.price {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #e60023;
  margin-bottom: 5px;
}

.location {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #555;
}

.location i {
  margin-right: 5px;
  color: #ff5e00;
}

/* MOBILE */
@media (max-width: 767.98px) {
  .related-grid {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 30px;
  }

  .related-img img {
    height: 150px;
  }
}

@media (max-width: 480px) {
  .related-grid {
    grid-template-columns: 1fr;
  }

  .related-img img {
    height: 160px;
  }
}
.post-meta-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 14px 0;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  font-family: "Roboto", sans-serif;
  gap: 3px;
  margin-top: 31px;
  text-align: center;
}

.meta-item {
  display: flex;
  flex-direction: column;
}

.meta-label {
  font-size: 13px;
  color: #777;
  margin-bottom: 4px;
}

.meta-value {
  font-size: 14px;
  font-weight: 600;
  color: #003c47;
}

/* MOBILE RESPONSIVE */
@media (max-width: 767.98px) {
  .post-meta-box {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .post-meta-box {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* HẾT CSS LOẠI TIN ĐĂNG VÀ HẾT HẠN */

/* =============================
  LIÊN HỆ PHẢI CONTAINER
   ============================= */
.agent-card {
  background: #fff;
  padding: 24px;
  width: 37rem;
  border-radius: 20px;
  max-width: 430px;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  font-family: "Roboto", sans-serif;
}

/* =============================
   TOP INFO
   ============================= */
.agent-top {
  display: flex;
  align-items: center;
  gap: 15px;
}

.agent-avatar img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #e5e5e5;
}

.agent-info h3 {
  font-size: 20px;
  margin: 0;
  font-weight: 700;
}

.agent-info .role {
  font-size: 15px;
  color: #d4a017;
  margin-top: 3px;
}

.agent-info .exp,
.agent-info .support {
  font-size: 13px;
  color: #777;
  margin-top: 3px;
}

/* =============================
   ACTION BUTTONS INLINE
   ============================= */
.agent-actions-inline {
  display: flex;
  gap: 14px;
  margin: 20px 0;
}

.btn-circle {
  flex: 1;
  padding: 14px 0;
  border-radius: 14px;
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  transition: 0.3s ease;
}

/* CALL */
.btn-circle.call {
  background: rgba(0, 196, 204, 0.25);
  color: #003c47;
  border-color: #0fb9b1;
}

.btn-circle.call:hover {
  background: #ffdada;
  box-shadow: 0 5px 18px rgba(200, 35, 35, 0.28);
  cursor: pointer;
}

/* ZALO */
.btn-circle.zalo {
  background: #e8f1ff;
  color: #0058cc;
  border-color: #c7dcff;
}

.btn-circle.zalo:hover {
  background: #dce9ff;
  box-shadow: 0 5px 18px rgba(0, 88, 204, 0.28);
}
.btn-circle.zalo img {
  width: 3rem;
}

.contact-card-mobile .agent-card .agent-actions-inline .btn-circle {
  height: 5rem;
}
/* =============================
   LISTING BUTTON
   ============================= */
.btn-listing {
  display: block;
  text-align: center;
  background: #0fb9b1;
  color: #fff;
  padding: 14px;
  font-size: 17px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s ease;
}

.btn-listing:hover {
  background: #e88800;
}

/* =============================
   SOCIAL
   ============================= */
.agent-socials {
  margin: 18px 0;
  display: flex;
  justify-content: center;
  gap: 18px;
}

.agent-socials a {
  font-size: 18px;
  color: #444;
  transition: 0.3s;
}

.agent-socials a:hover {
  color: #000;
}

/* =============================
   RATING
   ============================= */
.agent-rating {
  font-size: 14px;
  color: #777;
  text-align: center;
  margin-top: 3rem;
}

.agent-rating span {
  margin-left: 6px;
}

/* =============================
   RESPONSIVE
   ============================= */
@media (min-width: 768px) {
  .agent-card {
    max-width: 480px;
  }

  .btn-circle {
    font-size: 16px;
  }
}

/*
   HẾT CSS MỤC RIGHT LIÊN HỆ   */

/* Mặc định ẩn, chỉ hiển thị khi admin bật */
.verified-section {
  display: none;
  padding: 12px;
  border: 1px solid #0fb9b1;
  background-color: rgba(0, 196, 204, 0.25);
  border-radius: 8px;
  margin: 15px 0;
  font-family: "Roboto", sans-serif;
  align-items: flex-start;
  gap: 10px;
}

/* Hiển thị khi được xác thực */
.verified-section[data-verified="true"] {
  display: flex;
  flex-direction: row;
}

/* Icon xác thực */
.verified-icon {
  font-size: 28px;
  color: #4caf50;
  flex-shrink: 0;
  margin-top: 3px;
  /* canh giữa text */
}

/* Nội dung */
.verified-content h3 {
  margin: 0 0 5px;
  font-size: 16px;
  color: #333;
}

.verified-content p {
  margin: 0;
  font-size: 14px;
  color: #003c47;
  line-height: 1.5;
}

/* Responsive cho màn hình nhỏ */
@media (max-width: 767.98px) {
  .verified-section[data-verified="true"] {
    flex-direction: column;
    padding: 10px;
  }

  .verified-icon {
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 8px;
  }

  .verified-content h3 {
    font-size: 15px;
  }

  .verified-content p {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .verified-section {
    padding: 8px;
    border-radius: 6px;
  }

  .verified-icon {
    font-size: 20px;
  }

  .verified-content h3 {
    font-size: 14px;
  }

  .verified-content p {
    font-size: 12px;
  }
}

/* Hồ sơ xác thực tin đăng */
.verified-section,
.verified-section[data-verified="true"] {
  display: none;
}

.verified-section[data-verified="true"] {
  display: block;
  margin: 18px 0;
  padding: 18px 22px;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  background: #f6f7f8;
  color: #171a1f;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.verified-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.verified-heading strong {
  font-size: 15px;
  line-height: 1.45;
}

.verified-shield,
.verified-criterion-icon {
  display: block;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}

.verified-shield svg,
.verified-criterion-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #101828;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.verified-shield svg {
  fill: #009b68;
  stroke: #009b68;
}

.verified-shield .verified-check {
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
}

.verified-criteria {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.verified-criteria li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
}

.verified-criterion-icon circle:last-of-type {
  fill: #fff;
  stroke: #00a36c;
}

.verified-criterion-icon .verified-check {
  stroke: #00a36c;
  stroke-width: 1.8;
}

.verified-more {
  margin-top: 15px;
}

.verified-more summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #182230;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.verified-more summary::-webkit-details-marker {
  display: none;
}

.verified-more summary span {
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s ease;
}

.verified-more[open] summary span {
  transform: rotate(90deg);
}

.verified-more p {
  max-width: 760px;
  margin: 10px 0 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 767.98px) {
  .verified-section[data-verified="true"] {
    margin: 14px 0;
    padding: 15px 16px;
  }

  .verified-heading {
    align-items: flex-start;
    margin-bottom: 13px;
  }

  .verified-heading strong,
  .verified-criteria li,
  .verified-more summary {
    font-size: 13px;
  }

  .verified-criteria {
    gap: 10px;
  }
}

/* TIỆN ÍCH XUNG QUANH */
.utilities-section {
  margin-top: 25px;
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
}

.utilities-section h2 {
  font-size: 20px;
  margin-bottom: 15px;
  font-weight: 700;
  color: #333;
}

/* Grid bố cục */
.utilities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* Item */
.utility-item {
  background: #f7faff;
  padding: 8px 12px !important;
  border-radius: 12px;
  transition: 0.3s ease;
  border: 1px solid #e6eef8;
}

.utility-item:hover {
  background: #e8f3ff;
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* Icon */
.utility-item .icon {
  font-size: 28px;
  color: #007bff;
}

.utility-item h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #222;
}

.utility-item p {
  font-size: 14px;
  color: #666;
}

.utility-item span {
  margin-left: 2rem;
}
/* ==============================
   RESPONSIVE – MOBILE
================================ */
@media (max-width: 767.98px) {
  .utilities-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .utility-item {
    padding: 15px;
  }

  .utility-item .icon {
    font-size: 26px;
  }
}

@media (max-width: 480px) {
  .utilities-grid {
    grid-template-columns: 1fr;
  }

  .utility-item {
    padding: 15px 18px;
  }
}

/* ============================= */
/*         VIDEO + MAP           */
/* ============================= */

.bds-media-wrapper-247 {
  display: flex;
  flex-direction: column;
  gap: 35px;
  margin-top: 25px;
}

/* Khung từng box */
.media-box-247 {
  background: #ffffff;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  border: 1px solid #e7e7e7;
  transition: 0.3s ease;
  margin-top: 25px;
}

/* Hover nâng nhẹ */
.media-box-247:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 35px rgba(0, 113, 227, 0.17);
}

/* Tiêu đề + Icon */
.media-title-247 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.media-title-247 i {
  font-size: 24px;
  color: #0071e3;
  background: #e8f2ff;
  padding: 10px;
  border-radius: 50%;
}

.media-title-247 h3 {
  font-size: 20px;
  font-weight: 700;
  color: #222;
}

.titlemap {
  font-size: 19px;
  font-weight: bold;
  line-height: 29px;
}

.titlemaptd {
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  color: #003c47;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* số dòng */
  overflow: hidden;
}

/* Video + Map */
.media-content-247 iframe {
  width: 100%;
  height: 350px;
  border-radius: 16px;
}

/* Mobile */
@media (max-width: 600px) {
  .media-content-247 iframe {
    height: 240px;
  }
}

/* WRAPPER */
.bds247-video-wrapper {
  margin: 25px 0;
}

/* THUMBNAIL */
.bds247-video-thumb {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s ease;
}

.bds247-video-thumb:hover {
  transform: scale(1.02);
}

.bds247-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* NÚT PLAY */
.bds247-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bds247-video-play i {
  font-size: 48px;
  color: #fff;
  padding: 22px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  backdrop-filter: blur(4px);
  transition: 0.25s;
}

.bds247-video-thumb:hover .bds247-video-play i {
  transform: scale(1.15);
}

/* POPUP */
.bds247-video-popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 15px;
}

.bds247-video-content {
  width: 100%;
  position: relative;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
}

.bds247-video-content iframe {
  width: 100%;
  height: 480px;
}

.bds247-close {
  position: absolute;
  top: 8px;
  right: 15px;
  color: #fff;
  font-size: 38px;
  cursor: pointer;
  z-index: 10;
}

.price-section {
  margin-top: 40px;
  margin-bottom: 60px;
}

/* === LEFT === */
.price-card {
  background: #ffffff;
  padding: 25px;
  border-radius: 18px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid #edf2ff;
}

.price-title {
  font-size: 24px;
  font-weight: 700;
  color: #1a237e;
  margin-bottom: 20px;
}

.price-box {
  background: linear-gradient(135deg, #f6f9ff, #edf4ff);
  padding: 18px 20px;
  border-radius: 14px;
  margin-bottom: 20px;
  border: 1px solid #dfe8ff;
}

.price-main {
  display: flex;
  justify-content: space-between;
  font-size: 22px;
  font-weight: 600;
  color: #0d47a1;
}

.price-main .label {
  font-weight: 500;
  color: #3949ab;
}

.price-sub {
  margin-top: 6px;
  font-size: 15px;
  color: #455a64;
}

.price-desc {
  line-height: 1.7;
  color: #37474f;
}

/* === RIGHT === */

/* Sticky Right (mượt) */
.sticky-box {
  position: sticky;
  top: 90px;
}

.contact-card-mobile {
  display: none;
}
.contact-card-mobile .agent-card {
  display: flex;
  gap: 2rem;
  width: 100%;
  padding: 12px 12px 6px 12px;
  border-bottom-left-radius: unset;
  border-bottom-right-radius: unset;
}
.contact-card-mobile .agent-avatar {
  width: 20%;
}
.contact-card-mobile .agent-avatar img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #e5e5e5;
  transform: translateY(-0.5rem);
}
.contact-card-mobile .agent-card .agent-actions-inline {
  display: flex;
  gap: 14px;
  margin: unset;
  width: 80%;
}

/* ===================== */
/*  BỐ CỤC TỔNG QUAN SANG */
/* ===================== */
.property-wrapper {
  width: 100%;
  margin: auto;
  padding: 10px;
  font-family: "Roboto", sans-serif;
}

/* Tiêu đề */
.p-title-realestate {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.45;
  color: #2c2e33;
}

/* Địa chỉ */
.p-address-realestate {
  margin-top: 6px;
  color: #2c2e33;
  font-size: 15px;
}

.p-address-realestate i {
  color: #ff6600;
  margin-right: 6px;
}

/* Icon hành động */
.action-icons {
  margin-top: 15px;
  display: flex;
  gap: 12px;
}

.action-icons button {
  background: #fff;
  border: 1px solid #eee;
  padding: 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.25s;
}

.action-icons button:hover {
  background: #ff6600;
  color: #fff;
  border-color: #ff6600;
}

/* =============================== */
/* KHỐI THÔNG TIN NHANH - SANG HƠN */
/* =============================== */
.quick-info {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.q-box {
  display: flex;
  flex-direction: column;
  /* gap: 12px; */
  background: #fff;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid #eee;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: 0.25s;
  min-width: 90px;
  height: 83px;
}

.q-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(255, 102, 0, 0.2);
  border-color: #ff6600;
}

.q-box i {
  color: #ff6600;
  font-size: 22px;
}

.q-box .label-quick-box {
  color: #777;
  font-size: 13px;
}

.price-box .price-per-m2 {
  margin-top: 3px;
  font-size: 13px;
  color: #ff6600;
  font-weight: 600;
}

.main-price {
  font-size: 18px;
  font-weight: 700;
}

/* ===================== */
/* MÔ TẢ */
/* ===================== */
.p-description {
  margin-top: 15px;
  line-height: 1.75;
  color: #444;
  background: #fff;
  padding: 18px 20px;
  border-radius: 12px;
  border-left: 4px solid #ff6600;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}

/* Xem thêm */
.see-more {
  margin-top: 8px;
  color: #ff6600;
  cursor: pointer;
  font-weight: 600;
}

/* =============================== */
/* TIỆN ÍCH – PHIÊN BẢN SANG TRỌNG */
/* =============================== */
.utilities {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.u-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  padding: 10px 5px;
  border: 1px solid #eef3ff;
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
  transition: 0.25s ease;
}

.u-box:hover {
  transform: translateY(-4px);
  background: #f7faff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* ICON TRÒN SANG */
.u-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e9f4ff, #ffffff);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ff6600;
  font-size: 18px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

/* =============================== */
/* RESPONSIVE MOBILE - TỐI ƯU GỌN */
/* =============================== */

/* LABEL */

/* SECTION BẤT ĐỘNG SẢN NỔI BẬT */
.featured-section {
  margin-bottom: 30px;
}
.featured-section .swiper {
  overflow: hidden;
}

.featured-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.featured-tieude {
  font-size: 20px;
  font-weight: 700;
  color: #003c47;
  margin-bottom: 0;
}

.featured-swiper-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.featured-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #003c47;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.22s ease;
}

.featured-nav-btn:hover:not(.swiper-button-disabled) {
  background: #003c47;
  color: #ffffff;
  border-color: #003c47;
  transform: translateY(-1px);
}

.featured-nav-btn.swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.featuredSwiper {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  padding: 4px 2px 14px;
}

.featuredSwiper:active {
  cursor: grabbing;
}

/* SLIDE ITEM */
.featured-item {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
}

.featured-item a {
  display: block;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.featured-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* Image */
.featured-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  position: relative;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.featured-label {
  position: absolute;
  top: 5px;
  left: 12px;
  background: var(--color-badge-border);
  padding: 5px 12px;
  font-size: 13px;
  color: var(--color-surface);
  border-radius: 6px;
  font-weight: 700;
}
/* Info */
.featured-info {
  padding: 14px 14px 0 14px;
}

.featured-info .titlemaptd {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 8px;
  color: #003c47;
}

.price {
  font-size: 16px;
  font-weight: 700;
  color: #e60023;
  margin-bottom: 6px;
}

.location {
  font-size: 13px;
  color: #555;
}

.location i {
  color: #ff7300;
  margin-right: 5px;
}

/* MOBILE TỐI ƯU */
@media (max-width: 767.98px) {
  .featured-img img {
    height: 170px;
  }
}
.jcsb {
  justify-content: space-between;
}
.action-button-list .list-action {
  display: flex;
  gap: 16px;
  justify-content: space-around;
  flex-wrap: nowrap;
  margin: 0;
  padding: 1rem;
}

.action-button-list .list-action li {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  width: 100%;
}
.action-button-list .list-action li .item-action-detail {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border: 2px solid #ececec;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
}
.action-button-list .list-action li .item-action-detail:hover {
  cursor: pointer;
  background-color: #f1913d;
  color: #fff;
}

.box-option-sharing {
  display: none;
  position: absolute;
  top: 6rem;
  left: -20rem;
  width: 24rem;
  box-shadow: 0 4px 8px 0 rgba(40, 44, 46, 0.122);
  border-radius: 10px;
  background: #fff;
  z-index: 10;
}
.list-option-sharing li {
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
}
.list-option-sharing li .fb-share-button {
  width: 100%;
}
.list-option-sharing li img {
  width: 4rem;
  height: 4rem;
}
.tf-btn-link {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--Primary);
  gap: 8px;
  width: 100%;
  justify-content: center;
  cursor: pointer;
  background: #fff;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  padding-bottom: 1rem;
}
.tf-btn-link span {
  position: relative;
}
.tf-btn-link span::after {
  position: absolute;
  content: "";
  width: 0;
  left: 0;
  bottom: -1px;
  background: #f1913d;
  height: 2px;
  transition: all 0.3s ease;
}
.tf-btn-link svg {
  transition-delay: 0.2s;
}
.description-collapsed {
  max-height: 350px;
  overflow: hidden;
  position: relative;
}
.description-collapsed::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}
.box-description-realestate {
  background-color: #fff;
  padding: 2rem;
  border-radius: 10px;
}
.tf-btn-link.style-hover-rotate:hover svg {
  transform: rotate(-90deg);
}
.tf-btn-link:hover span::after {
  width: 100%;
}
.info-u-box {
  width: 70%;
}
.detail-u-box {
  font-weight: 600;
  color: #003c47;
  font-size: 1.5rem;
}
.detail-u-box#utilities-legal {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
}

.modalNearbyAmenities .modal-body {
  display: flex;
  height: 500px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

#sidebar-utilities {
  width: 380px;
  background: #fff;
  border-right: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

#tabs-utilities {
  display: flex;
  border-bottom: 1px solid #ccc;
}

#tabs-utilities button {
  /* flex: 1; */
  padding: 10px;
  border: none;
  cursor: pointer;
  background: #f5f5f5;
  font-weight: bold;
}

#tabs-utilities button.active {
  background: #007bff;
  color: white;
}

#list-utilities {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

#mapNearbyAmenities {
  flex: 1;
}
#map-utilities {
  flex: 1;
}
.box-utilities-map {
  display: flex;
  position: relative;
}
#mapUtilities {
  width: 100%;
  height: 400px;
}
.box-utilities-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.box-utilities-content .box-utilities-detail {
  /* width: 50%; */
  height: 28rem;
}
.box-utilities-content .box-utilities-detail .detail-title {
  display: flex;
  width: 100%;
  border-bottom: 1px dashed;
  border-bottom-left-radius: 10px;
}

.box-utilities-content .box-utilities-detail .detail-title .detail-title-icon {
  background: #ccc;
  padding: 1rem;
  border-radius: 10px;
  width: 4rem;
  height: 4rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box-utilities-content .box-utilities-detail .detail-title p {
  display: flex;
  align-items: flex-end;
  padding-left: 1rem;
  padding-bottom: 0.5rem;
  font-weight: 600;
}
.item-content-utility {
  display: flex;
  font-size: 1.5rem;
  padding: 1rem 0rem;
  justify-content: space-between;
  cursor: pointer;
  gap: 1rem;
}
.item-content-utility:hover {
  color: #009688;
}
.item-content-utility.read-more {
  font-weight: 600;
  text-decoration: underline;
}
.item-content-utility .name-utility {
  width: 80%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.item-content-utility .distance-utility {
  width: 20%;
  font-weight: 600;
}
.related-info .info-price,
.featured-info .info-price {
  display: flex;
  gap: 1rem;
}
.related-item .related-time,
.featured-item .featured-time {
  display: flex;
  justify-content: space-between;
}
.related-item .related-time p,
.featured-item .featured-time p {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #555;
}
.related-time .item-action-detail,
.featured-time .item-action-detail {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border: 1px solid #ececec;
  border-radius: 10px;
}
.related-time .item-action-detail:hover,
.featured-time .item-action-detail:hover {
  cursor: pointer;
  background-color: #009688;
  color: #fff;
}
.featured-time {
  padding: 10px;
}
/* -------------------------- Button Sharing Realestate -------------------- */
.box-info-detail-video {
  display: none;
}
.item-action-detail.actionShareRealEstate.active {
  background-color: #f1913d;
  color: #fff;
}
.box-share-realestate {
  position: relative;
}
.box-option-sharing {
  display: none;
  position: absolute;
  top: 6rem;
  left: -20rem;
  width: 24rem;
  box-shadow: 0 4px 8px 0 rgba(40, 44, 46, 0.122);
  border-radius: 10px;
  background: #fff;
  z-index: 10;
}
.box-option-sharing:hover {
  color: #1c1f22;
}
.list-option-sharing li {
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
}

.list-option-sharing li .fb-share-button {
  width: 100%;
}
.list-option-sharing li .fb-share-button a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
}
.list-option-sharing li:hover {
  background-color: #ccc;
  cursor: pointer;
  border-radius: 10px;
}
.list-option-sharing li img {
  width: 4rem;
  height: 4rem;
}
.toast-copied {
  position: fixed;
  top: 9rem;
  right: -300px;
  background-color: #198754;
  color: white;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  transition: right 0.5s;
  z-index: 30;
}
.toast-copied.show {
  right: 20px;
}
.close-btn-toast {
  overflow: hidden;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0.5rem;
}
.badge-auth {
  background: #77eb9e;
  padding: 0.5rem 1rem;
  margin-right: 1rem;
  border-radius: 10px;
  font-style: italic;
  font-size: 1.75rem;
  font-weight: 700;
}
.toast-copied .progress {
  color: #ccc;
}
.property-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  max-height: calc(2.4em * 2);
}
.property-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  max-height: calc(1.4em * 2);
}
.property-body.gold .property-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  max-height: calc(1.4em * 3);
}
.calculator-rent-money-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}
.calculator-rent-money .label {
  font-weight: bold;
}
.calculator-rent-money .ui-slider {
  margin: 10px 0 20px 0;
  height: 2rem;
  background: #e5e7eb;
  border-radius: 10px;
  border: none;
  position: relative;
}

.calculator-rent-money .ui-slider .ui-slider-handle {
  background: #007bff;
  border-radius: 50%;
  top: 1rem;
  width: 20px;
  height: 20px;
  background: white;
  border: 3px solid #2563eb;
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}
.calculator-rent-money .ui-slider .ui-slider-handle:hover {
  transform: translate(-50%, -50%) scale(1.15);
}
.calculator-rent-money #pie-chart {
  margin: 0 auto;
}

.calculator-rent-money span {
  font-size: 1.2em;
  margin-left: 10px;
  font-weight: 600;
}
.box-type-pay-rent {
  display: flex;
  justify-content: center;
  padding: 2rem;
}
.box-action-calculator-pay-rent {
  display: flex;
  justify-content: center;
  gap: 2rem;
}
.box-action-calculator-pay-rent button {
  font-size: 1.5rem;
  padding: 1rem;
  font-weight: 600;
  gap: 2rem;
}

@keyframes rotateCircle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.circle-wrapper {
  position: relative;
  width: 328px;
  height: 328px;
}

.node {
  position: absolute;
  animation: rotateCircle 40s linear infinite reverse;
}

.node a {
  display: inline-block;
  font-weight: 600;
}
.circle-wrapper {
  animation: rotateCircle 40s linear infinite;
}

@keyframes rotateCircle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.circle-wrapper:hover {
  animation-play-state: paused;
}

.circle-wrapper:hover .node,
.circle-wrapper:hover figcaption.center {
  animation-play-state: paused;
}
.figure-circle {
  position: relative;
}
#box-type-dashboard-blog {
  overflow: hidden;
}
#box-type-dashboard-blog .swiper-slide {
  width: unset !important;
  height: unset !important;
}
#box-type-dashboard-blog .swiper-slide-active {
  border: unset !important;
  box-shadow: none !important;
}
#box-type-dashboard-blog .swiper-slide .tag-item.active a {
  background: #003c47;
  color: #e5b85a;
}
.titletintc a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  height: 5rem;
  max-height: calc(1.4em * 2);
}

.sub-link {
  display: flex;
  gap: 8px;
  align-items: center;
  text-decoration: none;
}

.sub-thumb {
  width: 12rem;
  height: 7rem;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.sub-info-item {
  height: 8rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sub-title {
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 600;
  color: #003c47;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  max-height: calc(1.4em * 2);
}
.sub-desc {
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 400;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  max-height: calc(1.4em * 2);
}
#footer .footer-bottom {
  justify-content: center;
}

.item-hotted-blog {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  max-height: calc(1.4em * 2);
}

#loading {
  background-color: var(--White);
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1;
  margin-top: 0px;
  top: 0px;
  left: 0px;
  bottom: 0px;
  overflow: hidden;
  right: 0px;
  z-index: 999999;
}
#loading #loading-center {
  width: 100%;
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}
#loading #loading-center .loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
#loading #loading-center .loader-container .wrap-loader {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
#loading #loading-center .loader-container .wrap-loader .icon {
  position: absolute;
  /* max-width: 80px; */
}
#loading #loading-center .loader-container .loader {
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  border-top: 4px solid var(--Primary);
  animation: spin 1s linear infinite;
}
#loading .icon {
  width: 20rem;
  height: 20rem;
}
#loading {
  background-color: #fff;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1;
  margin-top: 0px;
  top: 0px;
  left: 0px;
  bottom: 0px;
  overflow: hidden;
  right: 0px;
  z-index: 999999;
}
#loading #loading-center {
  width: 100%;
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}
#loading #loading-center .loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
#loading #loading-center .loader-container .wrap-loader {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
#loading #loading-center .loader-container .wrap-loader .icon {
  position: absolute;
  /* max-width: 80px; */
}
#loading #loading-center .loader-container .loader {
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  border-top: 4px solid var(--Primary);
  animation: spin 1s linear infinite;
}
#loading .icon {
  width: 20rem;
  height: 20rem;
}

#icon-header-box.active {
  transform: rotate(0deg);
}
.nav-user-dropdown {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-user-dropdown.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
  position: absolute;
  top: 5rem;
  right: 0;
  width: 27rem;
  max-height: calc(100vh - 9rem);
  height: auto;
  overflow-y: auto;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 60, 71, 0.15);
  background: #fff;
  z-index: 999;
}
.nav-user-dropdown .dropdown-item,
.nav-user-dropdown.active .dropdown-item {
  display: flex;
  align-items: center;
  padding: 1.2rem 2rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  transition: background 0.15s ease;
  opacity: 1;
  transform: none;
  animation: none;
}
.nav-user-dropdown .dropdown-item:hover {
  background-color: #f8f9fa;
}
.nav-user-dropdown .dropdown-item svg {
  margin-right: 1.5rem;
  font-size: 1.8rem;
  width: 2.5rem;
  text-align: center;
}
.realestate-info-container {
  display: flex;
  gap: 1%;
  position: relative;
  align-items: flex-start;
}
.realestate-info-container .realestate-info-left {
  width: 66%;
}
.realestate-info-container .realestate-info-right {
  width: 33%;
  position: sticky;
  top: 7rem;
  right: 0;
  z-index: 9;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* fallback */
  height: 100dvh;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;

  z-index: 99;
}
.overlay.active {
  opacity: 1;
  visibility: visible;
}

/* SweetAlert phía client: gọn hơn và luôn nằm trên menu tài khoản mobile. */
body > .swal2-container {
  z-index: 20000 !important;
  padding: 1.6rem !important;
}

body > .swal2-container .swal2-popup {
  width: min(42rem, calc(100vw - 3.2rem)) !important;
  padding: 2.2rem 2rem 2rem !important;
  border: 1px solid rgba(17, 73, 65, 0.1);
  border-radius: 1.8rem !important;
  box-shadow: 0 2.4rem 6rem rgba(12, 36, 32, 0.22) !important;
}

body > .swal2-container .swal2-icon {
  width: 5em !important;
  height: 5em !important;
  margin: 0 auto 1.2rem !important;
  border-width: 0.25em !important;
  font-size: 1.24rem !important;
}

body > .swal2-container .swal2-icon .swal2-icon-content {
  font-size: 3.8rem !important;
}

body > .swal2-container .swal2-title {
  padding: 0 !important;
  color: #17201f !important;
  font-size: 2.25rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

body > .swal2-container .swal2-html-container {
  margin: 1rem 0 0 !important;
  padding: 0 !important;
  color: #66736f !important;
  font-size: 1.5rem !important;
  line-height: 1.55 !important;
}

body > .swal2-container .swal2-actions {
  gap: 1rem;
  margin: 2rem 0 0 !important;
}

body > .swal2-container .swal2-actions button {
  min-width: 11rem;
  min-height: 4.4rem;
  margin: 0 !important;
  padding: 0.9rem 1.7rem !important;
  border: 0;
  border-radius: 1rem !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

body > .swal2-container .swal2-confirm {
  background: #0b6f62 !important;
}

body > .swal2-container .swal2-confirm:hover {
  background: #07584f !important;
}

body > .swal2-container .swal2-cancel {
  color: #44504d !important;
  background: #e9eeec !important;
}

body > .swal2-container .swal2-cancel:hover {
  background: #dce4e1 !important;
}

@media (max-width: 480px) {
  body > .swal2-container {
    padding: 1.2rem !important;
  }

  body > .swal2-container .swal2-popup {
    width: min(36rem, calc(100vw - 2.4rem)) !important;
    padding: 2rem 1.6rem 1.6rem !important;
    border-radius: 1.6rem !important;
  }

  body > .swal2-container .swal2-icon {
    width: 5em !important;
    height: 5em !important;
    margin-bottom: 1rem !important;
    font-size: 1.12rem !important;
  }

  body > .swal2-container .swal2-icon .swal2-icon-content {
    font-size: 3.4rem !important;
  }

  body > .swal2-container .swal2-title {
    font-size: 2rem !important;
  }

  body > .swal2-container .swal2-html-container {
    font-size: 1.4rem !important;
  }

  body > .swal2-container .swal2-actions {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body > .swal2-container .contact-alert-actions {
    display: flex !important;
    justify-content: center;
  }

  body > .swal2-container .swal2-actions button {
    width: 100%;
    min-width: 0;
  }
}

body > .swal2-container .contact-alert-actions:has(.swal2-confirm:only-child) {
  display: flex !important;
  justify-content: center;
}

body > .swal2-container .contact-alert-actions .swal2-confirm:only-child {
  width: min(22rem, 100%);
}
/* Bọc ngoài để làm điểm tựa cho dropdown rớt xuống */
.search-box-wrapper {
  position: relative;
  z-index: 79;
}

/* Khung dropdown */
.search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13);
  z-index: 9999;
  overflow: hidden;
  text-align: left;
  max-height: 65vh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.search-focus-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  width: 100vw;
  height: 100dvh;
  padding: 0;
  border: 0;
  background: rgba(0, 24, 29, 0.58);
  backdrop-filter: blur(0.3rem);
  cursor: default;
}

body.search-suggestions-open .search-focus-overlay {
  display: block;
}

body.search-suggestions-open .search-box-wrapper {
  z-index: 80;
}

body.search-suggestions-open .search-dropdown {
  max-height: min(60dvh, 48rem);
  overflow-y: auto;
}

@media (min-width: 1024px) {
  body.search-suggestions-open .search-focus-overlay {
    display: none;
  }
}

/* Các section bên trong */
.search-section {
  padding: 8px 0;
}

.search-section-label {
  font-size: 11px;
  font-weight: 600;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 6px 16px 4px;
}

/* Từng dòng item */
.search-suggest-item,
.search-static-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: background 0.2s;
}

.search-suggest-item:hover,
.search-static-item:hover {
  background: #f8f9fa;
}

/* Biểu tượng Icon (Màu nền, bo tròn) */
.s-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.s-icon-history {
  background: #fff3f3;
  color: #dc3545;
}
.s-icon-popular {
  background: #fff8e1;
  color: #f59e0b;
}
.s-icon-filter {
  background: #fff3f3;
  color: #dc3545;
}

/* Chữ và nút xóa */
.s-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s-del {
  font-size: 12px;
  color: #ccc;
  padding: 2px 6px;
  cursor: pointer;
}

.s-del:hover {
  color: #dc3545;
}

#btn-open-advance-from-search span {
  font-weight: 500;
}

/* ===== Client overrides (original customClient.css) ===== */
.modalLogin {
  width: 100rem !important;
  height: 66rem;
  top: 10rem;
  left: -25rem;
}

.forget {
  display: block;
  text-align: center;
  color: #003c47;
}

.box-info-login .register,
.box-info-register .login,
.box-info-verify .register {
  display: block;
  text-align: center;
  margin-top: 10px;
  color: #d4a017;
  font-size: 15px;
}
a .node {
  color: #003c47;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: 0.25s ease-in-out;
  position: absolute;
  width: 90px;
  height: 90px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 0 14px rgba(255, 255, 255, 0.7);
  transition: 0.28s ease;
  overflow: hidden;
}
.node:hover {
  transform: scale(1.1);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.25),
    inset 0 0 22px rgba(255, 255, 255, 0.95);
}

a .node:hover {
  color: #0e79e6;
  text-shadow: 0 0 6px rgba(14, 121, 230, 0.4);
}

a .node[style] {
  color: inherit !important;
}
a .node[style]:hover {
  color: #c00 !important;
  text-shadow: 0 0 6px rgba(255, 0, 0, 0.45);
}
/* ======================================
   LAYOUT CHUẨN – KHÔNG BỂ TRÊN MOBILE
====================================== */
.containerdangnhap {
  display: flex;
  width: 100%;
  height: 66rem;
  max-width: 1200px;
  padding: 0 25px 25px 25px;
  gap: 25px;
  background: #003c47;
  position: relative;
  overflow: hidden;
}

.left-area {
  width: 50%;
}

.right-area {
  width: 100%;
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  min-width: 0;
}
.highlight-title {
  font-size: 3rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.35;
  letter-spacing: 0.5px;
  color: #d4a017;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #d9f1ff 70%);
  -webkit-background-clip: text;
  text-shadow: 0 3px 12px rgba(255, 255, 255, 0.3);
  opacity: 0;
  animation: fadeUp 0.7s ease forwards;
  margin-top: 17px;
}

.highlight-sub {
  font-size: 14px;
  text-align: center;
  color: #daf6ff;
  font-weight: 400;
  margin-top: 7px;
  letter-spacing: 0.2px;
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.35);
  opacity: 0;
  animation: fadeUp 0.9s ease forwards;
  margin-bottom: 53px;
  padding: 1px;
}

/* Animation */
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive mobile */
@media (max-width: 480px) {
  .highlight-title {
    font-size: 19px;
    line-height: 1.4;
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.25);
  }

  .highlight-sub {
    font-size: 13px;
    margin-top: 8px;
    line-height: 21px;
  }
}
/* ======================================
   VÒNG TRÒN ECO – RESPONSIVE SCALE
====================================== */
.circle-wrapper {
  position: relative;
  width: 100%;
  max-width: 328px;
  aspect-ratio: 1 / 1;
  margin: auto;
}

.circle-wrapper * {
  overflow: visible !important;
}

/* Node làm mốc định vị */
.circle-wrapper .node {
  position: absolute;
  z-index: 50;
}

.circle-main {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent);
  box-shadow:
    0 0 25px rgba(255, 255, 255, 0.4),
    inset 0 0 20px rgba(255, 255, 255, 0.3);
}

.circle-wrapper .node .tooltip {
  position: absolute;

  /* Luôn nằm trên icon */
  bottom: 100%;
  margin-bottom: 14px;

  left: 50%;
  transform: translateX(-50%);

  width: 260px;
  max-width: 90vw;

  background: #ffffff;
  color: #0fb9b1;
  padding: 14px 18px;
  border-radius: 12px;

  font-size: 14px;
  line-height: 1.5;
  text-align: center;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: all 0.25s ease;
  z-index: 9999;

  /* chống xoay theo vòng tròn */
  transform-origin: center;
}

/* Mũi tên */
.circle-wrapper .node .tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);

  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #ffffff;
}

/* Hover hiển thị tooltip */
.circle-wrapper .node:hover .tooltip {
  opacity: 1;
  visibility: visible;
}

/* ====================== */
/* FIX TRƯỜNG HỢP XOAY */
/* ====================== */

.circle-wrapper .node {
  transform-origin: center;
}

.circle-wrapper .node .tooltip {
  transform: translateX(-50%) rotate(0deg) !important;
}

@media (max-width: 1024px) {
  .circle-wrapper .node .tooltip {
    width: 240px;
    font-size: 13px;
    padding: 12px 16px;
  }
}

@media (max-width: 767.98px) {
  .circle-wrapper .node .tooltip {
    width: 220px;
    font-size: 13px;
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .forms-slider {
    width: 100% !important;
  }
  .containerdangnhap .left-area {
    display: none;
  }
}

@media (max-width: 480px) {
  .circle-wrapper .node .tooltip {
    width: 200px;
    font-size: 12px;
    padding: 10px 12px;
  }
}

.circle-wrapper {
  position: relative;
  overflow: visible !important;
  isolation: isolate; /* tạo layer riêng cho tooltip */
}

.circle-main,
.big-ring {
  z-index: 1;
  pointer-events: none;
}

.circle-wrapper figcaption {
  z-index: 2;
}

.circle-wrapper .node {
  z-index: 10;
}

.circle-wrapper .node .tooltip {
  position: absolute;
  z-index: 99999;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: none;
}

.circle-wrapper .n6 .tooltip,
.circle-wrapper .n7 .tooltip,
.circle-wrapper .n5 .tooltip {
  bottom: auto;
  top: 120%;
  margin-top: 14px;
}

.circle-wrapper .n6 .tooltip::after,
.circle-wrapper .n7 .tooltip::after,
.circle-wrapper .n5 .tooltip::after {
  top: auto;
  bottom: 100%;
  border-top: none;
  border-bottom: 10px solid #fff;
}

.big-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.big-ring::before,
.big-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.big-ring::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0 40%, transparent 41%), repeating-conic-gradient(rgba(255, 255, 255, 0.05) 0deg 2deg, transparent 2deg 8deg);
  opacity: 0.8;
}

.big-ring::after {
  background: radial-gradient(circle, transparent 0 48%, rgba(255, 255, 255, 0.15) 49% 52%, transparent 52%);
  transform: scale(0.86);
}

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background: #fff; */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  z-index: 5;
}

.center img {
  width: 100%;
  height: auto;
  padding-left: 3px;
  padding-top: 4px;
}

/* ======================================
   8 NODE – TỰ SCALE THEO MÀN HÌNH
====================================== */
.node {
  position: absolute;
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  color: #444;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.15),
    inset 0 0 12px rgba(255, 255, 255, 0.7);
  transition: 0.3s;
}

.node:hover {
  transform: scale(1.1);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.25),
    inset 0 0 22px rgba(255, 255, 255, 1);
}

.n1 {
  top: -10%;
  left: 37%;
}
.n2 {
  top: 3%;
  right: 5%;
}
.n3 {
  top: 38%;
  right: -10%;
}
.n4 {
  bottom: 3%;
  right: 4%;
}
.n5 {
  bottom: -10%;
  left: 37%;
}
.n6 {
  bottom: 5%;
  left: 2%;
}
.n7 {
  top: 38%;
  left: -10%;
}
.n8 {
  top: 3%;
  left: 4%;
}

.modern-login,
.modern-register,
.modern-verify,
.modern-forgot {
  background: #fff;
  padding: 32px;
  border-radius: 30px 0px 0px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  max-width: 460px;
  margin: 0 auto;
  color: #222;
}

.modern-login .login-header,
.modern-register .register-header,
.modern-verify .verify-header,
.modern-forgot .forgot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.modern-login .login-header h2,
.modern-register .register-header h2,
.modern-verify .verify-header h2,
.modern-forgot .forgot-header h2 {
  font-size: 25px;
  font-weight: 700;
  color: #003c47;
}
.modern-login .close-btn,
.modern-register .close-btn,
.modern-forgot .close-btn {
  font-size: 20px;
  cursor: pointer;
  color: #8b8b8b;
}

.modern-login .form-label,
.modern-register .form-label,
.modern-verify .form-label,
.modern-forgot .form-label {
  display: block;
  margin: 10px 0 8px;
  font-weight: 600;
  font-size: 16px;
  color: #003c47;
}

.modern-login .input-box,
.modern-register .input-box,
.modern-forgot .input-box {
  position: relative;
  margin-bottom: 16px;
}

.modern-login .input-box input,
.modern-register .input-box input,
.modern-forgot .input-box input {
  width: 100%;
  padding: 12px 44px;
  border-radius: 12px;
  border: 1.8px solid #e3e9ff;
  background: #f6fbff;
  font-size: 14px;
  color: #1f2b3a;
  transition:
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
  outline: none;
  -webkit-appearance: none;
}

.modern-login .input-box input:focus,
.modern-register .input-box input:focus,
.modern-forgot .input-box input:focus {
  border-color: #4a8bff;
  box-shadow: 0 6px 18px rgba(74, 139, 255, 0.18);
  background: #fff;
}

.modern-login .input-box .icon,
.modern-register .input-box .icon,
.modern-forgot .input-box .icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6b7e99;
  pointer-events: none;
  font-size: 18px;
  z-index: 10;
}

.modern-login .input-box .show-pass,
.modern-register .input-box .show-pass {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  color: #6b7e99;
  transition:
    background 0.15s,
    color 0.15s;
  background: transparent;
  border: none;
}
.modern-login .input-box .show-pass:hover,
.modern-register .input-box .show-pass:hover {
  background: rgba(74, 139, 255, 0.06);
  color: #2b5fb3;
}

.modern-login .hint,
.modern-register .hint {
  font-size: 13px;
  color: #8b99b8;
  margin-top: 6px;
}

.modern-login .btn-login,
.modern-register .btn-register,
.modern-verify .btn-verify,
.modern-forgot .btn-forgot {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(90deg, #003c47, #003c47);
  color: #fff;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease;
  font-size: 17px;
  font-weight: 600;
  margin: 3rem 0 1rem 0;
}
.modern-login .btn-login:active,
.modern-register .btn-register:active,
.modern-forgot .btn-forgot:active {
  transform: translateY(1px);
}
.modern-login .btn-login:hover,
.modern-register .btn-register:hover,
.modern-forgot .btn-forgot:hover {
  box-shadow: 0 8px 20px rgba(255, 110, 30, 0.18);
}

.modern-verify .btn-verify:disabled {
  background: #ccc;
  position: none;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .modern-login,
  .modern-register,
  .modern-forgot {
    padding: 20px;
    border-radius: 12px;
  }
  .modern-login .input-box input,
  .modern-forgot .input-box input,
  .modern-register .input-box input {
    padding: 12px 42px;
    font-size: 15px;
  }
  .modern-login .input-box .icon,
  .modern-forgot .input-box .icon,
  .modern-register .input-box .icon {
    left: 10px;
  }
  .modern-login .input-box .show-pass,
  .modern-register .input-box .show-pass {
    right: 8px;
  }
}

.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0 20px;
  font-size: 14px;
}

.toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.toggle input {
  display: none;
}

.toggle .slider {
  width: 42px;
  height: 22px;
  background: #d7ddea;
  border-radius: 20px;
  position: relative;
  transition: all 0.25s ease;
}

.toggle .slider::before {
  content: "";
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: 0.25s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Khi bật toggle */
.toggle input:checked + .slider {
  background: #4a8bff;
}

.toggle input:checked + .slider::before {
  transform: translateX(20px);
}

/* Chữ Lưu đăng nhập */
.toggle .text {
  font-size: 16px;
  color: #003c47;
}

/* ----------- Quên mật khẩu ----------- */
.forget {
  font-size: 16px;
  color: #003c47;
  text-decoration: none;
  font-weight: 600;
  transition: 0.2s ease;
}

.forget:hover {
  color: #2e6ef0;
}

/* ----------- Nút Đăng Nhập ----------- */
.btn-login {
  width: 100%;
  padding: 13px 16px;
  margin-top: 8px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(90deg, #ff8a00, #ff6f00);
  color: white;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(255, 110, 20, 0.25);
  transition: 0.25s ease;
}

.btn-login:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255, 110, 20, 0.35);
}

.btn-login:active {
  transform: scale(0.97);
}

/* ----------- Đăng ký ----------- */
.register-text {
  text-align: center;
  margin-top: 16px;
  font-size: 16px;
  color: #5f6b7d;
}

.register-link {
  color: #ff6f00;
  font-weight: 700;
  text-decoration: none;
}

.register-link:hover {
  text-decoration: underline;
}

/* ===========================
   🔥 MOBILE FIX 320px – 480px
   =========================== */
@media (max-width: 480px) {
  .containerdangnhap {
    display: block;
    width: 100%;
    max-width: 1200px;
    padding: 0 25px 25px 25px;
    gap: 25px;
    margin: auto;
    background: #003c47;
    margin-top: 80px;
  }
  .modern-login,
  .modern-forgot,
  .modern-register {
    padding: 18px 20px;
    border-radius: 14px;
    width: 100%;
    max-width: 100%;
  }

  .modern-login .login-header,
  .modern-forgot .forgot-header,
  .modern-register .register-header,
  .modern-register .verify-header {
    margin-bottom: 14px;
  }

  .modern-login .login-header h2,
  .modern-forgot .forgot-header h2,
  .modern-register .register-header h2,
  .modern-register .verify-header h2 {
    font-size: 19px;
  }

  .modern-login .close-btn,
  .modern-forgot .close-btn,
  .modern-register .close-btn {
    font-size: 18px;
  }

  .modern-login .form-label,
  .modern-forgot .form-label,
  .modern-register .form-label {
    font-size: 13px;
    margin-bottom: 6px;
  }

  .modern-login .input-box input,
  .modern-forgot .input-box input,
  .modern-register .input-box input {
    padding: 12px 38px;
    font-size: 14.5px;
    border-radius: 10px;
  }

  .modern-login .input-box .icon,
  .modern-forgot .input-box .icon,
  .modern-register .input-box .icon {
    left: 7px;
    font-size: 17px;
    width: 18px;
    height: 18px;
  }

  .modern-login .input-box .show-pass,
  .modern-register .input-box .show-pass {
    right: 8px;
    width: 28px;
    height: 28px;
    font-size: 16px;
  }

  .login-options {
    margin: 10px 0 18px;
    font-size: 13.5px;
    gap: 10px;
  }

  .toggle .slider {
    width: 38px;
    height: 20px;
  }

  .toggle .slider::before {
    width: 16px;
    height: 16px;
  }

  .toggle input:checked + .slider::before {
    transform: translateX(18px);
  }

  .toggle .text {
    font-size: 13.5px;
  }

  /* Quên mật khẩu */
  .forget {
    font-size: 13.5px !important;
  }

  /* Nút đăng nhập */
  .btn-login {
    font-size: 15px;
    padding: 12px 16px;
    border-radius: 10px;
    margin-top: 4px;
  }

  /* Đăng ký */
  .register-text {
    font-size: 13.5px;
    margin-top: 14px;
  }

  .register-link {
    font-size: 13.5px;
  }
}

/* ===============================
   📱 MOBILE MÀN NHỎ HƠN 360px 
   =============================== */
@media (max-width: 360px) {
  .containerdangnhap {
    display: block;
    width: 100%;
    max-width: 1200px;
    padding: 0 25px 25px 25px;
    gap: 25px;
    margin: auto;
    background: #003c47;
  }
  .modern-login {
    padding: 16px;
  }

  .modern-login .input-box input {
    padding: 11px 36px;
    font-size: 14px;
  }

  .modern-login .input-box .icon {
    left: 8px;
  }

  .modern-login .input-box .show-pass {
    right: 6px;
  }

  .btn-login {
    font-size: 14px;
    padding: 11px 14px;
  }
}

/* ======================================
   RESPONSIVE MOBILE
====================================== */
@media (max-width: 991px) {
  .containerdangnhap {
    display: block;
    width: 100%;
    max-width: 1200px;
    padding: 0 25px 25px 25px;
    gap: 25px;
    margin: auto;
    background: #003c47;
  }
  .container {
    flex-direction: column;
    padding: 18px;
  }

  .right-area {
    order: 1;
  }
  .left-area {
    order: 2;
    text-align: center;
  }

  .circle-wrapper {
    max-width: 300px;
  }

  .node {
    width: 26%;
    height: 26%;
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .containerdangnhap {
    display: block;
    width: 100%;
    max-width: 1200px;
    padding: 0 5px 5px 5px;
    gap: 25px;
    margin: auto;
    background: #003c47;
  }
  .right-area {
    padding: 25px;
  }

  .circle-wrapper {
    max-width: 260px;
  }
}

.containerdangnhap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

@media (max-width: 767.98px) {
  .containerdangnhap {
    flex-direction: column;
  }

  .right-area {
    order: 1;
    width: 100%;
  }
  .left-area {
    order: 2;
    width: 100%;
    margin-top: 30px;
  }
}

@media (max-width: 767.98px) {
  .right-area {
    order: 1;
    animation: fadeUp 0.4s ease-out;
  }

  .left-area {
    order: 2;
    animation: fadeUp 0.6s ease-out;
    opacity: 0.95;
  }

  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.title-form-login,
.title-form-register {
  font-size: 3rem;
  font-weight: 600;
  margin-bottom: 2rem;
  width: 100%;
  text-align: center;
}
.error-notify {
  display: none;
  margin-top: 1rem;
  padding-left: 2rem;
  font-weight: 600;
  color: #c20000;
}
.jcc {
  justify-content: center;
}

.forms-slider {
  position: relative;
  overflow: hidden;
  width: 50%;
  height: 100%;
}
.modern-layout {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  box-sizing: border-box;
}

@media (min-width: 769px) {
  .modalLogin .circle-wrapper > a.node {
    border: 1px solid rgba(255, 255, 255, 0.72);
    color: #004a53;
    background: linear-gradient(145deg, #ffffff 0%, #eefaf8 100%);
    box-shadow:
      0 10px 24px rgba(0, 31, 38, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
      transform 0.22s ease,
      color 0.22s ease,
      background 0.22s ease,
      box-shadow 0.22s ease;
  }

  .modalLogin .circle-wrapper > a.node:hover {
    color: #ffffff;
    background: linear-gradient(145deg, #008f83, #006b63);
    box-shadow:
      0 14px 30px rgba(0, 50, 55, 0.32),
      0 0 0 4px rgba(241, 145, 61, 0.18);
  }

  .modalLogin .circle-wrapper > a.node:focus-visible {
    color: #003c47;
    outline: 3px solid #f1913d;
    outline-offset: 4px;
  }
}

.forms-slider .modern-login {
  left: 0;
  opacity: 1;
  visibility: visible;
}
.forms-slider .modern-register {
  left: 100%;
  opacity: 0;
  visibility: hidden;
}
.forms-slider .modern-verify {
  left: 200%;
  opacity: 0;
  visibility: hidden;
}
.forms-slider .modern-forgot {
  left: -100%;
  opacity: 0;
  visibility: hidden;
}

.forms-slider.slide-to-register .modern-login {
  left: -100%;
  opacity: 0;
  visibility: hidden;
}
.forms-slider.slide-to-register .modern-register {
  left: 0;
  opacity: 1;
  visibility: visible;
}
.forms-slider.slide-to-register .modern-verify {
  left: 100;
  opacity: 1;
  visibility: visible;
}
.forms-slider.slide-to-register .modern-forgot {
  left: -200%;
  opacity: 0;
  visibility: hidden;
}

.forms-slider.slide-to-forgot .modern-login {
  left: 100%;
  opacity: 0;
  visibility: hidden;
}
.forms-slider.slide-to-forgot .modern-forgot {
  left: 0;
  opacity: 1;
  visibility: visible;
}
.forms-slider.slide-to-forgot .modern-register {
  left: 200%;
  opacity: 0;
  visibility: hidden;
}
.forms-slider.slide-to-forgot .modern-verify {
  left: 300%;
  opacity: 0;
  visibility: hidden;
}

.forms-slider.slide-to-verify .modern-login {
  left: -200%;
  opacity: 0;
  visibility: hidden;
}
.forms-slider.slide-to-verify .modern-forgot {
  left: -300;
  opacity: 0;
  visibility: visible;
}
.forms-slider.slide-to-verify .modern-register {
  left: -100%;
  opacity: 0;
  visibility: hidden;
}
.forms-slider.slide-to-verify .modern-verify {
  left: 0%;
  opacity: 1;
  visibility: visible;
}

.switch-to-register,
.switch-to-login,
.switch-to-forgot {
  color: #003c47;
  font-size: 1.5rem;
  font-weight: 600;
  margin-left: 1rem;
}
.switch-to-register:hover,
.switch-to-login:hover,
.switch-to-forgot:hover {
  cursor: pointer;
  text-decoration: underline;
}
.switch-back-to-login,
.switch-back-to-register {
  font-size: 2rem;
  cursor: pointer;
}
.sidebar-content-type {
  font-size: 1.5rem !important;
}
@keyframes shake-label {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-5px);
  }
  80% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}

.shake-label {
  animation: shake-label 0.4s;
  color: #c20000 !important;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-5px);
  }
  80% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}

.shake {
  border: 2px solid #c20000 !important;
  animation: shake 0.4s;
}

.forms-slider .error-notify {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3;
}
.fxt-switcher-description1 {
  color: #363636;
  font-size: 1.5rem;
  max-width: 480px;
  width: 100%;
  margin-bottom: 2rem;
}
.fxt-switcher-description1 .fxt-switcher-text {
  display: inline-block;
  color: #4460f1;
  font-size: 18px;
  font-weight: 600;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.fxt-switcher-description1 .fxt-switcher-text:hover {
  color: #0925ad;
  text-decoration: underline;
}
.otp-card-inputs {
  margin: 5rem 0;
  display: grid;
  gap: 10px;
  justify-content: center;
  grid-template-columns: repeat(6, auto);
}
.otp-card-inputs input {
  padding: 0.5px;
  width: 60px;
  height: 70px;
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  border-radius: 20px;
  border: 3px solid #fdefe2 !important;
}
.otp-card-inputs input:focus {
  outline: 3px solid #003c47;
  border-color: transparent;
}
.fxt-switcher-description3 {
  text-align: center;
  font-size: 16px;
  color: #646464;
  margin-top: 3rem;
  margin-bottom: 10px;
}
.fxt-switcher-description3 .fxt-switcher-text {
  color: #4460f1;
  font-size: 16px;
  font-weight: 500;
  display: inline-block;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.fxt-switcher-description3 .fxt-switcher-text:hover {
  color: #0f2ab2;
  text-decoration: underline;
}
.titleOTP {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 2rem;
}

/* New-device authentication */
#modalDevice.device-auth-modal .modal-dialog,
#modalTrustDevice.device-auth-modal .modal-dialog {
  width: min(840px, calc(100vw - 32px));
  max-width: none;
}
#modalDevice.device-auth-modal,
#modalTrustDevice.device-auth-modal {
  z-index: 99999 !important;
}

.device-auth-modal .modal-content {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(14, 52, 48, 0.28);
}

.device-auth-modal__visual {
  position: relative;
  isolation: isolate;
  display: flex;
  width: 310px;
  min-height: 420px;
  flex: 0 0 310px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 36px 28px;
  color: #fff;
  text-align: center;
  background: linear-gradient(145deg, #063e46, #0d776d);
}
.device-auth-modal__visual > :not(.device-auth-modal__orb) {
  position: relative;
  z-index: 1;
}
.device-auth-modal__shield {
  display: grid;
  width: 94px;
  height: 94px;
  place-items: center;
  margin-bottom: 24px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.14);
}
.device-auth-modal__shield svg {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.device-auth-modal__visual p {
  margin: 0 0 8px;
  font-size: 23px;
  font-weight: 700;
}
.device-auth-modal__visual small {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}
.device-auth-modal__orb {
  position: absolute;
  z-index: 0;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}
.device-auth-modal__orb--one {
  top: -78px;
  left: -80px;
}
.device-auth-modal__orb--two {
  right: -110px;
  bottom: -80px;
  width: 260px;
  height: 260px;
}

.device-auth-modal__body {
  position: relative;
  width: 100%;
  padding: 48px 50px 34px;
}
.device-auth-modal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  color: #08796b;
  font-size: 13px;
  font-weight: 700;
}
.device-auth-modal__eyebrow svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.device-auth-modal__body h2 {
  margin: 0 38px 12px 0;
  color: #1d3432;
  font-size: 27px;
  font-weight: 750;
  line-height: 1.25;
}
.device-auth-modal__description {
  min-height: 48px;
  margin: 0 0 24px;
  color: #60716e;
  font-size: 15px;
  line-height: 1.55;
}
.device-auth-modal__label {
  display: block;
  margin-bottom: 10px;
  color: #304542;
  font-size: 14px;
  font-weight: 700;
}
.device-auth-modal__close {
  position: absolute;
  top: 22px;
  right: 22px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #54706b;
  background: #edf4f2;
  cursor: pointer;
}
.device-auth-modal__close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.device-auth-modal__otp {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin: 0 0 22px;
}
.device-auth-modal__otp input {
  width: 100%;
  height: 58px;
  border: 1px solid #cfe1dd !important;
  border-radius: 12px;
  color: #08796b;
  background: #fbfefd;
  font-size: 25px;
  font-weight: 700;
  text-align: center;
  outline: 0;
  transition: 0.18s ease;
}
.device-auth-modal__otp input:focus {
  border-color: #08796b !important;
  box-shadow: 0 0 0 3px rgba(8, 121, 107, 0.13);
}
.device-auth-modal__submit {
  display: flex;
  width: 100%;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: #08796b;
  box-shadow: 0 8px 18px rgba(8, 121, 107, 0.2);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.18s ease;
}
.device-auth-modal__submit:hover:not(:disabled) {
  background: #06675c;
  transform: translateY(-1px);
}
.device-auth-modal__submit:disabled {
  opacity: 0.52;
  cursor: not-allowed;
  box-shadow: none;
}
.device-auth-modal__resend {
  margin: 20px 0 0;
  color: #71817e;
  font-size: 14px;
  text-align: center;
}
.device-auth-modal__resend button {
  border: 0;
  padding: 0;
  color: #08796b;
  background: transparent;
  font-weight: 700;
  cursor: pointer;
}
.device-auth-modal__body--trust {
  padding: 44px 36px 34px;
  text-align: center;
}
.device-auth-modal__body--trust h2 {
  margin-right: 0;
}
.device-auth-modal__trust-icon {
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  margin: 0 auto 16px;
  border-radius: 20px;
  color: #08796b;
  background: #e7f7f3;
}
.device-auth-modal__trust-icon svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.device-auth-modal__body--trust .device-auth-modal__description {
  min-height: auto;
}
.device-auth-modal__actions {
  display: flex;
  gap: 12px;
}
.device-auth-modal__actions > * {
  width: 50%;
}
.device-auth-modal__secondary {
  min-height: 50px;
  border: 1px solid #b8d5cf;
  border-radius: 10px;
  color: #08796b;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 700px) {
  .device-auth-modal .modal-content {
    display: block;
  }
  .device-auth-modal__visual {
    display: none;
  }
  .device-auth-modal__body {
    padding: 38px 22px 26px;
  }
  .device-auth-modal__body h2 {
    font-size: 23px;
  }
  .device-auth-modal__otp {
    gap: 7px;
  }
  .device-auth-modal__otp input {
    height: 51px;
    font-size: 22px;
  }
}

#modalDevice .modal-dialog,
#modalTrustDevice .modal-dialog {
  width: min(880px, calc(100vw - 32px));
  max-width: none;
  margin: 24px auto;
}

#modalDevice .modal-content,
#modalTrustDevice .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(18, 45, 39, 0.22);
}

#modalDevice .flat-account,
#modalTrustDevice .flat-account {
  display: flex;
  min-width: 0;
}

#modalDevice .banner-account,
#modalTrustDevice .banner-account {
  width: 340px;
  flex: 0 0 340px;
  background: #eef8f5;
}

#modalDevice .banner-account img,
#modalTrustDevice .banner-account img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#modalDevice .form-account,
#modalTrustDevice .form-account {
  min-width: 0;
  flex: 1 1 auto;
  padding: 36px;
}

#modalDevice .title-box,
#modalTrustDevice .title-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

#modalDevice .title-box p,
#modalTrustDevice .title-box p {
  margin: 0;
  color: #20312d;
  font-size: 24px;
  font-weight: 700;
}

#modalDevice .close-modal,
#modalTrustDevice .close-modal {
  cursor: pointer;
}

#modalDevice .otp-card-inputs {
  grid-template-columns: repeat(6, minmax(0, 54px));
  gap: 8px;
  margin: 28px 0;
}

#modalDevice .otp-card-inputs input {
  width: 100%;
  height: 60px;
  border-radius: 12px;
  font-size: 25px;
}

#resend-device-otp {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* Keep legacy modal-account rules from overriding the dedicated device UI. */
#modalDevice.device-auth-modal .otp-card-inputs {
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin: 0 0 22px;
}
#modalDevice.device-auth-modal .otp-card-inputs input {
  width: 100%;
  height: 58px;
  border: 1px solid #cfe1dd !important;
  border-radius: 12px;
  color: #08796b;
  font-size: 25px;
  font-weight: 700;
}
#modalDevice.device-auth-modal .modal-content,
#modalTrustDevice.device-auth-modal .modal-content {
  display: flex;
  flex-direction: row;
}
#modalDevice.device-auth-modal .modal-dialog,
#modalTrustDevice.device-auth-modal .modal-dialog {
  margin: 24px auto;
}

@media (max-width: 767px) {
  #modalDevice .modal-dialog,
  #modalTrustDevice .modal-dialog {
    width: calc(100vw - 24px);
    margin: 12px auto;
  }

  #modalDevice .banner-account,
  #modalTrustDevice .banner-account {
    display: none;
  }

  #modalDevice .form-account,
  #modalTrustDevice .form-account {
    padding: 24px 18px;
  }

  #modalDevice .otp-card-inputs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
  }

  #modalDevice .otp-card-inputs input {
    height: 52px;
    border-width: 2px !important;
    font-size: 22px;
  }

  #modalDevice.device-auth-modal .modal-content,
  #modalTrustDevice.device-auth-modal .modal-content {
    display: block;
  }
  #modalDevice.device-auth-modal .otp-card-inputs {
    gap: 7px;
  }
  #modalDevice.device-auth-modal .otp-card-inputs input {
    height: 51px;
    font-size: 22px;
  }
}

.box-input-otp {
  margin-top: 5rem;
}
.title-header-layout {
  text-align: center;
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 10px;
  line-height: 30px;
}
.form-label-forgot {
  margin-top: 5rem !important;
}
.modalLogin .modal-header {
  background: #003c47 !important;
  border-bottom: none;
}
.modal-header .close {
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent;
  border: none;
  overflow: hidden;
}

.modal-header .close:focus {
  outline: none;
  box-shadow: none;
}

.modal-header .close i {
  pointer-events: none;
  display: inline-block;
  color: #fff;
  font-size: 3.5rem;
  transition: transform 1s ease;
  margin-right: 1rem;
}

.modal-header .close:hover i {
  transform: rotate(360deg);
}

:root {
  --amenity-ink: #111827;
  --amenity-ink-soft: #6b7280;
  --amenity-line: #e5e7eb;
  --amenity-surface-soft: #f9fafb;
  --amenity-brand: #c8912f;

  --cat-school: #4f46e5;
  --cat-school-soft: #eef0fd;
  --cat-hospital: #e11d48;
  --cat-hospital-soft: #fdeef1;
  --cat-restaurant: #ea8c00;
  --cat-restaurant-soft: #fff4e0;
  --cat-supermarket: #0e9f6e;
  --cat-supermarket-soft: #e7f8f1;
}

/* ===== Modal shell ===== */
#modalNearbyAmenities .modal-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100% - 40px);
  max-width: calc(100% - 40px);
  margin: 20px auto;
}

#modalNearbyAmenities.show {
  /* This project raises Bootstrap backdrops for authentication modals. */
  z-index: 12050;
}

.modalNearbyAmenities {
  width: 90vw !important;
  height: 90vh !important;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  background: #fff;
}

.modal-content .modal-header {
  background: #111827;
  border-bottom: none;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-content .modal-header .header-icon-chip {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(200, 145, 47, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content .modal-header .header-icon-chip svg {
  width: 20px;
  height: 20px;
  color: var(--amenity-brand);
}

.modal-content .modal-header .header-text {
  flex-grow: 1;
  min-width: 0;
}

.modal-content .modal-header .modal-title {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.modal-content .modal-header .header-subtitle {
  font-size: 13px;
  color: #9ca3af;
  margin-top: 2px;
}

.modal-content .modal-header button.close {
  margin: 0;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: #9ca3af;
  transition: all 0.15s ease;
  margin-top: 1.5rem;
  margin-right: 1rem;
}

.modal-content .modal-header button.close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.modalNearbyAmenities .modal-body {
  display: flex;
  height: 600px;
  max-height: 80vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* ===== Sidebar ===== */
#sidebar-utilities {
  width: 400px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid var(--amenity-line);
  display: flex;
  flex-direction: column;
}

/* ===== Tabs: Hàng ngang Expandable Pill (Desktop & Mobile) ===== */
#tabs-utilities {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--amenity-line);
  background: var(--amenity-surface-soft);
  overflow: hidden;
}

#tabs-utilities button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  border: 1px solid var(--amenity-line);
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
  text-align: left;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02);
  flex-shrink: 0;
}

#tabs-utilities button:hover {
  border-color: #d1d5db;
  transform: translateY(-1px);
}

/* Inactive button: Ẩn label và count, chỉ hiện icon dạng [ o ] */
#tabs-utilities button:not(.active) .tab-label-group {
  display: none !important;
}

#tabs-utilities button:not(.active) .tab-icon-chip {
  margin: 0;
}

/* Active button: Mở rộng hiển thị icon + tên + số lượng dạng [ o Trường học ] */
#tabs-utilities button.active {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding: 0 12px 0 8px;
  justify-content: flex-start;
  gap: 8px;
}

#tabs-utilities button.active .tab-label-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  gap: 6px;
}

.tab-icon-chip {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.tab-icon-chip svg {
  width: 20px;
  height: 20px;
}

.tab-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--amenity-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--amenity-ink-soft);
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 12px;
  margin-left: 4px;
  flex-shrink: 0;
}

#tabs-utilities button.active .tab-count {
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* Tab Active States */
#tabs-utilities button[data-type="school"] .tab-icon-chip {
  background: var(--cat-school-soft);
  color: var(--cat-school);
}
#tabs-utilities button[data-type="school"].active {
  border-color: var(--cat-school);
  background: var(--cat-school-soft);
}
#tabs-utilities button[data-type="school"].active .tab-icon-chip {
  background: var(--cat-school);
  color: #fff;
}
#tabs-utilities button[data-type="school"].active .tab-label,
#tabs-utilities button[data-type="school"].active .tab-count {
  color: var(--cat-school);
}

#tabs-utilities button[data-type="hospital"] .tab-icon-chip {
  background: var(--cat-hospital-soft);
  color: var(--cat-hospital);
}
#tabs-utilities button[data-type="hospital"].active {
  border-color: var(--cat-hospital);
  background: var(--cat-hospital-soft);
}
#tabs-utilities button[data-type="hospital"].active .tab-icon-chip {
  background: var(--cat-hospital);
  color: #fff;
}
#tabs-utilities button[data-type="hospital"].active .tab-label,
#tabs-utilities button[data-type="hospital"].active .tab-count {
  color: var(--cat-hospital);
}

#tabs-utilities button[data-type="restaurant"] .tab-icon-chip {
  background: var(--cat-restaurant-soft);
  color: var(--cat-restaurant);
}
#tabs-utilities button[data-type="restaurant"].active {
  border-color: var(--cat-restaurant);
  background: var(--cat-restaurant-soft);
}
#tabs-utilities button[data-type="restaurant"].active .tab-icon-chip {
  background: var(--cat-restaurant);
  color: #fff;
}
#tabs-utilities button[data-type="restaurant"].active .tab-label,
#tabs-utilities button[data-type="restaurant"].active .tab-count {
  color: var(--cat-restaurant);
}

#tabs-utilities button[data-type="supermarket"] .tab-icon-chip {
  background: var(--cat-supermarket-soft);
  color: var(--cat-supermarket);
}
#tabs-utilities button[data-type="supermarket"].active {
  border-color: var(--cat-supermarket);
  background: var(--cat-supermarket-soft);
}
#tabs-utilities button[data-type="supermarket"].active .tab-icon-chip {
  background: var(--cat-supermarket);
  color: #fff;
}
#tabs-utilities button[data-type="supermarket"].active .tab-label,
#tabs-utilities button[data-type="supermarket"].active .tab-count {
  color: var(--cat-supermarket);
}

/* ===== List ===== */
#list-utilities {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 16px 12px !important;
  /* Ép danh sách luôn căn từ trên xuống, tuyệt đối không căn giữa dọc */
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 8px; /* Khoảng cách giữa các card tiện ích */
  background: #ffffff;
}

#list-utilities::-webkit-scrollbar {
  width: 5px;
}
#list-utilities::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}
.utility-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid var(--amenity-line);
  border-radius: 12px;
  cursor: pointer;
  text-align: left !important; /* Đánh bay lỗi bị căn giữa chữ */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.utility-item:hover {
  background: var(--amenity-surface-soft);
  border-color: #d1d5db;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.utility-item-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.utility-item-icon svg {
  width: 20px;
  height: 20px;
}
.utility-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.utility-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--amenity-ink);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.utility-item-address {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--amenity-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.utility-item-address svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.utility-item-distance {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
/* Category styling cho item list */
.utility-item[data-cat="school"] .utility-item-icon,
.utility-item[data-cat="school"] .utility-item-distance {
  color: var(--cat-school);
  background: var(--cat-school-soft);
}
.utility-item[data-cat="school"].active {
  border-color: var(--cat-school);
  background: var(--cat-school-soft);
}

.utility-item[data-cat="hospital"] .utility-item-icon,
.utility-item[data-cat="hospital"] .utility-item-distance {
  color: var(--cat-hospital);
  background: var(--cat-hospital-soft);
}
.utility-item[data-cat="hospital"].active {
  border-color: var(--cat-hospital);
  background: var(--cat-hospital-soft);
}

.utility-item[data-cat="restaurant"] .utility-item-icon,
.utility-item[data-cat="restaurant"] .utility-item-distance {
  color: var(--cat-restaurant);
  background: var(--cat-restaurant-soft);
}
.utility-item[data-cat="restaurant"].active {
  border-color: var(--cat-restaurant);
  background: var(--cat-restaurant-soft);
}

.utility-item[data-cat="supermarket"] .utility-item-icon,
.utility-item[data-cat="supermarket"] .utility-item-distance {
  color: var(--cat-supermarket);
  background: var(--cat-supermarket-soft);
}
.utility-item[data-cat="supermarket"].active {
  border-color: var(--cat-supermarket);
  background: var(--cat-supermarket-soft);
}

/* Khi đang loading hoặc trống dữ liệu thì mới cho phép căn giữa */
#list-utilities.is-loading,
#list-utilities.is-empty {
  justify-content: center !important;
  align-items: center !important;
  height: 100%;
  color: var(--amenity-ink-soft);
  font-size: 13.5px;
  text-align: center;
  gap: 10px;
  padding: 20px !important;
}
.utility-spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--amenity-line);
  border-top-color: var(--amenity-brand);
  border-radius: 50%;
  animation: utility-spin 0.7s linear infinite;
}

.mapboxgl-popup-content {
  padding: 12px 14px !important;
  border-radius: 14px !important;
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.15),
    0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  background: #ffffff !important;
  border: 1px solid #f3f4f6 !important;
}

/* Làm đẹp nút X đóng popup (nhỏ lại, tròn, không bị đè lên chữ) */
.mapboxgl-popup-close-button {
  font-size: 16px !important;
  color: #9ca3af !important;
  padding: 4px 8px !important;
  right: 4px !important;
  top: 4px !important;
  border-radius: 50% !important;
  transition: all 0.15s ease !important;
}
.mapboxgl-popup-close-button:hover {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}

/* Chỉnh mũi tên nhọn của Popup tiệp màu với khung */
.mapboxgl-popup-tip {
  border-top-color: #ffffff !important;
}

@keyframes utility-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===== Map ===== */
#mapNearbyAmenities {
  flex: 1;
  position: relative;
}

/* ===== Responsive ===== */
@media (max-width: 991px) {
  #sidebar-utilities {
    width: 320px;
  }
}

@media (max-width: 767px) {
  #modalNearbyAmenities .modal-dialog {
    margin: 0;
    max-width: 100%;
    min-height: 100%;
  }
  .modalNearbyAmenities {
    border-radius: 0;
    width: 98vw !important;
    top: 2rem;
    height: 100vh;
    max-height: 100vh;
  }
  .modalNearbyAmenities .modal-body {
    flex-direction: column;
    height: 100%;
    max-height: none;
  }
  #sidebar-utilities {
    width: 100% !important;
    border-right: none;
    order: 2;
    flex: 1;
    min-height: 0;
  }
  #mapNearbyAmenities {
    order: 1;
    flex: 0 0 40vh;
  }

  /* Mobile: Cuộn ngang mượt mà */
  #tabs-utilities {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 10px 12px;
    gap: 8px;
    scrollbar-width: none;
  }
  #tabs-utilities::-webkit-scrollbar {
    display: none;
  }
  #tabs-utilities button {
    flex-shrink: 0;
    padding: 6px 10px;
  }
}

.video-thumbnail-container {
  position: relative;
  display: block;
  overflow: hidden;
  cursor: pointer;
}

.video-thumbnail-container img {
  transition: transform 0.3s ease;
}

.video-thumbnail-container:hover img {
  transform: scale(1.05);
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 0, 0, 0.8);
  color: #fff;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.video-thumbnail-container:hover .play-button {
  background: #ff0000;
  transform: translate(-50%, -50%) scale(1.1);
}

.modalReportRealEstate {
  top: 5rem;
  left: -5rem;
  width: 70rem !important;
  height: 74rem;
}

.box-type-report {
  width: 100%;
  max-width: 48rem;
  height: 4.6rem;
  margin: 0 auto 1.6rem;
  position: relative;
  display: flex;
  justify-content: space-between;
  background-color: #f1f5f9;
  padding: 4px;
  border-radius: 1.2rem;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  align-items: center;
}

.slider-indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 8px);
  height: calc(100% - 8px);
  background-color: #003c47;
  border-radius: 0.9rem;
  box-shadow: 0 3px 8px rgba(0, 60, 71, 0.25);
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.type-realestate,
.type-map {
  width: 50%;
  text-align: center;
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-size: 1.45rem;
  font-weight: 500;
  position: relative;
  z-index: 1;
  transition: color 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.type-realestate svg,
.type-map svg {
  width: 1.8rem;
  height: 1.8rem;
  margin-right: 0;
  vertical-align: middle;
}

.type-realestate.checked,
.type-map.checked {
  color: #ffffff;
  font-weight: 600;
}

.type-realestate.nochecked,
.type-map.nochecked {
  color: #64748b;
}

.type-realestate.nochecked:hover,
.type-map.nochecked:hover {
  color: #003c47;
}

.box-content-report > div {
  display: none;
}
.box-content-report > .box-realestate-report {
  display: block;
}
.box-realestate-report,
.box-map-report {
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 1rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.report-title {
  font-size: 15px;
  font-weight: 600;
  color: #003c47;
  margin-bottom: 12px;
}

.report-reasons {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
}

.report-reasons li {
  margin: 0;
}

/* Modern interactive card with toggle switch */
.report-reason-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.4rem;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 1rem;
  cursor: pointer;
  position: relative;
  user-select: none;
  transition: all 0.22s ease;
  margin-bottom: 0;
}

.report-reason-item:hover {
  border-color: #cbd5e1;
  background: #f1f5f9;
}

.report-reason-item:has(input:checked) {
  border-color: #003c47;
  background: rgba(0, 60, 71, 0.04);
}

.report-reason-text {
  font-size: 1.45rem;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.report-reason-item:has(input:checked) .report-reason-text {
  color: #003c47;
  font-weight: 600;
}

/* Hidden native input */
.report-reason-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  margin: 0;
}

/* Modern iOS-style toggle track */
.report-toggle-switch {
  position: relative;
  display: inline-block;
  width: 3.8rem;
  height: 2.2rem;
  min-width: 3.8rem;
  background-color: #cbd5e1;
  border-radius: 1.1rem;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
  flex-shrink: 0;
  margin-left: 1.2rem;
}

/* Toggle knob/thumb */
.report-toggle-switch::before {
  content: "";
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  width: 1.6rem;
  height: 1.6rem;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Checked state */
.report-reason-item input[type="checkbox"]:checked + .report-toggle-switch {
  background-color: #003c47;
  box-shadow: 0 0 0 1px rgba(0, 60, 71, 0.15);
}

.report-reason-item input[type="checkbox"]:checked + .report-toggle-switch::before {
  transform: translateX(1.6rem);
}
.box-contact-report {
  padding: 16px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.report-other textarea,
.report-user-info input {
  width: 100%;
  min-height: 36px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 6px 10px;
  outline: none;
  font-size: 14px;
  resize: vertical;
  transition: border-color 0.2s;
}

.report-other textarea {
  min-height: 60px;
}

.report-user-info h4 {
  margin: 15px 0 8px;
  font-size: 15px;
  font-weight: 600;
}

.report-user-info input:focus,
.report-other textarea:focus {
  border-color: #f1913d;
}
.box-info-report {
  display: flex;
  justify-content: space-around;
  gap: 2rem;
}
.reported {
  width: 100%;
  font-size: 1.75rem;
  font-weight: 600;
  padding: 1rem;
  background-color: #ccc;
  color: #1c1f22;
  border: unset;
}
.reported:hover {
  background-color: #f1913d;
  color: #fff;
}

.swal2-popup.system-logout-confirm {
  width: min(440px, calc(100vw - 32px));
  padding: 30px 28px 24px;
  border-top: 5px solid #f1913d;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

.system-logout-confirm .swal2-icon.swal2-warning {
  border-color: rgba(241, 145, 61, 0.55);
  color: #f1913d;
}

.system-logout-confirm .swal2-title {
  color: #1f2937;
  font-size: 24px;
}

.system-logout-confirm .swal2-actions {
  width: 100%;
  justify-content: center;
  gap: 10px;
}

.system-logout-confirm .swal2-html-container {
  font-size: 15px !important;
  line-height: 1.5;
}

.system-logout-confirm .swal2-styled {
  min-width: 110px;
  min-height: 44px;
  margin: 0;
  border-radius: 10px;
  font-size: 14px !important;
  font-weight: 700;
  box-shadow: none !important;
}

.system-logout-confirm__confirm {
  background: #126e5f !important;
}

.system-logout-confirm__confirm:hover {
  background: #0e594d !important;
}

.system-logout-confirm__cancel {
  border: 1px solid #f1913d !important;
  color: #b45309 !important;
  background: #fff7ed !important;
}

/* Report modal: fixed header/footer, independently scrollable body and scoped sizing. */
#modalReportRealEstate .modal-dialog {
  width: min(72rem, calc(100vw - 3.2rem));
  max-width: 72rem;
  height: min(82rem, calc(100dvh - 4.8rem));
  margin: 2.4rem auto;
}

#modalReportRealEstate .modal-content.modalReportRealEstate {
  top: auto;
  left: auto;
  display: flex;
  flex-direction: column;
  width: 100% !important;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  border-radius: 1.4rem;
  transform: none;
}

#modalReportRealEstate .modal-header,
#modalReportRealEstate .modal-footer {
  flex: 0 0 auto;
}

#modalReportRealEstate .modal-header .modal-title,
#modalReportRealEstate .report-user-title,
#modalReportRealEstate .reported {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

#modalReportRealEstate .report-tabler-icon {
  width: 2.2rem;
  height: 2.2rem;
  flex: 0 0 2.2rem;
}

#modalReportRealEstate .modal-body {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  padding: 0 1.6rem 1.6rem 1.6rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#modalReportRealEstate .box-type-report {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  max-width: 60rem;
  margin-top: 1.2rem;
  margin-bottom: 1.6rem;
  background-color: #f1f5f9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

#modalReportRealEstate .box-content-report,
#modalReportRealEstate .box-contact-report,
#modalReportRealEstate .report-user-info {
  width: 100%;
  min-width: 0;
}

#modalReportRealEstate .box-info-report {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

#modalReportRealEstate .box-info-report > div {
  position: relative;
  min-width: 0;
}

#modalReportRealEstate .report-field-icon {
  position: absolute;
  z-index: 1;
  top: 1rem;
  left: 1rem;
  width: 1.8rem;
  height: 1.8rem;
  color: #607477;
  pointer-events: none;
}

#modalReportRealEstate .report-user-info input {
  min-width: 0;
  padding-left: 3.6rem;
}

#modalReportRealEstate .report-user-title {
  margin: 1.6rem 0 1rem;
  color: #003c47;
  font-weight: 700;
}

#modalReportRealEstate .reported {
  justify-content: center;
  color: #fff;
  background: #003c47;
}

.content-box.luxury-box {
  position: relative;
}
.style-hover-rotate {
  position: absolute;
  bottom: 1rem;
}
#layoutMoreRealEstate {
  background: #fff;
  padding-top: 0px;
}
.layout-more-main {
  padding: 40px 0 22px;
}
.layout-more-main .row {
  margin-bottom: 30px;
}
.footer-logo {
  width: 700px;
  height: 90px;
  background: #fff;
  display: flex;
  align-items: center;
  padding-left: 20px;
}
.layout-menu-listBDS .title-desktop,
.layout-menu-listBDS .title-mobile {
  color: #c00;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 2rem;
}
.layout-menu-listBDS .tf-collapse-content {
  color: #333;
  line-height: 25px;
}
.netabout {
  color: #ffa300;
  font-size: 16px;
  padding-bottom: 18px;
  line-height: 23px;
}
.contactus {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contactus p,
.contactus p a {
  color: #fff;
}
.contactus p a:hover {
  color: #f1913d;
}
.layout-menu-listBDS ul li:not(:last-child) {
  margin-bottom: 15px;
}
.layout-menu-listBDS ul li a {
  font-size: 16px;
  line-height: 22.4px;
  color: #000;
}
.layout-menu-listBDS ul li:hover a {
  color: var(--Primary);
}
.layout-menu-listBDS.style-2 ul li a {
  padding-left: 20px;
  position: relative;

  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 3;
}
.layout-menu-listBDS.style-2 ul li a::after {
  content: "\e908";
  position: absolute;
  font-family: "icomoon";
  font-size: 16px;
  color: var(--Primary);
  font-size: 12px;
  margin-right: 11px;
  left: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 1;
}
.layout-menu-listBDS.style-2 ul li:hover a {
  padding-left: 0;
}
.layout-menu-listBDS.style-2 ul li:hover a::after {
  opacity: 0;
}
.header-right .box-user .user {
  font-size: 30px;
  color: #444;
  position: relative;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}
.ting {
  box-shadow: 0 0 25px 6px rgba(241, 145, 61, 0.7);
  transform: scale(1.2);
}

.heart {
  position: fixed;
  font-size: 26px;
  color: #f1913d;
  pointer-events: none;
  z-index: 9999;
  transform-origin: center;
}
.item-action-detail.actionAddToWishList.wishlist {
  background-color: #f1913d;
  color: #fff;
}
.item-action-detail.actionAddToWishList.remove {
  animation: removeHeart 0.4s ease-out forwards;
  position: relative;
}
@keyframes removeHeart {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px rgba(255, 80, 80, 0));
    opacity: 1;
  }
  30% {
    transform: scale(1.3);
    filter: drop-shadow(0 0 6px rgba(255, 100, 100, 0.6));
  }
  70% {
    transform: scale(0.9) rotate(-10deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(0.2) rotate(15deg);
    opacity: 0;
    filter: drop-shadow(0 0 0px rgba(255, 0, 0, 0));
  }
}
.list-action,
.action-button-list,
.action {
  overflow: visible !important;
}
.item-action-detail {
  position: relative;
  cursor: pointer;
}

.item-action-detail::after {
  content: attr(title);
  position: absolute;
  bottom: 135%;
  left: 50%;
  transform: translate(-50%, 4px);
  background: #333;
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.item-action-detail::before {
  content: "";
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translate(-50%, 4px);
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  opacity: 0;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.item-action-detail:hover::after,
.item-action-detail:hover::before {
  opacity: 1;
  transform: translate(-50%, 0);
}
.box-quick-info {
  display: flex;
  justify-content: space-between;
}
.container-mosiac {
  margin-top: 10rem;
}
.modalAdvanceFilterRealEstate {
  max-height: 70rem;
}
.modalAdvanceFilterRealEstate,
.modalCategoryFilterRealEstate,
.modalPriceRangeFilterRealEstate,
.modalAreaRangeFilterRealEstate {
  top: 10rem;
}
.report-guest-note {
  margin: -0.25rem 0 1rem;
  color: #60717a;
  font-size: 1.3rem;
  line-height: 1.5;
}
/* .zalo-chat-widget {
  bottom: 92px !important;
  right: 23px !important;
} */

/* Compact mobile authentication surfaces. */
.modern-login .register {
  margin: var(--space-4, 1.6rem) 0 0;
  color: var(--color-ink-600, #475467);
  font-size: var(--font-size-sm, 1.4rem);
  line-height: var(--line-height-base, 1.5);
}

.modern-login .switch-to-register {
  color: var(--color-brand-700, #004b59);
  font-weight: var(--font-weight-semibold, 600);
}

.modern-login .switch-to-register:hover {
  color: var(--color-brand-600, #126e5f);
  text-decoration: underline;
}

.modern-login .switch-to-register:focus-visible {
  border-radius: var(--radius-sm, 0.8rem);
  outline: 0.2rem solid var(--color-brand-600, #126e5f);
  outline-offset: 0.2rem;
}

.auth-social-login {
  width: 100%;
  margin-top: var(--space-4, 1.6rem);
}

.auth-social-login .divider-or {
  display: flex;
  align-items: center;
  gap: var(--space-3, 1.2rem);
  width: 100%;
  margin-bottom: var(--space-3, 1.2rem);
  color: var(--color-ink-500, #667085);
  font-size: var(--font-size-sm, 1.4rem);
  line-height: var(--line-height-base, 1.5);
}

.auth-social-login .divider-or::before,
.auth-social-login .divider-or::after {
  height: 0.1rem;
  background: var(--color-line-200, #e4e7ec);
  content: "";
  flex: 1;
}

.auth-social-login .divider-or span {
  flex: none;
}

.auth-social-login .auth-google-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.8rem);
  width: 100%;
  min-height: 4.4rem;
  padding: 1.2rem 1.6rem;
  border: 0;
  border-radius: var(--radius-md, 1.2rem);
  color: var(--color-surface, #fff);
  background: var(--color-brand-800, #003c47);
  box-shadow: var(--shadow-sm, 0 0.2rem 0.8rem rgba(0, 43, 52, 0.08));
  font-family: var(--font-family-base, "Roboto", Arial, sans-serif);
  font-size: var(--font-size-md, 1.6rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-tight, 1.25);
  cursor: pointer;
  transition:
    background var(--transition-fast, 150ms ease),
    box-shadow var(--transition-fast, 150ms ease),
    transform var(--transition-fast, 150ms ease);
}

.auth-social-login .auth-google-button:hover {
  background: var(--color-brand-600, #126e5f);
  box-shadow: var(--shadow-md, 0 1.2rem 3.2rem rgba(0, 43, 52, 0.12));
  transform: translateY(-0.1rem);
}

.auth-social-login .auth-google-button:focus-visible {
  outline: 0.3rem solid rgba(18, 110, 95, 0.24);
  outline-offset: 0.2rem;
}

.auth-social-login .auth-google-button:active {
  transform: translateY(0);
}

.auth-social-login .auth-google-button:disabled {
  color: var(--color-line-200, #e4e7ec);
  background: var(--color-ink-500, #667085);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.auth-google-button svg {
  flex: none;
}
.modalLogin .login-mobile-header {
  display: none !important;
}

@media (max-width: 767.98px) {
  .modalLogin .login-desktop-header {
    display: none !important;
  }

  .modalLogin .login-mobile-header {
    display: flex !important;
  }

  .modalLogin .modern-layout {
    left: 0;
    transition:
      transform 0.45s cubic-bezier(0.2, 0.75, 0.2, 1),
      opacity 0.3s ease,
      visibility 0.3s ease;
    will-change: transform, opacity;
  }

  .modalLogin .forms-slider .modern-login {
    transform: translateX(0);
  }
  .modalLogin .forms-slider .modern-register {
    transform: translateX(100%);
  }
  .modalLogin .forms-slider .modern-verify {
    transform: translateX(200%);
  }
  .modalLogin .forms-slider .modern-forgot {
    transform: translateX(-100%);
  }
  .modalLogin .forms-slider.slide-to-register .modern-login {
    transform: translateX(-100%);
  }
  .modalLogin .forms-slider.slide-to-register .modern-register {
    transform: translateX(0);
  }
  .modalLogin .forms-slider.slide-to-register .modern-verify {
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
  }
  .modalLogin .forms-slider.slide-to-register .modern-forgot {
    transform: translateX(-200%);
  }
  .modalLogin .forms-slider.slide-to-forgot .modern-login {
    transform: translateX(100%);
  }
  .modalLogin .forms-slider.slide-to-forgot .modern-forgot {
    transform: translateX(0);
  }
  .modalLogin .forms-slider.slide-to-forgot .modern-register {
    transform: translateX(200%);
  }
  .modalLogin .forms-slider.slide-to-forgot .modern-verify {
    transform: translateX(300%);
  }
  .modalLogin .forms-slider.slide-to-verify .modern-login {
    transform: translateX(-200%);
  }
  .modalLogin .forms-slider.slide-to-verify .modern-forgot {
    transform: translateX(-300%);
    visibility: hidden;
  }
  .modalLogin .forms-slider.slide-to-verify .modern-register {
    transform: translateX(-100%);
  }
  .modalLogin .forms-slider.slide-to-verify .modern-verify {
    transform: translateX(0);
  }

  .modalLogin {
    position: relative;
    border-radius: 0.6rem !important;
  }

  .modalLogin .modal-header {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent !important;
  }

  .modalLogin .modal-header .close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    margin-top: 1rem;
    margin-right: 1rem;
    padding: 0;
    border-radius: 1rem !important;
    background: var(--color-accent-500, #f1913d);
  }

  .modalLogin .modal-header .close svg {
    color: var(--color-brand-900, #002b34) !important;
  }

  .modalLogin .containerdangnhap {
    margin-top: 0;
    padding: var(--space-4, 1.6rem);
  }

  .modalLogin .right-area,
  .modalLogin .modern-login,
  .modalLogin .modern-register,
  .modalLogin .modern-verify,
  .modalLogin .modern-forgot {
    border-radius: 0.8rem !important;
  }

  .modalLogin .input-box input,
  .modalLogin .btn-login,
  .modalLogin .btn-register,
  .modalLogin .btn-verify,
  .modalLogin .btn-forgot {
    border-radius: 0.6rem !important;
  }
}
/* ===== Responsive shell: tablet follows mobile, laptop follows desktop ===== */
:where(html, body) {
  max-width: 100%;
  overflow-x: clip;
}

:where(img, video, canvas, svg) {
  max-width: 100%;
}

:where(.tf-container, .tf-container-xxl, .layout-container, main .container) {
  width: min(132rem, calc(100% - 4rem));
  min-width: 0;
  margin-inline: auto;

  @media (max-width: 767.98px) {
    width: calc(100% - 3.2rem);
  }

  /* Tablet: retain the mobile flow with more breathing room. */
  @media (min-width: 768px) and (max-width: 1023.98px) {
    width: calc(100% - 4rem);
  }

  /* Laptop: retain desktop composition while reducing its outer footprint. */
  @media (min-width: 1024px) and (max-width: 1279.98px) {
    width: min(112rem, calc(100% - 4rem));
  }
}

:where(.row, [class*="-grid"], [class*="-wrapper"], [class*="-content"]) > * {
  min-width: 0;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  :where(.project-list, .client-utility-grid, .client-blog-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :where(input, select, textarea, button) {
    max-width: 100%;
  }
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
  :where(.header-search-box, .client-right-side, .right-sidebar) {
    min-width: 0;
  }

  :where(.header-search-box) {
    max-width: 42rem;
  }
}

/* Tablet uses the compact, stacked nearby-amenities composition. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  #modalNearbyAmenities .modal-dialog {
    width: calc(100% - 3.2rem);
    max-width: 76rem;
    min-height: calc(100% - 3.2rem);
    margin: 1.6rem auto;
  }

  .modalNearbyAmenities {
    width: 100% !important;
    height: calc(100dvh - 3.2rem) !important;
    max-height: calc(100dvh - 3.2rem);
  }

  .modalNearbyAmenities .modal-body {
    flex-direction: column;
    height: 100%;
    max-height: none;
  }

  #sidebar-utilities {
    order: 2;
    width: 100%;
    min-height: 0;
    flex: 1 1 0;
    overflow: hidden;
    border-right: 0;
  }

  #mapNearbyAmenities {
    order: 1;
    flex: 0 0 clamp(32rem, 55dvh, 48rem);
  }

  #list-utilities {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #tabs-utilities {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2, 0.8rem);
    overflow: visible;
  }

  #tabs-utilities button {
    width: 4.2rem;
    min-width: 4.2rem;
    flex: 0 0 4.2rem;
    padding: 0;
    justify-content: center;
  }

  #tabs-utilities button.active {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 0 1.2rem 0 0.8rem;
    justify-content: flex-start;
  }

  #tabs-utilities .tab-label-group {
    min-width: 0;
  }
}

@media (max-width: 1023.98px) {
  #modalLogin.show {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.6rem;
  }

  #modalLogin .modal-dialog {
    width: min(56rem, 100%);
    margin: auto;
  }

  #modalLogin .modalLogin {
    position: relative;
    /* Compatibility: legacy modal coordinates use !important. */
    top: auto !important;
    left: auto !important;
    max-height: calc(100dvh - 3.2rem);
    margin: 0;
  }

  #modalLogin .login-mobile-header {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    z-index: 5;
    display: flex !important;
    width: 4.4rem;
    height: 4.4rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
  }

  #modalLogin .login-mobile-header .close {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    color: var(--color-brand-800, #003c47);
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1;
  }

  #modalLogin .login-mobile-header .close svg {
    width: 2.8rem;
    height: 2.8rem;
    color: var(--color-brand-800, #003c47) !important;
    stroke: currentColor;
    opacity: 1;
  }
}

/*
 * Tablet follows the mobile interaction model. These declarations need
 * !important only where they replace legacy breakpoint rules that already use it.
 */
@media (max-width: 1023.98px) {
  body {
    padding-top: 5.5rem;
  }

  #header-container {
    display: none;
  }

  .mobile-menu-container {
    display: flex !important;
    height: 5.5rem;
    padding: 0.6rem 1.4rem;
  }

  .mobile-menu,
  .mobile-user-menu {
    display: block !important;
  }

  .mobile-header-slot {
    height: 4.3rem;
  }

  #mobile-logo-link {
    justify-content: center;
    overflow: hidden;
  }

  .mobile-header-logo {
    display: block;
    width: 60%;
    max-width: 28rem;
    height: auto;
    max-height: 4.1rem;
    margin-inline: auto;
    object-fit: contain;
  }

  .mobile-header-search-box .mobile-search-bar {
    width: 100%;
    min-height: 4.2rem;
    padding: 0.3rem;
  }

  .mobile-header-search-box .mobile-search-bar input {
    min-width: 0;
    padding: 0.8rem 1.2rem;
    font-size: 1.4rem;
  }

  .mobile-header-search-box .mobile-search-bar .btn-search-mobile {
    width: 4rem;
    min-width: 4rem;
  }

  html.mobile-side-open,
  body.mobile-side-open {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
  }

  body.modal-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
  }

  .progress-wrap {
    z-index: 10020;
  }

  #arcontactus:not(.arcontactus-page-hidden) {
    display: block;
  }

  .arcontactus-widget.right.arcontactus-message {
    right: 1.6rem;
    bottom: 19.8rem;
  }

  #modalLogin {
    z-index: 12050;
    padding: 0;

    .modal-dialog {
      width: min(56rem, calc(100vw - 3.2rem));
      max-width: none;
      margin: 1.6rem auto;
    }

    .modalLogin {
      top: auto;
      left: auto;
      width: 100% !important;
      height: auto;
      max-height: calc(100dvh - 3.2rem);
      overflow: hidden;
      border-radius: var(--radius-md, 1.2rem) !important;
    }

    .login-desktop-header,
    .left-area {
      display: none !important;
    }

    .login-mobile-header {
      display: flex !important;
    }

    .containerdangnhap {
      display: block;
      width: 100%;
      height: auto;
      min-height: 0;
      margin: 0;
      padding: 0;
      background: var(--color-surface, #fff);
    }

    .right-area.forms-slider {
      display: block;
      width: 100% !important;
      height: min(62rem, calc(100dvh - 3.2rem));
      min-height: 48rem;
      padding: 0;
      overflow: hidden;
      background: var(--color-surface, #fff);
    }

    .modern-layout {
      width: 100%;
      max-width: none;
      height: 100%;
      padding: clamp(2rem, 4vw, 3.2rem);
      overflow-x: hidden;
      overflow-y: auto;
      border-radius: 0 !important;
      overscroll-behavior: contain;
    }
  }

  body > .modal-backdrop.show {
    z-index: 12040;
  }
}

@media (max-width: 575.98px) {
  #modalLogin {
    .modal-dialog {
      width: calc(100vw - 2rem);
      margin: 1rem auto;
    }

    .modalLogin {
      max-height: calc(100dvh - 2rem);
    }

    .right-area.forms-slider {
      height: calc(100dvh - 2rem);
      min-height: 0;
    }

    .modern-layout {
      padding: 1.8rem;
    }
  }
}

/* Tablet: mobile header/drawers with tablet content composition. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  body {
    background: var(--color-page, #f5f6f8);
  }

  body {
    padding-top: 6.8rem;
  }

  #modalLogin.show {
    display: grid !important;
    place-items: center;
    min-height: 100dvh;
    padding: var(--space-4, 1.6rem);
    overflow: hidden;
  }

  #modalLogin .modal-dialog {
    display: flex;
    align-items: center;
    width: min(56rem, calc(100vw - 3.2rem));
    height: 100dvh;
    min-height: 100dvh;
    margin: 0 auto !important;
    transform: none !important;
  }

  #modalLogin .modalLogin {
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    max-height: calc(100dvh - 3.2rem);
    margin: auto !important;
    transform: none !important;
  }

  #modalLogin .login-mobile-header .close,
  #modalLogin .login-mobile-header .close:hover,
  #modalLogin .login-mobile-header .close:focus-visible {
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .project-intro .project-info > .project-tabs {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-right: auto;
    margin-left: auto;
    flex-wrap: nowrap;
  }

  .project-intro .project-info > .project-tabs label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding-right: var(--space-3, 1.2rem);
    padding-left: var(--space-3, 1.2rem);
    text-align: center;
  }
  #header-container {
    display: none;
  }

  .mobile-menu-container {
    display: flex !important;
    height: 6.8rem;
    padding: 0.8rem clamp(2rem, 4vw, 4rem);
  }

  .mobile-menu,
  .mobile-user-menu {
    display: block !important;
  }

  .mobile-header-slot {
    height: 5.2rem;
  }
  #mobile-logo-link {
    justify-content: center;
    overflow: hidden;
  }

  .mobile-header-logo {
    display: block;
    width: 60%;
    max-width: 36rem;
    max-height: 5.2rem;
    margin-inline: auto;
    object-fit: contain;
  }

  .mobile-menu-btn,
  .mobile-user-menu-btn {
    width: 4.8rem;
    min-width: 4.8rem;
    height: 4.8rem;
  }

  .mobile-search-section {
    display: block !important;
  }
  .client-slide .search-box {
    display: none !important;
  }
  .client-slide .mySwiperHome {
    display: none !important;
  }
  .client-slide .mobile-hero {
    display: block !important;
  }
  .mobile-quick-actions {
    display: flex !important;
  }

  :is(.client-slide, .client-home-page > section) {
    width: min(96rem, calc(100% - 3.2rem));
    margin-inline: auto;
  }

  .client-home-page :is(.sale-grid, .rent-grid, .area-section-grid, .project-grid, .utility-wrap) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023.98px) {
  .mobile-search-section {
    margin-top: 0;
  }
}

/* Laptop: desktop hierarchy with a capped canvas and predictable gutters. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  #header-container .client-header,
  :is(.client-slide, .client-home-page > section) {
    /* width: min(112rem, calc(100% - 4rem)); */
    margin-inline: auto;
  }

  #header-container .client-header {
    gap: 1.2rem;
  }
  .client-left-side {
    min-width: 0;
    gap: 1.2rem;
  }

  .client-left-side .left-side-logo img {
    width: clamp(13rem, 14vw, 17rem);
    height: 6.4rem;
  }

  .client-left-side .left-side-navigation .left-side-navigation-list {
    gap: 0.4rem;
  }

  .client-left-side .left-side-navigation .left-side-navigation-list > li > a {
    padding-inline: 0.9rem;
    font-size: 1.4rem;
  }

  .client-right-side {
    gap: 0.8rem;
  }

  .client-slide .search-box {
    width: 65%;
  }
  .card-zalo .info {
    display: none;
  }
  .desktop-filter-fixed-shell {
    transform: translateY(-12px);
  }
}