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

/*************** ADD CUSTOM CSS HERE.   ***************/

/* =========================================================
   AN PHƯƠNG — Tông màu
   Vàng chủ đạo · Đỏ điểm nhấn · Trắng nền · Đen chữ · Roboto
   ========================================================= */
:root {
	--ap-yellow: #ffc20e;
	--ap-yellow-dark: #e5a900;
	--ap-yellow-soft: #fff7dc;
	--ap-red: #d7141a;
	--ap-red-dark: #b00f14;
	--ap-black: #111111;
	--ap-text: #1a1a1a;
	--ap-muted: #5f5f5f;
	--ap-line: #ececec;
	--ap-bg: #ffffff;
	--ap-soft: #fafaf7;
	--ap-radius: 8px;
	--ap-shadow: 0 3px 14px rgba(0, 0, 0, .07);
	--ap-shadow-hover: 0 14px 30px rgba(0, 0, 0, .14);
	--ap-ease: cubic-bezier(.22, .61, .36, 1);
	--ap-ease-out: cubic-bezier(.16, 1, .3, 1);

	--primary-color: #ffc20e;
	--fs-color-primary: #ffc20e;
	--fs-color-secondary: #d7141a;
	--fs-color-base: #1a1a1a;
	--fs-experimental-link-color: #1a1a1a;
	--fs-experimental-link-color-hover: #d7141a;
}

/* ---------- Font Roboto toàn site ---------- */
html, body, button, input, select, textarea, optgroup,
.nav > li > a, .nav-dropdown, .mobile-sidebar-levels-2 .nav > li > ul > li > a,
h1, h2, h3, h4, h5, h6, .heading-font, .alt-font, .banner h1, .banner h2,
.section-title, .button, .product-title, .post-title, .price, .amount,
.off-canvas-center .nav-sidebar.nav-vertical > li > a, .tooltipster-content {
	font-family: "Roboto", Arial, Helvetica, sans-serif !important;
}
.alt-font { font-weight: 500 !important; }
body {
	background: var(--ap-bg);
	color: var(--ap-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { color: var(--ap-black); }
a { color: var(--ap-text); }
a:hover { color: var(--ap-red); }
::selection { background: var(--ap-yellow); color: var(--ap-black); }
html { scroll-behavior: smooth; }

/* =========================================================
   HEADER
   ========================================================= */

/* Top bar vàng, chữ đen, hotline đỏ */
#top-bar.header-top {
	background-color: var(--ap-yellow);
	min-height: 36px;
	color: var(--ap-black);
}
#top-bar.nav-dark .nav > li > a,
#top-bar .social-icons .icon { color: var(--ap-black) !important; opacity: .85; }
#top-bar .social-icons .icon:hover { color: var(--ap-red) !important; opacity: 1; }
#top-bar .html_topbar_left strong { display: none; }
#top-bar .html_topbar_left::before {
	content: "☎ Hotline: 0945 89 8899 – 0949 058 068 – 0978 020 444";
	color: var(--ap-black);
	font-weight: 700;
	letter-spacing: .2px;
}
#top-bar .top-bar-nav > li > a[href*="menu_locations"],
.header-newsletter-item { display: none !important; }
.social-icons a[href="http://url"] { display: none !important; }

/* Header chính trắng */
.header-main {
	background: #fff;
	border-bottom: 3px solid var(--ap-yellow);
	transition: box-shadow .3s var(--ap-ease);
}
#header.ap-scrolled .header-main { box-shadow: 0 6px 24px rgba(0, 0, 0, .1); }
.stuck .header-main { animation: apDrop .45s var(--ap-ease-out); }
@keyframes apDrop { from { transform: translateY(-100%); } to { transform: none; } }
#logo img { padding: 6px 0; object-fit: contain; transition: transform .35s var(--ap-ease); }
#logo a:hover img { transform: scale(1.04); }

.header-nav-main > li { margin: 0 9px; }
.header-nav-main > li > a.nav-top-link {
	color: var(--ap-black);
	font-weight: 700;
	font-size: 14px;
	padding: 10px 2px;
	position: relative;
	transition: color .25s;
}
.header-nav-main > li > a.nav-top-link::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: var(--ap-yellow);
	border-radius: 3px;
	transform: scaleX(0);
	transition: transform .3s var(--ap-ease);
}
.header-nav-main > li:hover > a.nav-top-link,
.header-nav-main > li.active > a.nav-top-link,
.header-nav-main > li.current-menu-item > a.nav-top-link,
.header-nav-main > li.current-menu-ancestor > a.nav-top-link { color: var(--ap-black); }
.header-nav-main > li:hover > a.nav-top-link::after,
.header-nav-main > li.active > a.nav-top-link::after,
.header-nav-main > li.current-menu-item > a.nav-top-link::after,
.header-nav-main > li.current-menu-ancestor > a.nav-top-link::after { transform: scaleX(1); }
.header-nav-main .icon-angle-down { color: var(--ap-red); }

/* Ẩn tài khoản / giỏ hàng (site báo giá "Liên hệ") */
.header-nav .account-item,
.header-nav .cart-item,
.header-nav .header-divider,
.mobile-nav .cart-item,
.nav-sidebar .account-item { display: none !important; }

