/**
 * Brand pass: one background, two typefaces, three text colours.
 *
 * Loads after every other stylesheet, which is the whole point — the ported
 * Sapo sheets carry the browns this file removes, and they are enqueued after
 * palm-vars.css. Overriding from here needs no `!important`, only the same
 * selector the original used.
 *
 * Backgrounds  every panel is black; structure comes from hairlines, not fill.
 * Type         Copperplate for titles, Alter Gothic for everything else.
 * Colour       H1 taupe, titles sand, body white.
 */

/* Nền — tất cả về đen ------------------------------------------------------
 *
 * The ported sheet paints these #26231e, a warm near-black that reads as brown
 * beside the true black of the page.
 */

footer.footer,
.section_review,
.mida-breadcrumb,
.main-page .main-page-breadcrumb,
.main-article .main-article-breadcrumb,
.main-collection .main-collection-breadcrumb,
.main-404 .main-404-breadcrumb,
.mida-pd-breadcrumb,
.main-article > .container .main-article-menu,
.section_index--collections .section_index--collections-wrap {
	background: var(--brand-black);
}

/* The gradient behind the flash-sale block ends in the same brown. */
.section_index--fSale-wrap .section_index--fSale-body .section_index--fSale-body-data {
	background: var(--brand-black);
}

/* Decorative slab behind a section heading — invisible on black, so it goes
   rather than sitting there as a brown smear. */
.section-title-all h2::before {
	background: transparent;
}

/*
 * A band that loses its fill loses its edge with it. One hairline keeps the
 * breadcrumb and the footer separated from the content above them.
 */
.mida-breadcrumb,
.main-page .main-page-breadcrumb,
.main-article .main-article-breadcrumb,
.main-collection .main-collection-breadcrumb,
.main-404 .main-404-breadcrumb,
.mida-pd-breadcrumb {
	border-bottom: 1px solid var(--mida-line);
}

footer.footer {
	border-top: 1px solid var(--mida-line);
}

/* Dropdown panels --------------------------------------------------------- */

.headers3 .headers3-wrap .headers3-bot > nav .menu0 .menu1,
.headers3 .headers3-wrap .headers3-bot > nav .menu0 .menu2 {
	color: var(--brand-white);
	background: var(--brand-black);
	border: 1px solid var(--mida-line-strong);
	box-shadow: none;
}

.headers3 .headers3-wrap .headers3-bot > nav .menu0 .menu1 > li:not(:last-child) a,
.headers3 .headers3-wrap .headers3-bot > nav .menu0 .menu2 > li:not(:last-child) a {
	border-bottom: 1px solid var(--mida-line);
}

/* The ported rule marks the current item with var(--color_main) — black, which
   on a black panel is nothing at all. */
.headers3 .headers3-wrap .headers3-bot > nav .menu0 .menu1 > li.active > a,
.headers3 .headers3-wrap .headers3-bot > nav .menu0 .menu1 > li:hover > a {
	color: var(--brand-sand);
}

/* Full-screen scrim behind the mobile drawer; it was a blue-grey. */
.overplay-all {
	background: rgba(0, 0, 0, .85);
}

/* Chữ — ba màu ------------------------------------------------------------
 *
 * A link takes the colour of whatever it sits in: white in a paragraph, sand
 * inside a heading. Colouring anchors separately is what put brown into the
 * middle of otherwise white text.
 */

a {
	color: inherit;
}

a:hover,
a:focus {
	color: var(--brand-sand);
}

/* H1 */
h1,
.h1,
.mida-pd-hero-title {
	color: var(--brand-taupe);
}

/* Tiêu đề */
h2,
h3,
h4,
h5,
h6,
.h2,
.h3,
.h4,
.h5,
.h6,
.module-title,
.section-title-all > span,
.mida-pd-head h2,
.mida-video-group-head h2,
.mida-video-title,
.achievement-label,
.mida-contact-company {
	color: var(--brand-sand);
}

/* Nội dung */
body,
p,
li,
dd,
dt,
td,
th,
figcaption,
blockquote,
label,
input,
textarea,
select {
	color: var(--brand-white);
}

/* Warm greys left in the ported header and footer. */
.topbar .topbar-link li a,
.headers3 .headers3-wrap .headers3-left form button[type="submit"] i,
footer.footer .text-copyright,
footer.footer .text-copyright a {
	color: var(--brand-white);
}

.headers3 .headers3-wrap .headers3-left form input::placeholder {
	color: var(--mida-muted);
}

.topbar .topbar-link li:first-child {
	border-right-color: var(--mida-line-strong);
}

/* Headings the ported sheets colour more specifically ---------------------- */

.main-collection .main-collection-wrap .main-collection-info h1 {
	color: var(--brand-taupe);
}

.mida-service-card-title,
.section_project .project-list .list-item h3,
.section_construction .construction-list .list-item h3,
.section_interior .interior-list .list-item h3,
.section_banner .banner-item .item-info h3 {
	color: var(--brand-sand);
}

/* Pagination dots — the last of the warm greys, on the home slider. */
.home-slider .swiper-pagination-bullets .swiper-pagination-bullet {
	background: var(--mida-muted);
	border-color: var(--mida-line-strong);
}

.home-slider .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background: var(--brand-white);
	border-color: var(--brand-white);
}

/* Bù lại phần chữ bị nhỏ đi ------------------------------------------------
 *
 * Alter Gothic is a condensed display grotesque: measured against Plus Jakarta
 * Sans at the same 17px it has an x-height of 8.0 against 10.0, and sets the
 * same sentence 27% narrower. Every size in the ported sheet was chosen for
 * Jakarta, so swapping the face shrank the whole page by a fifth without a
 * single number changing.
 *
 * `font-size-adjust` fixes it at the root instead of re-typing dozens of px
 * values: the browser scales each element so its x-height lands on the ratio
 * given — 0.588 is exactly what Jakarta had (10 ÷ 17). Alter Gothic sits at
 * 0.471, so everything comes back up by a factor of 1.25 and the page reads at
 * the size it did before.
 *
 * Line lengths stay put: 1.25 × a face that was 27% narrower is still slightly
 * narrower than the original.
 */
body {
	font-size-adjust: 0.588;
}

/*
 * Titles keep the size they have. Copperplate sits at 0.529 and would grow by
 * a ninth, and nothing was wrong with the headings — only the running text
 * lost ground.
 */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.module-title,
.section-title-all > span,
.mida-pd-btn,
.mida-empty-form button,
.achievement-label,
.mida-contact-company,
.headers3 .headers3-wrap .headers3-center a {
	font-size-adjust: none;
}