/* css/base.css: Nền tảng: hiệu ứng, tiện ích chung, banner tiêu đề trang, breadcrumb.
   Tách từ style.css ngày 08/10/2026; thứ tự các file giữ nguyên thứ tự cũ (xem inc/enqueue-styles.php). */
/* Font SVN-Poppins (Poppins Việt hoá, giấy phép OFL, tự lưu trên site, đã cắt còn Latin + tiếng Việt). */
@font-face {
	font-family: 'SVN-Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../assets/fonts/svn-poppins/svn-poppins-Regular.woff2) format('woff2');
}
@font-face {
	font-family: 'SVN-Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(../assets/fonts/svn-poppins/svn-poppins-Medium.woff2) format('woff2');
}
@font-face {
	font-family: 'SVN-Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(../assets/fonts/svn-poppins/svn-poppins-SemiBold.woff2) format('woff2');
}
@font-face {
	font-family: 'SVN-Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../assets/fonts/svn-poppins/svn-poppins-Bold.woff2) format('woff2');
}

/* ==========================================================================
   Biến thiết kế (design tokens) của Ánh Nhật. Tiền tố --an-.
   Đây là NGUỒN DUY NHẤT cho giá trị màu/chuyển động dùng trong các file css/*.css.
   Màu chủ đạo của theme (Theme Options) là #1e73be (--primary-color của Flatsome).
   ========================================================================== */