/* Dropdown */
.nav-dropdown {
	border: 0 !important;
	border-top: 3px solid var(--ap-yellow) !important;
	border-radius: 0 0 var(--ap-radius) var(--ap-radius);
	box-shadow: var(--ap-shadow-hover) !important;
	padding: 12px 0;
}
.nav-dropdown-has-arrow li.has-dropdown:after { border-bottom-color: var(--ap-yellow) !important; }
.header-nav-main > li > .nav-dropdown { margin-top: 10px; transition: opacity .25s var(--ap-ease), margin-top .3s var(--ap-ease), visibility .25s; }
.header-nav-main > li.has-dropdown:hover > .nav-dropdown,
.header-nav-main > li.current-dropdown > .nav-dropdown { margin-top: 0; }
.nav-dropdown li a {
	font-size: 13px;
	font-weight: 600;
	color: var(--ap-text);
	transition: color .2s, padding-left .25s var(--ap-ease);
}
.nav-dropdown li a:hover { color: var(--ap-red); padding-left: 26px; }
.nav-dropdown .nav-dropdown-col > a {
	color: var(--ap-black) !important;
	font-weight: 800;
	border-bottom: 2px solid var(--ap-yellow);
}

/* Menu mobile */
.off-canvas .nav-vertical li a:hover,
.nav-sidebar li.active > a { color: var(--ap-red); }

/* =========================================================
   TIÊU ĐỀ SECTION
   ========================================================= */
.section-title-container { margin-bottom: 24px; }
.section-title .section-title-main {
	color: var(--ap-black);
	font-size: 26px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .3px;
}
.section-title-center b {
	background-color: var(--ap-yellow);
	height: 3px;
	opacity: 1;
	transform-origin: center;
	transition: transform 1s var(--ap-ease-out) .15s;
}
.section-title .sub-title {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 400;
	color: var(--ap-muted);
	letter-spacing: 0;
	text-transform: none;
}
.section-title-normal { border-bottom: 2px solid var(--ap-line); }
.section-title-normal span {
	border-bottom: 3px solid var(--ap-yellow);
	margin-bottom: -2px;
	padding-bottom: 8px;
}
.section-title-normal .section-title-main { font-size: 20px; }
.is-divider { background-color: var(--ap-yellow); }

/* =========================================================
   NÚT
   ========================================================= */
.button { position: relative; overflow: hidden; transition: all .3s var(--ap-ease) !important; }
.button.primary:not(.is-outline),
.wpcf7-submit {
	background-color: var(--ap-yellow) !important;
	border-color: var(--ap-yellow) !important;
	color: var(--ap-black) !important;
	border-radius: 999px;
	font-weight: 800;
	text-transform: uppercase;
	padding: 0 30px;
}
.button.primary:not(.is-outline):hover,
.wpcf7-submit:hover {
	background-color: var(--ap-black) !important;
	border-color: var(--ap-black) !important;
	color: var(--ap-yellow) !important;
	box-shadow: 0 8px 18px rgba(0, 0, 0, .2);
}
.button.primary.is-outline {
	color: var(--ap-black);
	border: 2px solid var(--ap-black);
	border-radius: 999px;
	font-weight: 800;
	padding: 0 30px;
}
.button.primary.is-outline:hover {
	background-color: var(--ap-yellow);
	border-color: var(--ap-yellow);
	color: var(--ap-black);
	box-shadow: 0 8px 18px rgba(255, 194, 14, .4);
}
.button.btn-lien-he { background-color: var(--ap-red) !important; border-color: var(--ap-red) !important; color: #fff !important; }
.button.btn-lien-he:hover { background-color: var(--ap-red-dark) !important; border-color: var(--ap-red-dark) !important; color: #fff !important; }
.button::after {
	content: "";
	position: absolute;
	top: 0; left: -75%;
	width: 50%; height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .5), transparent);
	transform: skewX(-20deg);
	pointer-events: none;
}
.button:hover::after { animation: apShine .8s var(--ap-ease); }
@keyframes apShine { to { left: 130%; } }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0) scale(.97); }
.btn-them { margin-top: 18px; }

/* =========================================================
   TRANG CHỦ
   ========================================================= */

/* --- Banner (không hiệu ứng) --- */
.home .slider-wrapper .img,
.home .slider-wrapper .img-inner img { width: 100% !important; }
.home .slider-wrapper .img-inner img { display: block; height: auto; }
.flickity-page-dots .dot { border-color: #fff; background: rgba(255, 255, 255, .6); opacity: 1; }
.flickity-page-dots .dot.is-selected { background: var(--ap-yellow); border-color: var(--ap-yellow); }
.flickity-prev-next-button { transition: opacity .3s, color .3s; }
.flickity-prev-next-button:hover { color: var(--ap-yellow) !important; }

/* --- Giới thiệu ngắn --- */
.home .row-solid .img-inner { border-radius: var(--ap-radius); overflow: hidden; }
.home .row-solid .img-inner img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform .8s var(--ap-ease-out);
}
.home .row-solid .img:hover .img-inner img { transform: scale(1.06); }
.gioi-thieu-home { font-size: 15px; line-height: 1.8; text-align: justify; color: var(--ap-text); }
.gioi-thieu-home p:first-child strong {
	display: block;
	color: var(--ap-black);
	font-size: 22px;
	line-height: 1.35;
	text-align: left;
	margin-bottom: 6px;
	padding-left: 14px;
	border-left: 5px solid var(--ap-yellow);
	text-transform: uppercase;
}
.gioi-thieu-home + .btn-xem-them { margin-top: 10px; }

