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

/* =============================================================================
 * NTA — bám giao diện web cũ (theme alimo)
 * Nguồn số đo: bản chụp https://web.archive.org/web/20240715235358/https://noithatart.com/
 *              + wayback/css/alimo-style.css (đo trực tiếp, không suy đoán)
 * Quy đổi: alimo dùng html{font-size:62.5%} nên 1rem = 10px.
 * ============================================================================= */

:root {
	--nta-primary: #F29B8C;            /* san hô — thương hiệu, menu, liên kết  */
	--nta-second:  #6A6D7A;            /* xám xanh — chân trang, hover          */
	--nta-ink:     #000;
	--nta-muted:   rgba(0, 0, 0, .7);  /* tên chuyên mục, chữ phụ               */
	--nta-dim:     rgba(0, 0, 0, .38); /* ngày đăng, dấu ba chấm phân trang     */
	--nta-body:    rgba(0, 0, 0, .86); /* chữ trong chân thẻ                    */
	--nta-hairline: rgba(0, 0, 0, .05);/* viền thẻ 1px của alimo                */
}

/* ---------------------------------------------------------------- 1. HEADER */

/* Thanh trên = .main-header cũ: cao 72px, nền #F7F7F7, menu trái, icon phải */
#top-bar { border-bottom: 0; }
#top-bar .flex-row { min-height: 72px; }

/* Menu: Mulish 15/700 màu san hô, KHÔNG viết hoa (alimo để nguyên dạng chữ) */
.header-nav .nav > li > a,
#top-bar .nav > li > a {
	font-size: 15px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: var(--nta-primary);
	padding-left: 15px;
	padding-right: 15px;
}
#top-bar .nav > li > a:hover,
#top-bar .nav > li.active > a { color: var(--nta-second); }

/* Gạch chân mục đang xem — alimo: :before cao 2px chạy hết bề ngang */
#top-bar .nav > li.current-menu-item > a,
#top-bar .nav > li.active > a {
	color: var(--nta-primary);
	box-shadow: inset 0 -2px 0 0 var(--nta-primary);
}
#top-bar .nav > li > a .icon-angle-down { opacity: .7; }

/* Web cũ không có vạch ngăn giữa các mục menu */
#top-bar .nav-divided > li + li > a:before,
#top-bar .nav > li + li:before { display: none; }
#top-bar .nav > li { margin: 0; }

/* Hotline + biểu tượng mạng xã hội bên phải thanh trên */
.nta-hotline {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .3px;
	color: var(--nta-ink);
}
.nta-hotline:hover { color: var(--nta-primary); }
#top-bar .header-social-icons a.icon { margin: 0 6px; color: var(--nta-ink); opacity: 1; }
#top-bar .header-social-icons a.icon i { font-size: 16px; }
#top-bar .header-social-icons a.icon:hover { color: var(--nta-primary); }
#top-bar .header-search .icon-search { font-size: 16px; color: var(--nta-ink); }

/* Hàng logo lớn giữa trang — alimo .big-logo-area{padding:5.5rem 8rem} */
#masthead .logo img { max-height: 200px; }
#masthead { border-bottom: 0; }

/* ------------------------------------------------------------- 1b. TRANG CHỦ */

/* Bìa lớn dạng trượt — web cũ không có, phần thêm mới.
   Slide 1 nền sáng nói về CỬA HÀNG (khách yêu cầu tập trung bán hàng),
   slide 2 giữ lớp phủ rgba(52,60,77,.74) của web cũ để không lệch tông. */
.nta-hero h1 {
	margin: 0 0 12px;
	font-size: 40px;
	line-height: 1.15;
}
.nta-hero .nta-hero-nhan {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	opacity: .75;
}
.nta-hero .text-box-content p { margin-bottom: 22px; font-size: 16px; }
.nta-hero .button { margin: 6px 6px 0; }

/* Slide cửa hàng: nền sáng, chữ đậm màu mực, nút san hô */
.nta-hero-shop h1, .nta-hero-shop .nta-hero-nhan { color: var(--nta-ink); }
.nta-hero-shop .text-box-content p { color: var(--nta-muted); }

/* Chấm điều hướng của slider */
.nta-hero-shop ~ * .flickity-page-dots .dot,
.home .flickity-page-dots .dot { background: var(--nta-ink); }