:root {
	/* Thương hiệu */
	--an-color-primary: #1e73be;
	--an-color-primary-dark: #025295;
	--an-color-primary-dark-rgb: 2, 82, 149;
	--an-color-primary-deep: #064071;
	--an-color-navy: #001733;
	--an-color-link-brand: #004b9c;
	--an-color-accent: #f44336;
	--an-color-slate: #34495e;
	--an-color-border: #d7d7d7;

	/* Giao diện mới: xanh thương hiệu #0052cc theo màu header (31/10/2026; trước là #1670d3) */
	--an-brand: #0052cc;
	--an-brand-dark: #003a94;
	--an-brand-tint: #e8f2fe;
	--an-accent: #0052cc; /* xanh nhấn #0052cc (đã bỏ cyan), dùng trong gradient */
	--an-accent-soft: #f4f6f8; /* xám nhạt cho chữ/vạch nhấn trên nền xanh (đã bỏ cyan) */
	/* Gradient chủ đạo của Ánh Nhật (27/10/2026): xanh thanh trên cùng sang xanh sáng. Dùng cho các khối gradient (hero nay là xanh #0052cc phẳng kèm quầng sáng CSS),
	   khối giới thiệu, khối cam kết, nút chính, số liệu, minh họa dịch vụ (svc-*.svg); đổi màu thì đổi cả ở các file ảnh đó. */
	--an-grad-1: #003a94;
	--an-grad-2: #0052cc;
	--an-grad-3: #2a7cf5;
	--an-grad: linear-gradient(135deg, var(--an-grad-1) 0%, var(--an-grad-2) 50%, var(--an-grad-3) 100%);
	/* Nút chính: màu theo mẫu itqore (primary #0052cc, hover #001733) */
	--an-btn: #0052cc;
	--an-btn-hover: #001733;
	/* Màu chữ theo mẫu itqore: tiêu đề và link #001733, thân bài #333333, hover #0052cc */
	--an-text-heading: #001733;
	--an-text-body: #333333;
	--an-text-hover: #0052cc;
	--an-ink: #333333;

	/* Màu các bước (mục "Giới thiệu": quy trình/lịch sử) */
	--an-step-yellow: #efbf00;
	--an-step-cyan: #0052cc;
	--an-step-orange: #e77d20;
	--an-step-red: #e84a3a;
	--an-step-teal: #19bd9b;
	--an-step-green: #77bf37;
	--an-step-sky: #71d0ec;

	/* Chuyển động */
	--an-transition-fast: all 0.2s ease-in-out;
	--an-transition: all 0.3s ease-in-out;

	/* Font: SVN-Poppins cho toàn site (ghi đè Roboto của Theme Options bằng các luật bên dưới) */
	--an-font: 'SVN-Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Độ rộng vùng nội dung theo màn hình (theo bậc 1200 / 1270 / 1612px, như site tham khảo).
   Flatsome đặt cố định 1200px trong Theme Options (.container, .row); CSS của nó nạp sau child nên dùng tiền tố html. */
:root {
	--an-container: 1200px;
}
@media (min-width: 1400px) {
	:root {
		--an-container: 1270px;
	}
}
@media (min-width: 1600px) {
	:root {
		--an-container: 1612px;
	}
}
html .container-width,
html .container,
html .row {
	max-width: var(--an-container);
}
html .row.row-collapse {
	max-width: calc(var(--an-container) - 30px);
}
html .row.row-large {
	max-width: calc(var(--an-container) + 30px);
}

/* Flatsome gán Roboto qua Theme Options ở 5 chỗ, CSS của nó nạp SAU child nên phải nâng độ ưu tiên (tiền tố html). */
html body,
html h1, html h2, html h3, html h4, html h5, html h6,
html .heading-font,
html .alt-font,
html .nav > li > a,
html .mobile-sidebar-levels-2 .nav > li > ul > li > a,
html .off-canvas-center .nav-sidebar.nav-vertical > li > a {
	font-family: var(--an-font);
}

/* ROOT */
body {
    font-weight: 400 !important;
}
@-webkit-keyframes rotate {
	100% {
		-webkit-transform: rotate(360deg);
	}
}
@keyframes rotate {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
.delay02 {
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

.delay04 {
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}

.delay06 {
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
}

.delay08 {
	-webkit-animation-delay: 0.8s;
	animation-delay: 0.8s;
}

.delay10 {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}

.delay12 {
	-webkit-animation-delay: 1.2s;
	animation-delay: 1.2s;
}
.field {
    display: block;
    position: relative;
    -webkit-box-shadow: 0 0 8px 0px #000;
    box-shadow: 0 0 8px 0px #000;
}
.bg {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.smooth {
    -webkit-transition: var(--an-transition-fast);
    transition: var(--an-transition-fast);
}
.p-banner {
    position: relative;
    z-index: 1;
    overflow: hidden;
    color: #fff;
    margin-bottom: 40px;
    padding-bottom: 56px;
    padding-top: 72px;
    /* Dải tiêu đề dùng chung (dự án, /dich-vu/, /san-pham/...): xanh #0052cc kèm mạng node chuyển động (31/10/2026) */
    background: #0052cc;
}
.an-cat-banner,
.p-banner,
.an-ct-hero {
    position: relative;
    isolation: isolate;
}
.an-net-canvas {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    opacity: 0.23;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, #000 50%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, #000 50%);
}
.banner-image {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
	-webkit-object-fit: cover;
    -moz-object-fit: cover;
    -ms-object-fit: cover;
    -o-object-fit: cover;
    object-fit: cover;
}
.banner-image:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    background: rgba(var(--an-color-primary-dark-rgb), 0.66);
}
.breadcumb {
    position: relative;
    z-index: 99;
}
.breadcrumb-title {
    font-size: 23px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.3;
    margin: 0 0 1.3em;
}
.p-banner .breadcrumbs li {
    display: inline-block;
    vertical-align: middle;
	color: #fff;
	font-size: 14px;
	line-height: 1.5;
	text-transform: capitalize;
	font-weight: normal;
}
.p-banner .breadcrumbs li:not(:last-child):after {
    content: '/';
    margin-left: 8px;
    margin-right: 4px;
}
.p-banner .breadcrumbs li a {
	color: #fff;
	font-size: 14px;
	line-height: 1.5;
	text-transform: capitalize;
}
.p-banner .breadcrumbs li a:hover {
	text-decoration: underline;
}

/* Tiện ích chuyển động nhanh dùng ở nhiều trang (trước nằm trong home.css, nay chỉ nạp ở trang cần home.css) */
.smooth {
	-webkit-transition: var(--an-transition-fast);
	transition: var(--an-transition-fast);
}