/* --- Dịch vụ: nền vàng --- */
.section:has(.dich-vu-home),
.section:has(.dich-vu-home) .section-bg { background-color: var(--ap-yellow) !important; }
.section:has(.dich-vu-home) .section-title-main { color: var(--ap-black); }
.section:has(.dich-vu-home) .section-title-center b { background-color: var(--ap-black); }
.dich-vu-home .post-item .col-inner {
	background: #fff;
	border-radius: var(--ap-radius);
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
	height: 100%;
	transition: transform .4s var(--ap-ease), box-shadow .4s var(--ap-ease);
}
.dich-vu-home .post-item:hover .col-inner { transform: translateY(-5px); box-shadow: 0 16px 30px rgba(0, 0, 0, .2); }
.dich-vu-home .box-text { padding: 14px 16px 18px; }
.dich-vu-home .post-title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.8em;
}
.dich-vu-home .post-title a { color: var(--ap-black); }
.dich-vu-home .post-title a:hover { color: var(--ap-red); }
.dich-vu-home .is-divider { background-color: var(--ap-red); max-width: 40px; height: 2px; }
.dich-vu-home .from_the_blog_excerpt { font-size: 13px; color: var(--ap-muted); }
.dich-vu-home .flickity-prev-next-button { color: var(--ap-black) !important; }

/* --- Khối sản phẩm theo danh mục --- */
.section:has(.product-home):nth-of-type(odd) { background: var(--ap-soft); }

/* Thẻ sản phẩm — ảnh tỉ lệ 569 x 361, hiển thị trọn ảnh (không cắt) */
.product-small.col .col-inner {
	position: relative;
	background: #fff;
	border: 1px solid var(--ap-line);
	border-radius: var(--ap-radius);
	overflow: hidden;
	box-shadow: var(--ap-shadow);
	height: 100%;
	transition: transform .4s var(--ap-ease), box-shadow .4s var(--ap-ease), border-color .3s;
}
.product-small.col:hover .col-inner {
	transform: translateY(-4px);
	box-shadow: var(--ap-shadow-hover);
	border-color: var(--ap-yellow);
}
.product-small.col .col-inner::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: var(--ap-yellow);
	transform: scaleX(0);
	transition: transform .4s var(--ap-ease);
}
.product-small.col:hover .col-inner::after { transform: scaleX(1); }
.product-small .box-image {
	aspect-ratio: 569 / 361;
	background: #fff;
	overflow: hidden;
}
.product-small .box-image > div,
.product-small .box-image a { display: block; height: 100%; }
.product-small .box-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	transition: transform .7s var(--ap-ease-out), opacity .5s !important;
}
.product-small.col:hover .box-image img { transform: scale(1.05); }
.product-small .box-text-products { padding: 12px 10px 16px; text-align: center; border-top: 1px solid var(--ap-line); }
.product-small p.category { display: none; }
.product-small .product-title a {
	color: var(--ap-black);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.4;
	text-transform: uppercase;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.8em;
	transition: color .25s;
}
.product-small .product-title a:hover { color: var(--ap-red); }
.product-small .price-wrapper { margin-top: 4px; }
.apimp-contact,
.price .apimp-contact {
	color: var(--ap-red) !important;
	font-weight: 700;
	font-size: 14px;
}
.product-small .apimp-contact::before { content: "☎ "; }

/* Bỏ Quick View */
.quick-view,
a.quick-view,
.grid-tools .quick-view,
.image-tools.grid-tools:has(.quick-view) { display: none !important; }

/* Trang chi tiết sản phẩm: ảnh cũng giữ tỉ lệ gốc */
.product-gallery .woocommerce-product-gallery__image img { width: 100%; height: auto; object-fit: contain; }
.single-product .product-info .price .apimp-contact { font-size: 22px; }

/* --- Công trình tiêu biểu --- */
.cong-trinh-home .post-item .col-inner {
	border-radius: var(--ap-radius);
	overflow: hidden;
	transition: transform .4s var(--ap-ease), box-shadow .4s var(--ap-ease);
}
.cong-trinh-home .post-item:hover .col-inner { transform: translateY(-5px); box-shadow: 0 16px 30px rgba(0, 0, 0, .2); }
.cong-trinh-home .box-overlay .overlay { background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .1) 60%) !important; }
.cong-trinh-home .post-title { font-size: 15px; font-weight: 700; text-transform: uppercase; }
.cong-trinh-home .is-divider { background-color: var(--ap-yellow); opacity: 1; height: 3px; }
.cong-trinh-home .post-title { transition: letter-spacing .4s var(--ap-ease); }
.cong-trinh-home .post-item:hover .post-title { letter-spacing: .4px; }

/* --- Bài viết: ảnh zoom khi hover --- */
.post-item .box-image { overflow: hidden; }
.post-item .box-image img { transition: transform .8s var(--ap-ease-out); }
.post-item:hover .box-image img { transform: scale(1.08); }