/* Tiêu đề khối trên trang chủ */
.home h2 { font-size: 28px; margin-bottom: 34px; }

/* Khối blog trang chủ dùng chung thẻ bài với trang danh sách.
   Hàng 9/3 giống trang blog: 878px lưới bài + 293px cột bên (container 1170). */
.nta-luoi-trangchu { margin-bottom: 30px; }
.nta-hang-blog > .col { padding-bottom: 0; }
.nta-hang-blog .nta-nut-xem-them { margin-top: 0; }

/* Trên tablet trở xuống, cột bên xuống dưới lưới bài và cách ra một quãng */
@media only screen and (max-width: 849px) {
	.nta-hang-blog .nta-cot-ben { margin-top: 40px; }
}

/* --------------------------------------------------- THẺ SẢN PHẨM (tối giản)
   Ảnh sản phẩm là ảnh vuông nền trắng, nên đặt trên nền xám rất nhạt để tạo
   khối; bỏ viền, bỏ bóng, bỏ chữ HOA. Phân tách bằng khoảng trắng, không kẻ. */

.product-small .box-image,
.products .box-image {
	background: #F7F7F7;
	border-radius: 0;
}
.product-small .box-image img,
.products .box-image img {
	mix-blend-mode: multiply;   /* ảnh nền trắng hoà vào nền xám nhạt */
	transition: transform .45s ease;
}
.products .box:hover .box-image img { transform: scale(1.04); }

.products .box-text {
	padding: 16px 2px 0;
	text-align: left;
}
/* nhãn danh mục — nhỏ, nhạt, không viết hoa toàn bộ */
.products .box-text .category {
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .4px;
	text-transform: none;
	color: var(--nta-dim);
	margin-bottom: 4px;
}
.products .box-text .name a,
.products .box-text .product-title a {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--nta-ink);
	text-transform: none;
}
.products .box-text .name a:hover { color: var(--nta-primary); }

/* giá: nhẹ nhàng, không đậm chói */
.products .price,
.products .price .amount {
	font-size: 15px;
	font-weight: 700;
	color: var(--nta-ink);
}
.products .price del { color: var(--nta-dim); font-weight: 400; }

/* bỏ hẳn viền / bóng / bo góc mà Flatsome thêm vào */
.products .col-inner,
.products .box { box-shadow: none; border: 0; border-radius: 0; background: transparent; }

/* nút thêm giỏ hàng chỉ hiện khi rê chuột trên máy có con trỏ — giữ lưới sạch */
@media (hover: hover) and (pointer: fine) {
	.products .box-text .add-to-cart-button { opacity: 0; transition: opacity .25s ease; }
	.products .box:hover .box-text .add-to-cart-button { opacity: 1; }
}

@media only screen and (max-width: 849px) {
	.nta-hero h1 { font-size: 28px; }
	.nta-hero .text-box-content p { font-size: 15px; }
	.home h2 { font-size: 20px; margin-bottom: 24px; }
}

/* ------------------------------------------------- 2. KHUNG NỘI DUNG / LƯỚI */

/* col-sm-9 = 878px · col-sm-3 = 293px  →  container 1170px */
.row.row-divided > .col + .col { border-left: 0; }   /* alimo không có vạch chia */

/* Flatsome in phần tóm tắt trang (flatsome_page_top_excerpt) NGAY TRONG <main>,
   không bọc .container nào, nên chữ chạy sát mép màn hình. Kéo về đúng khung. */
.page-header-excerpt {
	max-width: 1170px;
	margin: 0 auto;
	padding: 30px 15px 0;
}
.page-header-excerpt p {
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--nta-muted);
}

