/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** CSS tùy chỉnh của child theme. ***************/

.text-h1-home {
    margin-left: 0px !important;
    padding-left: 0px !important;
}
.section-title-container {
    margin-left: 0px !important;
}
/* Thay icon menu cũ bằng SVG mới */
.icon-menu:before {
    content: "" !important;
    display: inline-block;
    width: 34px;
    height: 34px;
    background-image: url('assets/images/icon-menu.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    font-family: initial;
}
.mfp-content {
    margin: 70px auto !important; 
    vertical-align: initial !important;
}
.off-canvas-center .nav-vertical>li>a {
    font-size: 21px !important;
	padding-bottom: 10px !important;
    padding-top: 10px !important;
}
.off-canvas-center .mfp-content {
    padding-top: 0px !important;
    background: #574d3cbd !important;
}
.off-canvas .sidebar-menu {
    padding: 10px 0 !important;
}
.mfp-close{
    right: 13px !important;
	top: 21px !important;
}
.off-canvas-center .nav-sidebar.nav-vertical>li {
        border-bottom: 0.5px solid #cbc6c61a;
}
.off-canvas-center .nav-sidebar.nav-vertical>li:hover {
    background: rgba(255, 255, 255, .15);
    border-color: #d9a12d;
    box-shadow: 0 18px 34px rgba(0, 0, 0, .24);
}
/* Màu vùng văn bản được chọn. */
::selection {
background: #A44629;
color: #FFFFFF;
}
.stuck .header-main {
	background-color: #231F1B;
}
.logo-left .logo {
	margin-right: 1.25rem;
}

.header-nav-main a.nav-top-link {
    color: #fff;
    font-size: 14px !important;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-right: 1px solid rgb(237 231 214 / 43%);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    white-space: nowrap;
    transition: background .35s, color .35s;
}
.header-nav-main li.active a{
	    color: hsl(51.52deg 98.65% 66.25% / 85%) !important;
}


.header-nav-main a.nav-top-link:hover {
	color: #F0E5D2;
}
.header .header-button .button.primary {
	color: #F7F1E3;
}

.header-nav-main.nav-line-bottom > li > a::before {
	background-color: #A44629;
}

/* Trống đồng nằm trong lớp nền của UX Block chân trang. */
.nauda-footer {
	position: relative;
	overflow: hidden;
}

.nauda-footer > .section-bg {
	overflow: hidden;
	pointer-events: none;
}

.nauda-footer > .section-bg::before {
	content: '';
	position: absolute;
	top: 188%;
	left: 50%;
	width: var(--nauda-footer-mandala-size, 1400px);
	height: var(--nauda-footer-mandala-size, 1400px);
	background: url('assets/images/trongdong.png') center / contain no-repeat;
	opacity: .055;
	transform: translate(-50%, -50%);
	animation: nauda-footer-mandala-spin 120s linear infinite;
	animation-play-state: paused;
}

.nauda-footer.nauda-mandala-visible > .section-bg::before {
	animation-play-state: running;
}

.nauda-footer > .section-content {
	position: relative;
	z-index: 1;
}

@keyframes nauda-footer-mandala-spin {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.nauda-footer > .section-bg::before { animation: none; }
}

/* Responsive CSS chuyển từ các file tùy chỉnh; giữ thứ tự từng file. */

/* assets/css/contact.css */
@media (max-width: 549px) {
	.nauda-page.nauda-contact-page .lh {
		margin-top: 1.5rem;
		row-gap: .75rem;
	}

	.nauda-page.nauda-contact-page .nauda-contact-address .the dl {
		grid-template-columns: 5.5rem minmax(0, 1fr);
	}

	.nauda-page.nauda-contact-page .nauda-contact-form .don-luoi {
		grid-template-columns: 1fr;
	}
}


/* assets/css/membership.css */
@media (max-width: 549px) {
	.nauda-page.nauda-membership-page .ba > .col > .col-inner {
		padding: 1rem;
	}

	.nauda-page.nauda-membership-page .toi .don-luoi {
		grid-template-columns: 1fr;
	}
}


/* assets/css/nauda.css */
@media (max-width: 53rem) {
    .banner-layers {
    height: 94% !important;
    }
	.nauda-page .ba > .col + .col {
		border-top: 1px solid var(--vien);
		border-left: 0;
	}

	.nauda-page .moc-h {
		grid-template-columns: 1fr;
		gap: .5rem;
	}

	.nauda-page .so-hang > .col:nth-child(odd) {
		border-left: 0;
	}
}

@media (max-width: 40rem) {
	.nauda-page .don-luoi {
		grid-template-columns: 1fr;
	}

	.nauda-page .don-luoi > .rong {
		grid-column: auto;
	}

	.nauda-page .tem {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.nauda-page *,
	.nauda-page *::before,
	.nauda-page *::after {
		animation-duration: .01ms;
		animation-iteration-count: 1;
		scroll-behavior: auto;
		transition-duration: .01ms;
	}
}

@media (max-width: 53rem) {
	.nauda-page .nauda-home-hero .rating {
		width: min(22rem, calc(100% - 2rem)) !important;
	}

	.nauda-page .nauda-home-hero .rating .top {
		min-height: 3.5rem;
		padding: .625rem 3.5rem .625rem 1.25rem;
	}

	.nauda-page .nauda-home-hero .rating .stars {
		gap: .35rem;
	}

	.nauda-page .nauda-home-hero .rating .stars svg {
		width: 1rem;
		height: 1rem;
	}

	.nauda-page .nauda-home-hero .rating .top p svg {
		width: 1.5rem;
		height: 1.5rem;
	}

	.nauda-page .nauda-home-hero .rating .bottom {
		min-height: 7.5rem;
		gap: .875rem;
		padding: 1rem 1.25rem;
	}

	.nauda-page .nauda-home-hero .rating .score {
		font-size: clamp(2.75rem, 8vw, 3.5rem);
	}
}

@media (max-width: 40rem) {
	.nauda-page .nauda-home-hero .banner {
		padding-top: 46rem !important;
	}

	.nauda-page .nauda-home-hero .text-box:not(.rating) {
		top: 18.75rem !important;
	}

	.nauda-page .nauda-home-hero .rating {
        left: 43% !important;
        right: auto;
        bottom: 2rem;
        width: min(19rem, calc(100vw - 2rem)) !important;
        max-width: none;
        transform: translateX(-50%) !important;
	}

	.nauda-page .nauda-home-hero .rating .bottom {
		gap: .75rem;
	}

	.nauda-page .nauda-home-hero .rating .desc .x {
		font-size: 1.125rem;
	}

	.nauda-page .nauda-home-hero .rating .desc .c {
		font-size: .875rem;
	}
}


/* assets/css/partnership.css */
@media (max-width: 849px) {
	.nauda-page.nauda-partnership-page .nauda-partner-intro .cot2 > .col:first-child > .col-inner { padding-right: 1.5rem; }
	.nauda-page.nauda-partnership-page .nauda-partner-intro .cot2 > .col:nth-child(2) > .col-inner { padding-left: .5rem; }
	.nauda-page.nauda-partnership-page .nauda-partner-services .ba > .col { min-height: 0; }
	.nauda-page.nauda-partnership-page .nauda-partner-timeline .moc-h { grid-template-columns: 9rem 1fr; }
}

@media (max-width: 549px) {
	.nauda-page.nauda-partnership-page .muc > .section-content > .wrap { padding-inline: 20px; }
	.nauda-page.nauda-partnership-page .muc .gian { flex-wrap: wrap; }
	.nauda-page.nauda-partnership-page .muc .gian::after { flex-basis: 100%; }
	.nauda-page.nauda-partnership-page .nauda-page-hero h1 { font-size: clamp(2.6rem, 10vw, 3.6rem); }
	.nauda-page.nauda-partnership-page .nauda-partner-intro .cot2 > .col:first-child > .col-inner,
	.nauda-page.nauda-partnership-page .nauda-partner-intro .cot2 > .col:nth-child(2) > .col-inner { padding-inline: 0; }
	.nauda-page.nauda-partnership-page .nauda-partner-intro .cot2 > .col:nth-child(2) { margin-top: 1.5rem; }
	.nauda-page.nauda-partnership-page .so-hang > .col { border-left: 0; border-top: 1px solid var(--partner-line); }
	.nauda-page.nauda-partnership-page .so-hang > .col:first-child { border-top: 0; }
	.nauda-page.nauda-partnership-page .nauda-partner-services .ba { margin-top: 1.2rem; }
	.nauda-page.nauda-partnership-page .nauda-partner-services .ba > .col { border-left: 0 !important; border-top: 1px solid var(--partner-line); }
	.nauda-page.nauda-partnership-page .nauda-partner-services .ba > .col:first-child { border-top: 0; }
	.nauda-page.nauda-partnership-page .nauda-partner-services .ba + .ba > .col:first-child { border-top: 1px solid var(--partner-line); }
	.nauda-page.nauda-partnership-page .nauda-partner-fit .the { padding: 1.35rem; }
	.nauda-page.nauda-partnership-page .nauda-partner-timeline .moc-h { grid-template-columns: 1fr; gap: .4rem; }
	.nauda-page.nauda-partnership-page .nauda-partner-faq .accordion-title { min-height: 3.75rem; padding-left: 2.75rem; font-size: .94rem; }
	.nauda-page.nauda-partnership-page .nauda-partner-faq .accordion-title .toggle { width: 1.875rem; height: 1.875rem; }
	.nauda-page.nauda-partnership-page .nauda-partner-faq .accordion-inner { padding-left: 2.75rem; }
	.nauda-page.nauda-partnership-page .nauda-partner-form .don-luoi { grid-template-columns: 1fr; }
}


/* assets/css/products.css */
@media (min-width: 850px) {
	.nauda-page .nauda-products-cards > .col,
	.nauda-page .nauda-products-menu > .col,
	.nauda-page .nauda-products-roast > .col {
		padding-inline: 1.75rem;
	}

	.nauda-page .nauda-products-cards > .col:first-child,
	.nauda-page .nauda-products-menu > .col:first-child,
	.nauda-page .nauda-products-roast > .col:first-child {
		padding-left: 15px;
	}

	.nauda-page .nauda-products-cards > .col:last-child,
	.nauda-page .nauda-products-menu > .col:last-child,
	.nauda-page .nauda-products-roast > .col:last-child {
		padding-right: 15px;
	}
}

@media (max-width: 849px) {
	.nauda-page .nauda-products-criteria {
		row-gap: 1.5rem;
	}

	.nauda-page .nauda-products-criteria > .col:nth-child(odd) {
		border-left: 0;
	}

	.nauda-page .nauda-products-specs dl {
		grid-template-columns: 4.5rem minmax(0, 1fr);
		column-gap: .75rem;
	}
}

@media (max-width: 549px) {
	.nauda-page .nauda-products-section .row:not(.nauda-products-menu-item) {
		row-gap: 2rem;
	}

	.nauda-page .nauda-products-criteria > .col + .col {
		border-left: 0;
	}

	.nauda-page .nauda-products-card-title h3 {
		min-height: 0;
	}
}

@media (hover: hover) and (pointer: fine) {
	.nauda-products-menu-item:hover {
		background-color: rgba(113, 37, 47, .05);
	}

	.nauda-products-menu-item:hover .nauda-products-menu-name > .col-inner {
		transform: translateX(1rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nauda-products-menu-item,
	.nauda-products-menu-item .nauda-products-menu-name > .col-inner {
		transition: none;
	}
}


/* assets/css/recruitment.css */
@media (max-width: 849px) {
	.nauda-page.nauda-recruitment-page .bon > .col:nth-child(3) {
		border-left: 0;
	}

	.nauda-page.nauda-recruitment-page .ba > .col + .col {
		border-top: 1px solid var(--vien);
		border-left: 0;
	}
}

@media (max-width: 549px) {
	.nauda-page.nauda-recruitment-page .tuyen-viec .wrap,
	.nauda-page.nauda-recruitment-page .tuyen-dieu .wrap,
	.nauda-page.nauda-recruitment-page .tuyen-buoc .wrap,
	.nauda-page.nauda-recruitment-page .tuyen-lien-he .wrap {
		padding-inline: 20px;
	}

	.nauda-page.nauda-recruitment-page .viec {
		margin-top: 1.5rem;
	}

	.nauda-page.nauda-recruitment-page .viec dl {
		grid-template-columns: 5.75rem minmax(0, 1fr);
	}

	.nauda-page.nauda-recruitment-page .bon > .col + .col {
		border-top: 1px solid var(--vien);
		border-left: 0;
	}

	.nauda-page.nauda-recruitment-page .don-luoi {
		grid-template-columns: 1fr;
	}
}


/* assets/css/values.css */
@media (min-width: 850px) {
	.nauda-page .nauda-values-metrics {
		padding-right: 2.5rem;
	}
}

@media (max-width: 849px) {
	.nauda-page .nauda-values-cards {
		row-gap: 2rem;
	}

	.nauda-page .nauda-values-card:nth-child(odd) {
		border-left: 0;
	}

	.nauda-page .nauda-values-photo {
		margin-top: 1.5rem;
	}

	.nauda-page .nauda-values-photo > .col-inner {
		max-width: 28rem;
	}
}

@media (max-width: 549px) {
	.nauda-page .nauda-values-card + .nauda-values-card {
		border-left: 0;
	}

	.nauda-page .nauda-values-filter {
		row-gap: 2rem;
		margin-top: 2rem;
		padding-top: 2rem;
	}

	.nauda-page .nauda-values-filter .tay {
		max-width: 26ch;
	}

	.nauda-page .nauda-values-metric > .col {
		padding-inline: 0;
	}

	.nauda-page .nauda-values-metric-label {
		margin-bottom: .625rem;
	}
}

/* Nút banner có vùng chạm đủ lớn ở mọi độ rộng. */
.nauda-page .nauda-home-hero .text-inner > a.button {
	min-height: 44px;
}


@media (max-width: 849px) and (max-height: 450px) and (orientation: landscape) {
	.off-canvas-center .mfp-content {
		margin-top: .75rem !important;
		max-height: calc(100vh - 1.5rem);
		max-height: calc(100dvh - 1.5rem);
	}

	.off-canvas-center .nav-vertical > li > a {
		padding-block: .5rem !important;
		font-size: 1rem !important;
	}
}

@media (min-width: 641px) and (max-width: 849px) {
	.nauda-page .nauda-home-hero .text-inner > a.button {
		padding-block: .625rem;
		font-size: .875rem;
		line-height: 1.2;
	}
}

@media (min-width: 641px) and (max-width: 767px) {
	.nauda-page .nauda-home-hero .rating {
		width: min(16rem, calc(100% - 2rem)) !important;
	}
}

/* Chừa vùng chạm và khoảng trống cho CTA và thẻ đánh giá trên điện thoại. */
@media (max-width: 40rem) {
	.nauda-page .nauda-home-hero .banner {
		padding-top: 54rem !important;
	}

	.nauda-page .nauda-home-hero .text-box:not(.rating) .text-inner > p:not(.tay, .nhan) {
		font-size: clamp(.875rem, 3.5vw, 1rem);
		line-height: 1.55;
	}

	.nauda-page .nauda-home-hero .text-inner > a.button {
		padding: .625rem .875rem;
		font-size: clamp(.8125rem, 3.4vw, .875rem);
		line-height: 1.2;
		white-space: nowrap;
	}

	.nauda-page .nauda-home-hero .rating {
		left: 50% !important;
		bottom: 0 !important;
	}
}

@media (max-width: 430px) {
	.nauda-page .nauda-home-hero .banner {
		padding-top: 56rem !important;
	}

	.nauda-page .nauda-home-hero .text-inner > a.button {
		display: flex;
		width: min(100%, 17rem);
		margin: 0 0 .625rem;
	}
}

/* Ô nhập không kích hoạt phóng to tự động trên Safari iOS. */
@media (max-width: 849px) {
	.nauda-page a.button:not(.icon, .circle) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
	}

	.nauda-page .don input:not([type='submit']),
	.nauda-page .don select,
	.nauda-page .don textarea {
		min-width: 0;
		font-size: 1rem;
	}

	.nauda-page #main .don input:not([type='submit']),
	.nauda-page #main .don select {
		min-height: 44px;
	}

	.nauda-page .don button,
	.nauda-page .don .wpcf7-submit {
		min-height: 44px;
		font-size: .875rem;
	}
}

/* Giữ giao diện nút của shortcode Nâu Đá trong UX Builder, không đè lên nút điều khiển của Builder. */
:is(body:not(.ux-builder-iframe) .button, body.ux-builder-iframe .button[data-nauda-button]):not(.icon):not(.circle):not(.is-underline) {
	--clr: #A44629;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	max-width: 100%;
	min-height: 44px;
	padding: .75rem 1.5rem .75rem 20px;
	border: 0;
	border-radius: 10rem;
	background-color: var(--clr);
	color: #fff;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background-color .3s ease;
}

:is(body:not(.ux-builder-iframe) .button, body.ux-builder-iframe .button[data-nauda-button]):not(.icon):not(.circle):not(.is-underline):hover {
	background-color: #000;
	color: #fff;
}

:is(body:not(.ux-builder-iframe) .button, body.ux-builder-iframe .button[data-nauda-button]):not(.icon):not(.circle):not(.is-underline):focus-visible {
	outline: 2px solid var(--clr);
	outline-offset: 3px;
}

:is(body:not(.ux-builder-iframe) .button, body.ux-builder-iframe .button[data-nauda-button]) .button__label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

:is(body:not(.ux-builder-iframe) .button, body.ux-builder-iframe .button[data-nauda-button]) .button__icon-wrapper {
	position: relative;
	display: grid;
	flex: 0 0 25px;
	place-items: center;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background-color: #fff;
	color: var(--clr);
	overflow: hidden;
}

:is(body:not(.ux-builder-iframe) .button, body.ux-builder-iframe .button[data-nauda-button]):hover .button__icon-wrapper {
	color: #000;
}

:is(body:not(.ux-builder-iframe) .button, body.ux-builder-iframe .button[data-nauda-button]) .button__icon-svg {
	width: 16px;
	height: 16px;
	transition: transform .3s ease-in-out;
}

:is(body:not(.ux-builder-iframe) .button, body.ux-builder-iframe .button[data-nauda-button]) .button__icon-svg--copy {
	position: absolute;
	transform: translate(-150%, 150%);
}

:is(body:not(.ux-builder-iframe) .button, body.ux-builder-iframe .button[data-nauda-button]):hover .button__icon-svg:first-child {
	transform: translate(150%, -150%);
}

:is(body:not(.ux-builder-iframe) .button, body.ux-builder-iframe .button[data-nauda-button]):hover .button__icon-svg--copy {
	transform: translate(0);
	transition-delay: .1s;
}

@media (prefers-reduced-motion: reduce) {
	:is(body:not(.ux-builder-iframe) .button, body.ux-builder-iframe .button[data-nauda-button]),
	:is(body:not(.ux-builder-iframe) .button, body.ux-builder-iframe .button[data-nauda-button]) .button__icon-svg {
		transition: none;
	}
}