/* --- Đăng ký nhận tin: nền đen, điểm vàng --- */
.home .section:has(.wpcf7),
.home .section:has(.wpcf7) .section-bg { background-color: var(--ap-black) !important; }
.home .section:has(.wpcf7) .section-title-main { color: var(--ap-yellow); }
.home .section:has(.wpcf7) .section-title-center b { background-color: var(--ap-yellow); }
.home .section:has(.wpcf7) .col-inner > p { color: rgba(255, 255, 255, .85); }
.home .wpcf7-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 14px;
	text-align: left;
}
.home .wpcf7-form > p:nth-of-type(5),
.home .wpcf7-form > p:last-of-type,
.home .wpcf7-form .wpcf7-response-output,
.home .wpcf7-form .hidden-fields-container { grid-column: 1 / -1; }
.home .wpcf7-form > p:last-of-type { text-align: center; }
.home .wpcf7 input:not([type="submit"]),
.home .wpcf7 textarea {
	border: 1px solid #333;
	background: #1d1d1d;
	color: #fff;
	border-radius: var(--ap-radius);
	box-shadow: none;
	height: 44px;
}
.home .wpcf7 input::placeholder,
.home .wpcf7 textarea::placeholder { color: #9a9a9a; }
.home .wpcf7 textarea { height: 90px; min-height: 90px; }
.home .wpcf7-submit:hover { background-color: #fff !important; border-color: #fff !important; color: var(--ap-black) !important; }

/* --- Tin tức + video --- */
.tin-tuc-home .post-item { padding-bottom: 14px; }
.tin-tuc-home .post-item .col-inner { border-bottom: 1px dashed #e2e2e2; padding-bottom: 14px; }
.tin-tuc-home .box-vertical .box-image { border-radius: var(--ap-radius); overflow: hidden; }
.tin-tuc-home .box-text { text-align: left !important; padding: 0 0 0 16px; }
.tin-tuc-home .post-title { font-size: 15px; font-weight: 700; line-height: 1.4; }
.tin-tuc-home .post-title a {
	color: var(--ap-black);
	background: linear-gradient(var(--ap-yellow), var(--ap-yellow)) left bottom / 0 3px no-repeat;
	transition: background-size .4s var(--ap-ease), color .25s;
}
.tin-tuc-home .post-item:hover .post-title a { background-size: 100% 3px; }
.tin-tuc-home .post-meta { color: var(--ap-red); font-weight: 600; opacity: 1; }
.tin-tuc-home .is-divider { display: none; }
.tin-tuc-home .from_the_blog_excerpt { font-size: 13px; color: var(--ap-muted); margin-top: 4px; }
.video.video-fit {
	border-radius: var(--ap-radius);
	overflow: hidden;
	box-shadow: var(--ap-shadow);
	transition: transform .4s var(--ap-ease), box-shadow .4s;
}
.video.video-fit:hover { transform: translateY(-3px); box-shadow: var(--ap-shadow-hover); }
.row-solid .video.video-fit { margin-bottom: 0; }

/* =========================================================
   BÀI VIẾT / DANH MỤC
   ========================================================= */
.blog-archive .post-item .col-inner,
.blog-wrapper .post-item .col-inner { border-radius: var(--ap-radius); overflow: hidden; }
.entry-title { font-weight: 700; color: var(--ap-black); }
.entry-content h2,
.entry-content h3 { color: var(--ap-black); border-left: 4px solid var(--ap-yellow); padding-left: 12px; }
.entry-content a { color: var(--ap-red); }
.entry-content img { border-radius: var(--ap-radius); }
.badge-inner.bg-fill,
.post-item .badge .badge-inner { background-color: var(--ap-yellow) !important; color: var(--ap-black) !important; }
.widget .widget-title,
.widget-area .widget-title { color: var(--ap-black); }
.page-title { background: var(--ap-soft); }
.woocommerce-breadcrumb a:hover,
.breadcrumbs a:hover { color: var(--ap-red); }

/* =========================================================
   TRANG LIÊN HỆ
   ========================================================= */
.thong-tin-lien-he {
	background: var(--ap-yellow-soft);
	border-left: 5px solid var(--ap-yellow);
	border-radius: var(--ap-radius);
	padding: 22px 24px;
	line-height: 1.8;
}
.thong-tin-lien-he h3 {
	color: var(--ap-black);
	text-transform: uppercase;
	font-size: 17px;
	margin-bottom: 10px;
}
.thong-tin-lien-he p { margin-bottom: 6px; }
.thong-tin-lien-he strong { color: var(--ap-black); }
.thong-tin-lien-he a { color: var(--ap-red); font-weight: 700; }
.page:not(.home) .wpcf7 input:not([type="submit"]),
.page:not(.home) .wpcf7 textarea {
	border-radius: var(--ap-radius);
	border-color: #ddd;
	box-shadow: none;
}
.wpcf7 input:not([type="submit"]),
.wpcf7 textarea { transition: border-color .25s, box-shadow .25s; }
.wpcf7 input:not([type="submit"]):focus,
.wpcf7 textarea:focus {
	border-color: var(--ap-yellow) !important;
	box-shadow: 0 0 0 3px rgba(255, 194, 14, .3) !important;
}

/* =========================================================
   TRANG GIỚI THIỆU
   ========================================================= */
.noi-dung-gioi-thieu { font-size: 16px; line-height: 1.8; text-align: justify; }
.noi-dung-gioi-thieu h1,
.noi-dung-gioi-thieu h2,
.noi-dung-gioi-thieu h3 {
	color: var(--ap-black);
	font-weight: 800;
	text-align: left;
	margin-top: 1.2em;
	padding-left: 12px;
	border-left: 5px solid var(--ap-yellow);
}
.noi-dung-gioi-thieu strong { color: var(--ap-black); }
.noi-dung-gioi-thieu img { border-radius: var(--ap-radius); margin: 10px 0; }

/* =========================================================
   FOOTER — nền đen, tiêu đề vàng
   ========================================================= */
.footer-wrapper .footer-1,
.footer-wrapper .footer-2 {
	background-color: var(--ap-black) !important;
	color: rgba(255, 255, 255, .8);
	border-top: 4px solid var(--ap-yellow);
	padding-top: 40px;
}
.footer-wrapper .footer-1 h2,
.footer-wrapper .footer-1 .widget-title,
.footer-wrapper .footer-2 .widget-title {
	color: var(--ap-yellow);
	font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
	position: relative;
	padding-bottom: 8px;
}
.footer-wrapper .footer-1 h2::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 36px; height: 2px;
	background: var(--ap-red);
}
.footer-wrapper .footer-1 a,
.footer-wrapper .footer-2 a { color: rgba(255, 255, 255, .85); transition: color .25s, padding-left .25s var(--ap-ease); }
.footer-wrapper .footer-1 li a:hover,
.footer-wrapper .footer-2 li a:hover { color: var(--ap-yellow); padding-left: 6px; }
.footer-wrapper .footer-1 li { border-color: rgba(255, 255, 255, .1) !important; }
.absolute-footer {
	background-color: #000 !important;
	color: rgba(255, 255, 255, .7);
	padding: 12px 0;
}
.absolute-footer a,
.absolute-footer strong { color: var(--ap-yellow); }
.absolute-footer .payment-icons { display: none; }

#top-link {
	border-color: var(--ap-yellow);
	background: var(--ap-yellow);
	color: var(--ap-black);
	transition: all .3s var(--ap-ease);
}
#top-link:hover { background: var(--ap-black); color: var(--ap-yellow); transform: translateY(-4px); }

/* =========================================================
   HIỆU ỨNG KHI CUỘN (class do JS trong functions.php gắn)
   ========================================================= */
.ap-anim #wrapper { animation: apPageIn .6s var(--ap-ease-out) both; }
@keyframes apPageIn { from { opacity: 0; } to { opacity: 1; } }

.ap-anim .ap-reveal {
	opacity: 0;
	transition: opacity .8s var(--ap-ease-out), transform .8s var(--ap-ease-out);
	will-change: opacity, transform;
}
.ap-anim .ap-up    { transform: translate3d(0, 34px, 0); }
.ap-anim .ap-left  { transform: translate3d(-40px, 0, 0); }
.ap-anim .ap-right { transform: translate3d(40px, 0, 0); }
.ap-anim .ap-zoom  { transform: scale(.92); }
.ap-anim .ap-reveal.ap-in { opacity: 1; transform: none; }
.ap-anim .section-title-container.ap-reveal .section-title-center b { transform: scaleX(0); }
.ap-anim .section-title-container.ap-in .section-title-center b { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.ap-reveal { opacity: 1 !important; transform: none !important; }
}


/* =========================================================
   MENU "SẢN PHẨM" — lưới 3 cột đều nhau (thay layout cột lỗi)
   ========================================================= */
.header-nav-main .nav-dropdown:has(> .nav-dropdown-col) {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px 18px;
	width: 780px;
	max-width: calc(100vw - 40px);
	padding: 18px 20px 20px !important;
	white-space: normal;
}
.header-nav-main .nav-dropdown:has(> .nav-dropdown-col) > li {
	display: block !important;
	width: auto !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}
/* Mục cấp 1 (danh mục chính) */
.header-nav-main .nav-dropdown:has(> .nav-dropdown-col) > li > a {
	display: flex !important;
	align-items: center;
	gap: 8px;
	padding: 10px 12px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 6px;
	color: var(--ap-black) !important;
	font-size: 13.5px !important;
	font-weight: 800 !important;
	line-height: 1.35;
	text-transform: uppercase;
	white-space: normal;
	transition: background-color .25s, color .25s, padding-left .25s var(--ap-ease) !important;
}
.header-nav-main .nav-dropdown:has(> .nav-dropdown-col) > li > a::before {
	content: "";
	flex: 0 0 6px;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--ap-yellow);
	transition: background-color .25s, transform .25s;
}
.header-nav-main .nav-dropdown:has(> .nav-dropdown-col) > li > a:hover {
	background: var(--ap-yellow-soft);
	color: var(--ap-red) !important;
	padding-left: 16px !important;
}
.header-nav-main .nav-dropdown:has(> .nav-dropdown-col) > li > a:hover::before { background: var(--ap-red); transform: scale(1.3); }

