/*
Theme Name: 123B Enterprise
Theme URI: https://example.com/
Author: VN AI
Author URI: https://example.com/
Description: Theme WordPress 123B sử dụng nguyên bộ code UU88, chỉ thay đổi nhận diện màu đen vàng và hệ thống hình ảnh.
Version: 1.4.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: uu88
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, blog
*/
/* =====================================
   TYPOGRAPHY SYSTEM
===================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Oswald:wght@500;600;700&display=swap');

:root {

    --font-heading:
        "Oswald",
        "Barlow Condensed",
        sans-serif;

    --font-body:
        "Inter",
        "Roboto",
        sans-serif;

    --fw-regular:400;
    --fw-medium:500;
    --fw-semibold:600;
    --fw-bold:700;

    /* Modular Scale */

    --fs-xs:0.75rem;
    --fs-sm:0.875rem;
    --fs-base:1rem;
    --fs-md:1.125rem;
    --fs-lg:1.25rem;
    --fs-xl:1.5rem;
    --fs-2xl:2rem;
    --fs-3xl:2.5rem;
    --fs-4xl:3rem;
    --fs-5xl:3.5rem;
}
html{
    font-size:100%;
}

body{

    font-family:var(--font-body);

    font-size:var(--fs-base);

    font-weight:400;

    line-height:1.8;

    color:#ffffff;

}
h1 {
    font-size: 34px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.section-heading h2, .why-copy h2, .info-card h2, .faq h2 {
    font-size: 1.5em;
    
}
.info-card h3, .faq h3 {
    font-size: 1.4em;
    
}

.widget-title{
    font-family:var(--font-heading);
    font-size:1.3rem;
    font-weight:700;
    text-transform:uppercase;

}
/* =========================================
   UU88 HERO USP STRIP
========================================= */

.hero .usp-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	overflow: hidden;
	margin-top: 1.25rem;
	background:
		linear-gradient(
			180deg,
			rgba(20, 20, 20, 0.98),
			rgba(9, 9, 9, 0.98)
		);
	border: 0.0625rem solid rgba(255, 255, 255, 0.14);
	border-radius: 0.75rem;
	box-shadow:
		0 0.75rem 2rem rgba(0, 0, 0, 0.45),
		inset 0 0.0625rem 0 rgba(255, 255, 255, 0.04);
}

.hero .usp-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	min-width: 0;
	margin: 0;
	padding: 1.35rem 1.5rem;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.hero .usp-card:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 20%;
	right: 0;
	width: 0.0625rem;
	height: 60%;
	background:
		linear-gradient(
			180deg,
			transparent,
			rgba(255, 255, 255, 0.18),
			transparent
		);
}

.hero .usp-card .icon {
	display: flex;
	flex: 0 0 3.25rem;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	margin: 0;
	padding: 0;
	color: #ffd400;
	font-size: 1rem;
	line-height: 1;
	background:
		radial-gradient(
			circle,
			rgba(255, 50, 40, 0.24) 0%,
			rgba(255, 50, 40, 0.08) 48%,
			transparent 72%
		);
	border: 0;
	border-radius: 50%;
	filter:
		drop-shadow(0 0 0.3rem rgba(255, 58, 45, 0.95))
		drop-shadow(0 0 0.8rem rgba(255, 30, 20, 0.38));
}

.hero .usp-card .icon svg {
	display: block;
	width: 2.35rem;
	height: 2.35rem;
}

.hero .usp-card-content {
	min-width: 0;
}

.hero .usp-card h3 {
	margin: 0 0 0.25rem;
	color: #f6f6f6;
	font-family: var(--font-heading, "Barlow Condensed", sans-serif);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.hero .usp-card p {
	margin: 0;
	color: #aaa;
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4;
}

.hero .usp-card:hover {
	background: rgba(255, 255, 255, 0.025);
}

@media (max-width: 64rem) {
	.hero .usp-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hero .usp-card:nth-child(2)::after {
		display: none;
	}

	.hero .usp-card:nth-child(-n + 2) {
		border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.08);
	}
}

@media (max-width: 40rem) {
	.hero .usp-grid {
		grid-template-columns: 1fr;
		margin-top: 1rem;
	}

	.hero .usp-card {
		gap: 0.875rem;
		padding: 1rem;
		border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.08);
	}

	.hero .usp-card:last-child {
		border-bottom: 0;
	}

	.hero .usp-card::after {
		display: none;
	}

	.hero .usp-card .icon {
		flex-basis: 2.75rem;
		width: 2.75rem;
		height: 2.75rem;
	}

	.hero .usp-card .icon svg {
		width: 2rem;
		height: 2rem;
	}
}

/* =========================================
 CODE THEM
========================================= */
.uu88-spec-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    overflow:hidden;
    border-radius:14px;
    background:#0f0f0f;
    border:1px solid rgba(255,31,61,.2);
    box-shadow:
        0 0 20px rgba(255,31,61,.08);
}

.uu88-spec-table th{
    background:linear-gradient(
        180deg,
        #171717,
        #0f0f0f
    );

    color:#fff;
}

.uu88-spec-table td,
.uu88-spec-table th{
    padding:16px 20px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.uu88-spec-table td:first-child,
.uu88-spec-table th:first-child{
    border-right:1px solid rgba(255,255,255,.08);
}
.uu88-accordion-content table,
.accordion details > div table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
}