/* Lưới dự án — cùng ngôn ngữ tối giản với lưới sản phẩm */
.nta-luoi-duan .portfolio-box .box-image { background: #F7F7F7; }
.nta-luoi-duan .portfolio-box-title,
.nta-luoi-duan .portfolio-box-category { text-transform: none; letter-spacing: 0; }
.nta-luoi-duan .portfolio-box-category { font-size: 13px; color: var(--nta-dim); }
.nta-luoi-duan .portfolio-box-title { font-size: 16px; font-weight: 700; }

/* --------------------------------------------------------- 3. THẺ BÀI VIẾT */

/* Packery đặt thẻ ở position:absolute nên phải khai báo bề rộng tường minh,
   không dựa vào flex-basis của Flatsome (flex không có tác dụng khi absolute). */
.nta-luoi > .col.post-item { width: 50%; max-width: 50%; padding: 0 15px 30px; }

/* Vỏ thẻ: nền trắng, bo 3px, viền tóc 1px — đúng .article-wrapper của alimo */
.nta-the {
	background: #fff;
	border: 1px solid var(--nta-hairline);
	border-radius: 3px;
	overflow: hidden;
	padding: 0;
	box-shadow: none;
}

/* Ảnh thẻ: giữ tỉ lệ gốc (chính điều này tạo hiệu ứng masonry của web cũ) */
.nta-the-anh { margin: 0 0 20px; }
.nta-the-anh a { display: block; }
.nta-the-anh img { width: 100%; height: auto; border-radius: 0; display: block; }

/* Tên chuyên mục — 13/700, viết hoa chữ đầu, có gạch chân như bản gốc */
.nta-the-chuyenmuc { padding: 0 20px; display: flex; flex-wrap: wrap; gap: 0 10px; }
.nta-the-chuyenmuc a {
	font-size: 13px;
	font-weight: 700;
	text-transform: capitalize;
	color: var(--nta-muted);
	border-bottom: 1px solid currentColor;
	line-height: 1.6;
}
.nta-the-chuyenmuc a:hover { color: var(--nta-primary); }

/* Tiêu đề — Cabin 20/700, căn trái, padding 0 2rem */
.nta-the-tieude {
	padding: 10px 20px 0;
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3em;
	text-align: left;
}
.nta-the-tieude a { color: var(--nta-ink); }
.nta-the-tieude a:hover { color: var(--nta-primary); }

/* Chip thẻ tag */
.nta-the-tags { padding: 10px 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.nta-the-tags a {
	font-size: 13px;
	line-height: 1.6;
	padding: 2px 10px;
	color: var(--nta-muted);
	border: 1px solid var(--nta-hairline);
	border-radius: 0;
}
.nta-the-tags a:hover { color: var(--nta-primary); border-color: currentColor; }

/* Trích đoạn + hàng "read on / Min read" */
.nta-the-trich { padding: 10px 20px 0; }
.nta-the-trich p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--nta-muted); text-align: left; }

.nta-the-doctiep { padding: 20px 20px 10px; font-size: 13px; font-weight: 600; overflow: hidden; }
.nta-the-doctiep a { text-transform: capitalize; color: var(--nta-primary); }
.nta-the-doctiep a i { position: relative; left: 5px; transition: left .3s ease; }
.nta-the-doctiep a:hover i { left: 10px; }
.nta-the-doctiep .nta-the-thoigian { float: right; color: var(--nta-body); }

/* Chân thẻ: chỉ còn ảnh tác giả · tên · ngày (đã bỏ nút thích và chia sẻ) */
.nta-the-chan { padding: 10px 20px 20px; overflow: hidden; }
.nta-tacgia { font-size: 13px; overflow: hidden; white-space: nowrap; }
.nta-tacgia-anh { display: block; float: left; }
.nta-tacgia-anh img { width: 36px; height: 36px; border-radius: 50%; margin-right: 5px; }
.nta-tacgia-ten {
	display: block;
	font-weight: 700;
	color: var(--nta-body);
	overflow: hidden;
	text-overflow: ellipsis;
}
.nta-ngay { display: block; font-weight: 700; color: var(--nta-dim); line-height: 12px; }

/* ------------------------------------------------------------ 4. PHÂN TRANG */

.nta-phan-trang { padding: 30px 0; }
.nta-phan-trang .nav-links { display: flex; justify-content: center; align-items: center; }
.nta-phan-trang .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	min-width: 30px;
	margin-right: 20px;
	padding: 5px;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	color: var(--nta-body);
	border: 1px solid transparent;
	border-radius: 50%;
}
.nta-phan-trang .page-numbers.current { border-color: var(--nta-primary); color: var(--nta-primary); }
.nta-phan-trang .page-numbers:hover { border-color: var(--nta-primary); color: var(--nta-primary); }
.nta-phan-trang .page-numbers.dots,
.nta-phan-trang .page-numbers.next,
.nta-phan-trang .page-numbers.prev {
	border: 0;
	border-radius: 0;
	min-width: auto;
}
.nta-phan-trang .page-numbers.dots { color: var(--nta-dim); }