/* Mục cấp 2 (danh mục con) */
.header-nav-main .nav-dropdown-col > ul.nav-column {
	display: block !important;
	position: static !important;
	margin: 0 0 6px 18px !important;
	padding: 2px 0 2px 10px !important;
	border-left: 2px solid var(--ap-line);
	box-shadow: none !important;
	background: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}
.header-nav-main .nav-dropdown-col > ul.nav-column > li { padding: 0 !important; border: 0 !important; }
.header-nav-main .nav-dropdown-col > ul.nav-column > li > a {
	display: block;
	padding: 6px 8px !important;
	color: var(--ap-muted) !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	border: 0 !important;
	white-space: normal;
	transition: color .2s, padding-left .25s var(--ap-ease) !important;
}
.header-nav-main .nav-dropdown-col > ul.nav-column > li > a:hover {
	color: var(--ap-red) !important;
	padding-left: 14px !important;
}
/* bỏ style cũ áp cho tiêu đề cột */
.nav-dropdown .nav-dropdown-col > a { border-bottom: 0 !important; }

/* =========================================================
   TRANG SHOP / DANH MỤC SẢN PHẨM
   ========================================================= */
.shop-page-title.page-title,
.category-page-title.page-title {
	background: linear-gradient(90deg, var(--ap-yellow-soft) 0%, #fff 75%);
	border-bottom: 1px solid var(--ap-line);
	margin-bottom: 30px;
}
.shop-page-title .page-title-inner { padding-top: 22px; padding-bottom: 22px; align-items: center; }
.woocommerce-breadcrumb.breadcrumbs {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .3px;
	color: var(--ap-black);
}
.woocommerce-breadcrumb.breadcrumbs a { color: var(--ap-muted); font-weight: 600; transition: color .2s; }
.woocommerce-breadcrumb.breadcrumbs a:hover { color: var(--ap-red); }
.woocommerce-breadcrumb .divider { color: var(--ap-yellow-dark); margin: 0 8px; font-weight: 800; }

.woocommerce-result-count {
	display: inline-block;
	margin: 0 14px 0 0;
	padding: 6px 14px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--ap-line);
	font-size: 13px;
	color: var(--ap-muted);
}
.woocommerce-ordering { display: inline-block; margin: 0; }
.woocommerce-ordering select.orderby {
	height: 38px;
	min-width: 210px;
	padding: 0 38px 0 16px;
	border: 1px solid #ddd;
	border-radius: 999px;
	background-color: #fff;
	font-size: 13px;
	font-weight: 600;
	color: var(--ap-black);
	box-shadow: none;
	transition: border-color .25s, box-shadow .25s;
}
.woocommerce-ordering select.orderby:hover,
.woocommerce-ordering select.orderby:focus {
	border-color: var(--ap-yellow);
	box-shadow: 0 0 0 3px rgba(255, 194, 14, .25);
}