/* =========================================
  FOOTER
========================================= */
.site-footer p {
    font-size: 14px;
    margin: 8px 0;
	color: #c5c5c5;
}
.site-footer li {
    font-size: 14px;
    margin: 8px 0;
	color: #c5c5c5;
}

.section-heading-mark {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	max-width: 10rem;
	margin-bottom: 0.75rem;
}

.section-heading-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 2.25rem;
	width: 2.25rem;
	height: 2.25rem;
	border: 0.0625rem solid rgba(255, 36, 52, 0.55);
	border-radius: 50%;
	background:
		radial-gradient(
			circle,
			rgba(255, 36, 52, 0.16) 0%,
			rgba(255, 36, 52, 0.03) 70%
		);
	box-shadow:
		0 0 1rem rgba(255, 36, 52, 0.14),
		inset 0 0 0.5rem rgba(255, 36, 52, 0.08);
}

.section-heading-icon svg {
	width: 1.125rem;
	height: 1.125rem;
	fill: #ffd400;
}

.section-heading-line {
	display: block;
	flex: 1;
	height: 0.0625rem;
	background: linear-gradient(
		90deg,
		rgba(255, 36, 52, 0.85),
		rgba(255, 36, 52, 0)
	);
}

.information h2,
.faq h2 {
	margin-top: 0;
	margin-bottom: 1rem;
}
.sidebar-recent-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar-recent-item {
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid #2b2b2b;
}

.sidebar-recent-item:first-child {
	padding-top: 0;
}

.sidebar-recent-item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.sidebar-recent-link {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: inherit;
	text-decoration: none;
}

.sidebar-recent-thumb {
	width: 105px;
	min-width: 105px;
	height: 68px;
	overflow: hidden;
	background: #191919;
	border-radius: 6px;
}

.sidebar-recent-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sidebar-recent-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #e8bd00;
	font-weight: 800;
	background: linear-gradient(135deg, #1a1a1a, #2b2200);
}

.sidebar-recent-content {
	flex: 1;
	min-width: 0;
}

.sidebar-recent-content h3 {
	display: -webkit-box;
	overflow: hidden;
	margin: 0 0 7px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.sidebar-recent-content time {
	color: #888;
	font-size: 12px;
}

.sidebar-recent-link:hover h3 {
	color: #e8bd00;
}
.recent-thumb{
    width:100%;
    height:180px;
    overflow:hidden;
    border-radius:8px;
}

.recent-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.uu88-single-layout{
display:grid;
grid-template-columns:1fr 340px;
gap:30px;
margin:40px auto;
}

.uu88-content{
min-width:0;
}

.uu88-sidebar{
position:sticky;
top:100px;
height:max-content;
}

.post-title{
font-size:28px;
line-height:1.3;
margin-bottom:20px;
}

.post-meta{
display:flex;
gap:20px;
margin-bottom:25px;
color:#999;
}

.featured-image img{
width:100%;
border-radius:12px;
}

.post-content{
font-size:18px;
line-height:1.9;
margin-top:30px;
}

.post-content h2{
font-size:32px;
margin-top:40px;
color:#fff;
}

.post-content h3{
font-size:24px;
margin-top:30px;
}

.sidebar-box{
background:#111;
border:1px solid #222;
padding:20px;
border-radius:12px;
margin-bottom:20px;
}

.promo-box{
background:linear-gradient(
135deg,
#5d4800,
#9f7b00
);
}

.btn-register{
display:block;
background:#ffd400;
padding:12px;
text-align:center;
margin-top:15px;
border-radius:8px;
font-weight:700;
}

.author-box{
display:flex;
gap:20px;
padding:25px;
background:#111;
border-radius:12px;
margin-top:50px;
}

.related-posts{
margin-top:50px;
}
.related-posts h2 {
    font-size: 22px;
}

.related-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

.related-card{
background:#111;
border-radius:12px;
overflow:hidden;
}

.related-card h3 {
    padding: 15px;
    font-size: 13px;
    line-height: 1.6;
}
.trust-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 1.25rem;
    padding-block: 1.25rem;
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.1);
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1);
}

.trust-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.trust-badge img {
    display: block;
    width: 100%;
    max-width: 100px;
    height: auto;
    opacity: 0.76;
    filter: grayscale(1);
    transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

.trust-badge:hover img {
    opacity: 1;
    filter: grayscale(0);
    transform: translateY(-0.125rem);
}
/* =========================================
  MOBILE
========================================= */

/* Tablet */
@media (max-width: 992px) {
    .trust-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    .trust-badge img {
        max-width: 80px;
        max-height: 44px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .trust-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        padding: 10px 0;
    }

    .trust-badge img {
        width: 100%;
        max-width: 62px;
        max-height: 38px;
        object-fit: contain;
    }
}

/* Mobile nhỏ */
@media (max-width: 480px) {
    .trust-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 3px;
    }

    .trust-badge img {
        max-width: 52px;
        max-height: 34px;
    }
}

@media(max-width:991px){

.uu88-single-layout{
grid-template-columns:1fr;
}

.uu88-sidebar{
position:static;
}

.related-grid{
grid-template-columns:1fr;
}

.post-title{
font-size:30px;
}

}
@media (max-width:768px){

    .entry-title,
    .post-title{

        font-size:2rem;

    }
	.entry-content h2 {
   font-size:1.5rem;
}

    h2{
        font-size:1.5rem;
    }

    h3{
        font-size:1.5rem;
    }

}

@media(max-width:768px){

    .uu88-spec-table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }

}