/* --------------------------------------------------------------- 5. CỘT BÊN
   Dùng ở HAI chỗ, cùng một UX Block 690:
     .post-sidebar → cột bên trang danh sách / bài viết (vùng tiện ích sidebar-main)
     .nta-cot-ben  → cột bên khối blog trên trang chủ (đặt thẳng trong UX Builder)
   Mọi quy tắc phải kê cả hai, nếu không trang chủ sẽ lệch kiểu với trang blog. */

.post-sidebar .widget + .widget,
.nta-cot-ben .widget + .widget { margin-top: 34px; }

.post-sidebar .widget-title, .post-sidebar .widget-title span,
.nta-cot-ben .widget-title, .nta-cot-ben .widget-title span {
	font-size: 16px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: var(--nta-ink);
}

/* Ảnh tác giả trong UX Block cột bên — cắt tròn như web cũ */
.nta-anh-tacgia img { border-radius: 50%; }

/* Ba ảnh phong cách xếp dọc, cách nhau bằng khoảng trắng */
.nta-tieu-de-phu { margin-bottom: 10px; }
.post-sidebar .ux-image + .ux-image,
.post-sidebar .img + .img,
.nta-cot-ben .ux-image + .ux-image,
.nta-cot-ben .img + .img { margin-top: 15px; }

/* Khối thương hiệu — dựng lại ô trích dẫn của web cũ */
.nta-hop-thuonghieu {
	background: rgba(210, 210, 210, .1);
	border-radius: 3px;
	padding: 40px 24px 24px;
	text-align: center;
	position: relative;
	margin-top: 34px;
}
.nta-hop-thuonghieu:before {
	content: "\201C";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	line-height: 58px;
	font-size: 28px;
	color: #fff;
	background: var(--nta-primary);
	border-radius: 50%;
}
.nta-hop-thuonghieu a { color: var(--nta-primary); font-style: italic; }

/* -------------------------------------------------------------- 6. CHÂN TRANG */

/* #676E7E = đúng màu nền đã nung trong ảnh logo chân trang, để logo không lộ khung */
.footer-1, .footer-2 { border-top: 0; }
#footer .nta-chan-trang { color: #fff; }
#footer .nta-chan-trang a { color: #fff; }
#footer .nta-chan-trang a:hover { color: var(--nta-primary); }
/* Chỉ tiêu đề khối mới viết hoa giãn chữ — các chữ đậm trong nội dung giữ nguyên dòng */
#footer .nta-tieu-de-chan strong {
	display: block;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding-bottom: 1em;
}
.absolute-footer { color: rgba(255, 255, 255, .6); }
.absolute-footer a { color: rgba(255, 255, 255, .6); }

/* ------------------------------------------------------- 7. DANH MỤC SẢN PHẨM */

/* Bài viết cũ nằm dưới lưới sản phẩm — tách bằng khoảng trắng, không kẻ vạch */
.nta-mo-ta-danh-muc { margin-top: 50px; padding-top: 30px; border-top: 1px solid var(--nta-hairline); }

/* ------------------------------------------------------------ 8. ĐIỆN THOẠI */

@media only screen and (max-width: 849px) {
	.nta-luoi > .col.post-item { width: 100%; max-width: 100%; padding: 0 15px 20px; }

	/* header_height 286 + logo_width 350 là số đo màn hình lớn — trên điện thoại
	   hai giá trị đó làm header rộng hơn khung nhìn, gây cuộn ngang (vi phạm F8). */
	#header #logo { width: 190px !important; }
	#header #logo img { max-height: 60px !important; }
	#header .header-main { height: auto !important; min-height: 70px; }
}

@media only screen and (max-width: 549px) {
	.nta-the-tieude { font-size: 18px; }
}

/* Nút "Xem tất cả" cuối mỗi khối trang chủ — canh giữa */
.nta-nut-xem-them { display: block; width: max-content; margin: 10px auto 0; }