/* Lưới sản phẩm */
.category-page-row { padding-bottom: 20px; }
.shop-container .products.row { margin-left: -10px; margin-right: -10px; }
.shop-container .products > .product-small.col { padding: 0 10px 22px; }
.shop-container .product-small .box-text-products { padding: 14px 12px 18px; }
.shop-container .product-small .product-title a { font-size: 14px; }

/* Phân trang */
.woocommerce-pagination { margin: 10px 0 30px; }
.nav-pagination > li > a,
.nav-pagination > li > span {
	min-width: 40px;
	height: 40px;
	line-height: 36px;
	padding: 0 10px;
	border: 2px solid var(--ap-line);
	border-radius: 999px;
	color: var(--ap-black);
	font-weight: 700;
	font-size: 14px;
	background: #fff;
	transition: all .25s var(--ap-ease);
}
.nav-pagination > li > a:hover {
	border-color: var(--ap-yellow);
	background: var(--ap-yellow-soft);
	color: var(--ap-black);
	transform: translateY(-2px);
}
.nav-pagination > li > .current {
	background: var(--ap-yellow);
	border-color: var(--ap-yellow);
	color: var(--ap-black);
	box-shadow: 0 6px 14px rgba(255, 194, 14, .4);
}
.nav-pagination > li > .dots { border-color: transparent; background: none; }

/* Mô tả danh mục (nếu có) */
.term-description { background: var(--ap-soft); border-left: 4px solid var(--ap-yellow); padding: 16px 20px; border-radius: var(--ap-radius); margin-bottom: 24px; }

/* Sidebar shop (nếu bật) */
.shop-sidebar .widget-title,
#shop-sidebar .widget-title { color: var(--ap-black); font-weight: 800; border-bottom: 3px solid var(--ap-yellow); padding-bottom: 6px; }
.widget_product_categories li a:hover { color: var(--ap-red); }
.widget_product_categories li.current-cat > a { color: var(--ap-red); font-weight: 700; }

/* Trang chi tiết sản phẩm */
.single-product .product-title.entry-title { font-size: 26px; font-weight: 800; text-transform: uppercase; }
.single-product .product-info .is-divider { background: var(--ap-yellow); height: 3px; max-width: 50px; }
.single-product .woocommerce-tabs .tabs li.active > a { color: var(--ap-black); border-color: var(--ap-yellow); }
.single-product .woocommerce-tabs .tabs li > a:hover { color: var(--ap-red); }
.related .product-section-title { color: var(--ap-black); font-weight: 800; text-transform: uppercase; }


/* =========================================================
   CLICK CẢ CARD (ảnh + chữ) — link tiêu đề phủ toàn thẻ
   ========================================================= */
.product-small .box,
.post-item .box { position: relative; }
.product-small .box-text,
.product-small .title-wrapper,
.product-small .product-title,
.post-item .box-text,
.post-item .box-text-inner,
.post-item .post-title { position: static !important; }
.product-small .product-title a::before,
.post-item .post-title a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}
.product-small .image-tools,
.product-small .badge-container { pointer-events: none; }
.product-small .box-image a,
.post-item .box-image a { cursor: pointer; }
.product-small .box,
.post-item .box { cursor: pointer; }

/* =========================================================
   TRANG DANH MỤC BÀI VIẾT (category/dich-vu, tin-tuc...)
   ========================================================= */
