/* Trang chủ: hero trượt, 3 tin cạnh bên, lưới khối, cột phải */
.home-grid { width: min(100% - (var(--container-gutter) * 2), var(--container-max)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) var(--side-w); gap: var(--gap); align-items: start; }
.home-main { min-width: 0; }
.top-row { display: grid; grid-template-columns: minmax(0, 1.655fr) minmax(0, 1fr); gap: 15px; height: 350px; }

/* hero */
.hero { position: relative; border-radius: 12px; overflow: hidden; background: #0b2c5e; box-shadow: var(--shadow-md); min-width: 0; }
.hero__slides { position: absolute; inset: 0; }
.hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s linear .6s; }
.hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s var(--ease), visibility 0s; }
.hero__media { position: absolute; inset: 0; border-radius: 0; }
.hero__media img { transform: scale(1.001); }
.hero__slide.is-active .hero__media img { animation: hero-in 6s var(--ease) backwards; }
@keyframes hero-in { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero__slide::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 12, 45, 0) 38%, rgba(0, 12, 45, .55) 62%, rgba(0, 12, 45, .9) 100%); }
.hero__body { position: absolute; z-index: 2; left: 27px; right: 27px; bottom: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; color: #fff; }
.hero__title { font-size: var(--text-hero-title); line-height: 1.28; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero__title a { color: #fff; }
.hero__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero__excerpt { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .9); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero .meta { color: rgba(255, 255, 255, .92); font-size: 13px; gap: 4px 18px; }
.hero .meta .ico { color: #fff; }
.hero__nav { position: absolute; z-index: 4; top: 117px; width: 28px; height: 28px; border-radius: 50%; background: rgba(8, 28, 70, .62); color: #fff; display: grid; place-items: center; transition: background-color var(--t-fast) ease, transform var(--t-fast) ease; }
.hero__nav .ico { width: 16px; height: 16px; }
.hero__nav--prev { left: 14px; }
.hero__nav--next { right: 14px; }
.hero__nav:hover { background: var(--c-blue); transform: scale(1.1); }
.hero__dots { position: absolute; z-index: 4; right: 22px; bottom: 24px; display: flex; gap: 8px; }
.hero__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .5); transition: background-color var(--t-fast) ease, transform var(--t-fast) ease; }
.hero__dot:hover { background: rgba(255, 255, 255, .85); }
.hero__dot.is-active { background: #fff; transform: scale(1.25); }

/* 3 tin cạnh bên */
.hero-side { background: #fff; border-radius: 12px; box-shadow: var(--shadow-md); border: 1px solid #edf1f9; padding: 8px; min-width: 0; }
.hero-side ul { height: 100%; display: grid; grid-template-rows: repeat(3, 1fr); gap: 8px; }
.side-item { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px; align-items: center; }
.side-item__thumb { aspect-ratio: 130 / 92; border-radius: 8px; }
.side-item__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* lưới khối chuyên mục */
.block-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 22px; margin-top: 25px; }

/* cột phải */
.home-side { display: grid; gap: 12px; min-width: 0; }
.widget--popular { min-height: 255px; }

/* ---- Slide "Dự án bất động sản": ảnh lớn, 2 thẻ/lượt ---- */
.block--wide { grid-column: 1 / -1; }
.pslide__wrap { position: relative; }
.pslide__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.pslide__track::-webkit-scrollbar { display: none; }
.pslide__track:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }
.pslide__item { flex: 0 0 calc((100% - 16px) / 2); min-width: 0; scroll-snap-align: start; }
.pcard { aspect-ratio: 457 / 300; border-radius: 12px; box-shadow: var(--shadow-md); }
.pcard .overlay-card__thumb { border-radius: 12px; }
.pcard .overlay-card__title { font-size: 19px; line-height: 1.3; }
.pcard .overlay-card__body { left: 18px; right: 70px; bottom: 16px; gap: 9px; }
.pslide__nav { position: absolute; top: calc(50% - 20px); z-index: 4; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--c-navy); box-shadow: 0 3px 12px rgba(0, 20, 60, .3); transition: background-color var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-fast) ease; }
.pslide__nav .ico { width: 20px; height: 20px; }
.pslide__nav--prev { left: 10px; }
.pslide__nav--next { right: 10px; }
.pslide__nav:hover { background: var(--c-blue); color: #fff; transform: scale(1.08); }
.pslide__nav:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.pslide__dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; min-height: 9px; }
.pslide__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: #c3d3ee; cursor: pointer; transition: width var(--t-base) ease, background-color var(--t-base) ease; }
.pslide__dot.is-active { width: 26px; background: var(--c-blue); }
.pslide__dot:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pslide__track { scroll-behavior: auto; } }

/* ---- Cột bên: widget "Tư vấn pháp lý" ---- */
.widget__more { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font: 700 12px/1 var(--font-heading); color: #fff; white-space: nowrap; }
.widget__more .ico { width: 13px; height: 13px; color: #fff; transition: transform var(--t-fast) ease; }
.widget__more:hover .ico { transform: translateX(4px); }
.widget__more:hover { color: var(--c-gold); }
.legal-lead { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px 6px; }
.legal-lead__thumb { aspect-ratio: 16 / 9; border-radius: 8px; }
.legal-lead__title { font-size: 16px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.widget--legal .compact-list { margin: 4px 12px 0; padding: 8px 0 10px; border-top: 1px solid var(--c-line); }