.blog-archive .archive-page-header {
	background: linear-gradient(90deg, var(--ap-yellow-soft) 0%, #fff 80%);
	border-bottom: 1px solid var(--ap-line);
	padding: 34px 0 30px;
	margin-bottom: 34px;
}
.blog-archive .archive-page-header .page-title {
	margin: 0;
	font-size: 32px;
	font-weight: 900;
	color: var(--ap-black);
	letter-spacing: .5px;
	text-transform: uppercase;
}
.blog-archive .archive-page-header .page-title span { color: var(--ap-black); }
.blog-archive .archive-page-header .page-title::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin: 14px auto 0;
	border-radius: 4px;
	background: var(--ap-yellow);
}
.blog-archive .taxonomy-description { max-width: 760px; margin: 12px auto 0; color: var(--ap-muted); }

/* Bỏ masonry lệch, chuyển thành lưới đều */
.blog-archive .row.align-center > .large-10 { max-width: 100%; flex-basis: 100%; }
.blog-archive #post-list .row-masonry {
	display: flex !important;
	flex-wrap: wrap;
	height: auto !important;
}
.blog-archive #post-list .row-masonry > .col {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	display: flex;
	padding-bottom: 26px;
}
.blog-archive .post-item .col-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: #fff;
	border: 1px solid var(--ap-line);
	border-radius: var(--ap-radius);
	overflow: hidden;
	box-shadow: var(--ap-shadow);
	transition: transform .4s var(--ap-ease), box-shadow .4s var(--ap-ease), border-color .3s;
}
.blog-archive .post-item:hover .col-inner {
	transform: translateY(-5px);
	box-shadow: var(--ap-shadow-hover);
	border-color: var(--ap-yellow);
}
.blog-archive .post-item .box { display: flex; flex-direction: column; height: 100%; width: 100%; }
/* khung ảnh phải giãn hết chiều ngang (Flatsome đặt margin auto -> co về 0 trong flex) */
.blog-archive .post-item .box-image { width: 100% !important; margin: 0 !important; flex: 0 0 auto; }
.blog-archive .post-item .box-image .image-cover { width: 100%; }
.blog-archive .post-item .box-image img { opacity: 1 !important; }
/* trang danh mục bài viết: không dùng hiệu ứng xuất hiện */
.blog-archive .ap-reveal,
.ap-anim .blog-archive .ap-reveal { opacity: 1 !important; transform: none !important; transition-delay: 0s !important; }
.blog-archive .post-item .box-image .image-cover { padding-top: 62% !important; }
.blog-archive .post-item .box-text {
	flex: 1;
	text-align: left !important;
	padding: 18px 20px 22px;
}
.blog-archive .post-item .post-title {
	font-size: 16px;
	font-weight: 800;
	line-height: 1.4;
	margin-bottom: 4px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.8em;
}
.blog-archive .post-item .post-title a { color: var(--ap-black); transition: color .25s; }
.blog-archive .post-item:hover .post-title a { color: var(--ap-red); }
.blog-archive .post-item .is-divider {
	margin: 10px 0;
	max-width: 40px;
	height: 3px;
	background: var(--ap-yellow);
	transition: max-width .4s var(--ap-ease);
}
.blog-archive .post-item:hover .is-divider { max-width: 80px; }
.blog-archive .post-item .from_the_blog_excerpt {
	font-size: 14px;
	line-height: 1.6;
	color: var(--ap-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.blog-archive .post-item .blog-post-inner::after {
	content: "Xem chi tiết →";
	display: inline-block;
	margin-top: 12px;
	font-size: 13px;
	font-weight: 800;
	color: var(--ap-red);
	text-transform: uppercase;
	transition: transform .3s var(--ap-ease);
}
.blog-archive .post-item:hover .blog-post-inner::after { transform: translateX(6px); }
.blog-archive .post-item .badge { z-index: 4; }
.blog-archive .nav-pagination { margin: 10px 0 40px; }

/* Trang chi tiết bài viết */
.single-post .entry-header-text { text-align: left; }
.single-post .entry-title { font-size: 30px; font-weight: 900; line-height: 1.3; }
.single-post .entry-category a { color: var(--ap-red); font-weight: 800; }
.single-post .entry-content { font-size: 16px; line-height: 1.8; }


/* =========================================================
   FOOTER UX BLOCK "Footer An Phương"
   ========================================================= */
.ap-footer { border-top: 4px solid var(--ap-yellow); color: rgba(255, 255, 255, .78); }
.ap-footer .ap-f-col { padding-bottom: 24px; }
.ap-footer .ap-f-logo { margin-bottom: 14px; }
.ap-footer .ap-f-logo img { background: #fff; padding: 8px 12px; border-radius: var(--ap-radius); }
.ap-footer .ap-f-title { margin-bottom: 16px; }
.ap-footer .ap-f-title .section-title { border: 0; }
.ap-footer .ap-f-title .section-title-main,
.ap-footer .ap-f-title h4 {
	color: var(--ap-yellow) !important;
	font-size: 16px !important;
	font-weight: 800;
	letter-spacing: .4px;
	text-transform: uppercase;
	border: 0 !important;
	padding-bottom: 10px !important;
	position: relative;
}
.ap-footer .ap-f-title .section-title-main::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 40px; height: 3px;
	border-radius: 3px;
	background: var(--ap-red);
}
.ap-footer .ap-f-title b { display: none; }
.ap-footer .ap-f-company {
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.45;
	margin-bottom: 12px;
	text-transform: uppercase;
}
.ap-footer .ap-f-list { list-style: none; margin: 0; padding: 0; }
.ap-footer .ap-f-list li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.6;
}
.ap-footer .ap-f-list li i {
	flex: 0 0 28px;
	width: 28px; height: 28px;
	line-height: 28px;
	text-align: center;
	border-radius: 50%;
	background: rgba(255, 194, 14, .15);
	color: var(--ap-yellow);
	font-size: 13px;
}
.ap-footer .ap-f-list strong { color: #fff; }
.ap-footer a { color: rgba(255, 255, 255, .85); transition: color .25s; }
.ap-footer a:hover { color: var(--ap-yellow); }
.ap-footer .ap-f-follow,
.social-icons.ap-f-follow { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; }
/* Nút icon: vòng tròn vàng, icon đen — hover đỏ, icon trắng */
.social-icons.ap-f-follow a.icon.button,
.social-icons.ap-f-follow a.icon.button.primary:not(.is-outline) {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	height: 40px !important;
	min-height: 40px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	border: 0 !important;
	background: var(--ap-yellow) !important;
	color: var(--ap-black) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .25) !important;
	transition: background-color .25s, color .25s, transform .3s var(--ap-ease) !important;
}
.social-icons.ap-f-follow a.icon.button i {
	color: inherit !important;
	font-size: 16px;
	line-height: 1;
	margin: 0 !important;
	opacity: 1 !important;
}
.social-icons.ap-f-follow a.icon.button::after { display: none !important; }
.social-icons.ap-f-follow a.icon.button:hover,
.social-icons.ap-f-follow a.icon.button.primary:not(.is-outline):hover {
	background: var(--ap-red) !important;
	color: #fff !important;
	transform: translateY(-3px);
	box-shadow: 0 8px 18px rgba(215, 20, 26, .35) !important;
}

/* Danh mục sản phẩm */
.ap-footer .ap-f-menu .ux-menu-link { border: 0 !important; }
.ap-footer .ap-f-menu .ux-menu-link__link {
	min-height: 0;
	padding: 7px 0;
	color: rgba(255, 255, 255, .8) !important;
	font-size: 13.5px;
	font-weight: 600;
	text-transform: uppercase;
	border-bottom: 1px dashed rgba(255, 255, 255, .1);
	transition: color .25s, padding-left .25s var(--ap-ease);
}
.ap-footer .ap-f-menu .ux-menu-link__link::before {
	content: "›";
	margin-right: 8px;
	color: var(--ap-yellow);
	font-weight: 900;
}
.ap-footer .ap-f-menu .ux-menu-link__link:hover { color: var(--ap-yellow) !important; padding-left: 6px; }

/* Fanpage + QR */
.ap-footer .ap-f-fanpage iframe { border-radius: var(--ap-radius); background: #fff; }
.ap-footer .ap-f-qr img { background: #fff; padding: 8px; border-radius: var(--ap-radius); transition: transform .3s var(--ap-ease); }
.ap-footer .ap-f-qr:hover img { transform: scale(1.04); }
.ap-footer .ap-f-zalo.button {
	margin-top: 12px;
	background: #0068ff !important;
	border-color: #0068ff !important;
	color: #fff !important;
	font-weight: 800;
}
.ap-footer .ap-f-zalo.button:hover { background: var(--ap-yellow) !important; border-color: var(--ap-yellow) !important; color: var(--ap-black) !important; }

/* Bản đồ dưới footer */
.ap-footer-map iframe { filter: grayscale(.25); transition: filter .4s; }
.ap-footer-map:hover iframe { filter: none; }

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 849px) {
	.woocommerce-result-count { display: none; }
	.section-title .section-title-main { font-size: 22px; }
	.gioi-thieu-home p:first-child strong { font-size: 19px; }
	.home .wpcf7-form { grid-template-columns: 1fr; }
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	#top-bar .html_topbar_left::before { content: "☎ Hotline: 0949 058 068"; font-size: 12px; }
	.section-title .section-title-main { font-size: 18px; }
	.section-title .sub-title { font-size: 12px; }
	.product-small .product-title a { font-size: 12.5px; }
	.product-small .box-text-products { padding: 10px 6px 12px; }
	.button.primary.is-outline,
	.button.primary:not(.is-outline) { padding: 0 20px; font-size: 13px; }
	.gioi-thieu-home { text-align: left; }
	.tin-tuc-home .box-vertical { display: block; }
	.tin-tuc-home .box-vertical .box-image { width: 100% !important; }
	.tin-tuc-home .box-text { padding: 10px 0 0; }
	.thong-tin-lien-he { padding: 16px; }
	.noi-dung-gioi-thieu { font-size: 15px; text-align: left; }
	.shop-page-title .page-title-inner { padding-top: 14px; padding-bottom: 14px; }
	.blog-archive .archive-page-header { padding: 22px 0 20px; margin-bottom: 22px; }
	.blog-archive .archive-page-header .page-title { font-size: 24px; }
	.single-post .entry-title { font-size: 22px; }
	.ap-footer .ap-f-col { padding-bottom: 14px; }
	.ap-footer-map iframe { height: 240px; }
	.woocommerce-ordering select.orderby { min-width: 0; width: 100%; }
	.shop-container .products > .product-small.col { padding: 0 6px 14px; }
	.shop-container .products.row { margin-left: -6px; margin-right: -6px; }
	.nav-pagination > li > a, .nav-pagination > li > span { min-width: 34px; height: 34px; line-height: 30px; font-size: 13px; }
}