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

/*************** ADD CUSTOM CSS HERE.   ***************/
/************ Trang chủ  *************/
/* ===== MENU CHƯA STICKY ===== */
.transparent .header-main:not(.is-sticky) {
    background: transparent !important;
}

/* ================= MENU ================= */
.transparent .header-main:not(.is-sticky)
.header-nav-main > li > a {
    color: #ffffff !important;
    position: relative;
    padding: 10px 5px;
    transition: all 0.3s ease;
}

/* Hover chữ: nền trắng + chữ đen */
.transparent .header-main:not(.is-sticky)
.header-nav-main > li > a:hover {
    color: #000000 !important;
}

/* ===== LINE TỪ GIỮA RA HAI BÊN – CHUNG ===== */
.header-nav-main > li > a {
    position: relative;
}

/* Line mặc định ẩn */
.header-nav-main > li > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 0;
    height: 3px;
    background: #9f0b07;
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

/* Hover → bung line */
.header-nav-main > li > a:hover::after {
    width: 100%;
}


/* ================= LOGO ================= */

/* Ẩn toàn bộ logo mặc định */
.transparent .header-main:not(.is-sticky) #logo img {
    display: none;
}

/* Logo mặc định (logo trắng – lúc chưa hover) */
.transparent .header-main:not(.is-sticky) #logo .header-logo {
    display: block;
}

/* KHÓA sticky logo khi chưa scroll */
.transparent .header-main:not(.is-sticky)
#logo .header-logo-sticky {
    display: none !important;
}

/* Hover header → đổi nền trắng */
.transparent .header-main:not(.is-sticky):hover {
    background: #ffffff !important;
}

/* Hover header → đổi logo sang ảnh custom */
.transparent .header-main:not(.is-sticky):hover #logo a {
    display: block;
    width: auto;
    height: auto;
    background: url("/wp-content/uploads/2025/12/logo01-e1765859273939-274x300-1.png") no-repeat left center;
    background-size: contain;
}

/* Ẩn img gốc khi hover */
.transparent .header-main:not(.is-sticky):hover #logo img {
    opacity: 0;
}

/* Khi hover header → toàn bộ chữ menu chuyển sang đen */
.transparent .header-main:not(.is-sticky):hover
.header-nav-main > li > a {
    color: #000000 !important;
}
/* NGÔN NGỮ – CHƯA HOVER: CHỮ TRẮNG */
.transparent .header-main:not(.is-sticky)
.gtranslate_wrapper a,
.transparent .header-main:not(.is-sticky)
.gtranslate_wrapper span {
    color: #ffffff !important;
    transition: color 0.25s ease;
}

/* HOVER HEADER → CHỮ NGÔN NGỮ ĐEN */
.transparent .header-main:not(.is-sticky):hover
.gtranslate_wrapper a,
.transparent .header-main:not(.is-sticky):hover
.gtranslate_wrapper span {
    color: #000000 !important;
}

/* MŨI TÊN ▼ cũng đổi màu */
.transparent .header-main:not(.is-sticky)
.gtranslate_wrapper span[style] {
    color: inherit !important;
}

/* Giảm khoảng cách giữa các chữ menu */
.header-nav-main.nav-right > li > a.nav-top-link {
    padding: 10px 5px;
}
/* ================= COMPANY NAME ================= */

/* Chưa hover header → chữ trắng */
.transparent .header-main:not(.is-sticky)
.company-name {
    color: #ffffff !important;
    transition: color 0.3s ease;
    font-weight: 900;
    font-size: 16px;
}

/* Hover header → chữ đen */
.transparent .header-main:not(.is-sticky):hover
.company-name {
    color: #000000 !important;
}
/*khi lăng chuột xuống */
.company-name {
    font-weight: 900;
    font-size: 16px;
}

h3 {
    line-height: 1.3 !important;
}

/* Mặc định: tiếng Việt */
.company-en {
  display: none;
}

/* Khi GTranslate sang English */
/*Tên công ty*/
html.translated-ltr .company-vi,
body.translated-ltr .company-vi,
html[class*="gt-en"] .company-vi,
body[class*="gt-en"] .company-vi {
  display: none;
}

html.translated-ltr .company-en,
body.translated-ltr .company-en,
html[class*="gt-en"] .company-en,
body[class*="gt-en"] .company-en {
  display: block;
}
/*Tiêu đề các trang*/
html.translated-ltr .company1-vi,
body.translated-ltr .company1-vi,
html[class*="gt-en"] .company1-vi,
body[class*="gt-en"] .company1-vi {
  display: none;
}

html.translated-ltr .company1-en,
body.translated-ltr .company1-en,
html[class*="gt-en"] .company1-en,
body[class*="gt-en"] .company1-en {
  display: block;
}
/* ================= banner ================= */
/*chấm tròn chạy*/
/* ===== DIAMOND OUTLINE – THU NHỎ ===== */ /* dot tròn mặc định */ .slider-nav-light .flickity-page-dots .dot 
{ position: relative; 
	background-color: #fff; 
	border: none; 
	margin: 0 10px; 
	transform: scale(0.7); /* THU NHỎ CHẤM TRÒN */ } 
/* hình thoi bọc ngoài */ 
.slider-nav-light .flickity-page-dots .dot::after { 
	content: ""; 
	position: absolute; /* THU NHỎ HÌNH THOI */ 
	width: 22px; 
	height: 22px; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%) rotate(45deg); 
	border: 2px solid rgba(255,255,255,.6); 
	box-sizing: border-box;
	pointer-events: none; 
} /* active */ 
.slider-nav-light .flickity-page-dots .dot.is-selected::after {  border-color: #fff; 
}
/* ================= Dự án  ================= */
/*==== Trang chủ===*/
/* Trạng thái mặc định */

.da .box-label .box-text {
    background-color: #ffffffe3;
    bottom: 0;
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .1);
    margin: 4%;
    opacity: .95;
    padding: .5em 1.5em .55em;
    position: absolute;
    width: auto;
}

.da .box-label .box-text p {
    color: black;
}

/* Hover toàn bộ box */
.da .box-label:hover .box-text {
    background-color: #9F0B07;
    color: white;
}

.da .box-label:hover .box-text p {
    color: white;
}
/* Khối cha */
.da .box-image {
    position: relative;
}

/* Chữ dọc */
.da .box-image::before {
    content: "CASE";
    position: absolute;
    top: 20px;
    left: 15px;

    writing-mode: vertical-rl;
    text-orientation: mixed;

    font-size: 14px;
    letter-spacing: 4px;
    font-weight: 500;
    color: #fff;

    background: none;
    padding: 0;

    z-index: 5;
}

/* Đường kẻ dọc */
.da .box-image::after {
    content: "";
    position: absolute;
    top: 76px;
    left: 25px;
    width: 1px;
    height: 88px;
    background: rgba(255, 255, 255, 0.8);
    z-index: 5;
}
/* ================= các hiệu ứng nút  ================= */
/* ===== NÚT BANNER ===== */
.btn-double-line {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 48px;
    color: white;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 1px;
    border-radius: 999px;
    overflow: hidden;
    transition: color 0.4s ease;
}

.btn-double-line span {
    position: relative;
    z-index: 3;
}

.btn-double-line::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 999px;
}

.btn-double-line::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 3.5px solid #fff;
    border-radius: 999px;
    clip-path: inset(20% 0 20% 0);
    transition: clip-path 0.5s ease;
}

.btn-double-line:hover {
    color: #fff;
}

.btn-double-line:hover::after {
    clip-path: inset(0 0 0 0);
}
/* ===== NÚT giới thiệu ===== */

.btn-double-line1 {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 48px;
    color: #000000;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 1px;
    border-radius: 999px;
    overflow: hidden;
    transition: color 0.4s ease;
}

.btn-double-line1 span {
    position: relative;
    z-index: 3;
}

.btn-double-line1::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid rgb(161, 161, 161);
    border-radius: 999px;
}

.btn-double-line1::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 3.5px solid #9F0B07;
    border-radius: 999px;
    clip-path: inset(20% 0 20% 0);
    transition: clip-path 0.5s ease;
}

.btn-double-line1:hover {
    color: #000000;
}

.btn-double-line1:hover::after {
    clip-path: inset(0 0 0 0);
}
/* ================= footer  ================= */
.fta {
    width: 7.75rem;
    height: 7.75rem;
    position: relative;
    padding: 9px;
}

.fta img {
    display: block;
    width: 100%;
    height: 100%;
	  margin-top: 4px;
}

/* Viền ngoài cùng */
.fta::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 3px;
    top: -2px;
    border: 1px solid rgba(255, 255, 255, .3);
}

/* Viền trong */
.fta::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: -2px;
    top: 3px;
    border: 1px solid rgba(255, 255, 255, .3);
}
.mnft span.ux-menu-link__text {
    color: white;
    font-weight: 300;
}
/************ giới thiệu  *************/
.text-run {
    overflow: hidden;
}

.text-run span {
    display: inline-block;
    opacity: 0;
    transform: translateX(40px);
    animation: charRun 0.6s ease forwards;
}

@keyframes charRun {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.breadcrumb-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 3px;

    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.breadcrumb-box a {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.home-icon-fill {
    width: 14px;
    height: 14px;
    fill: #fff;   /* màu nền của ngôi nhà */
}

.bc-sep {
    opacity: 0.6;
}

.bc-current {
    opacity: 0.85;
}
.text-run {
    text-transform: uppercase;
}
.tab-nav {
    gap: 32px;
    list-style: none;
    padding: 0;
    margin: 9px;
    display: flex !important;
    justify-content: flex-end !important;
}

.tab-nav li a {
  position: relative;
  text-decoration: none;
  color: #333;
  font-weight: 600;
  padding-bottom: 6px;
  transition: color 0.3s ease;
}

.tab-nav li a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 0;
    height: 3px;
    background: #c00000;
    transition: all 0.35s ease;
    transform: translateX(-50%);
}

.tab-nav li a:hover {
  color: #c00000;
}

.tab-nav li a:hover::after {
  width: 100%;
}

.tab-nav li.active a {
  color: #c00000;
  font-weight: 600;
}

.tab-nav li.active a::after {
  width: 100%;
}
/*nền*/
.about1 {
background: linear-gradient(to bottom, #ffffff, #f5f5f5);
}
.about2 {
  background: #f9fbfc;
  border-radius: 20px;
}
/**/
.ba img{
	border-radius: 5px;
}
.stat-wrap {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* SỐ */
.stat-number .count-up {
    font-size: 64px;
    font-weight: 700;
    color: #9f0b07;
    line-height: 1;
}

/* KHỐI + và đơn vị */
.unit-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;

    /* CHỈNH CHỖ NÀY */
    margin-top: 6px;   /* ↑↓ vị trí cả khối */
    line-height: 1;    /* ép sát dòng */
}

/* DẤU + */
.unit-wrap .plus {
    font-size: 26px;
    color: #9f0b07;

    margin-bottom: 2px; /* 🔥 KÉO CHỮ LÊN GẦN + */
}

/* CHỮ */
.unit-wrap .unit {
    font-size: 18px;
    color: #222;
}
.ceo-bg {
    position: relative;
    padding: 87px 38px;
    background-color: #fff;
    background-image: url(/wp-content/uploads/2025/12/202507241703188786.png), /* ảnh bút – TRÊN */ url(/wp-content/uploads/2025/12/ceobg.png);
    background-position: right 60px bottom 60px, /* bút */ right center;
    background-size: 249px auto, /* bút */ 124% auto;
    background-repeat: no-repeat;
}
.timeline{
    position: relative;
    max-width: 1000px;
}

/* Trục dọc nét đứt */
.timeline::before{
    content: "";
    position: absolute;
    left: 140px;
    top: 0;
    bottom: 0;
    border-left: 1px dashed #e5e5e5;
}

.timeline-item{
    display: grid;
    grid-template-columns: 100px 80px 1fr;
    align-items: flex-start;
    column-gap: 20px;
    margin-bottom: 50px;
}

/* Năm */
.year{
    font-size: 20px;
    font-weight: 700;
    color: #c81d1d;
    text-align: right;
}
/* Chấm + mũi tên */
.dot-wrap{
    display: flex;
    align-items: center;
    gap: 10px;
}

.dot{
    width: 14px;
    height: 14px;
    border: 2px solid #c81d1d;
    border-radius: 50%;
    background: #fff;
}

.arrow{
    font-size: 22px;
    color: #c81d1d;
    line-height: 1;
}

/* Nội dung */
.content{
    font-size: 16px;
    line-height: 1.7;
    color: #333;
}

/* Chuẩn bị animation */
.timeline-item .arrow{
    display: inline-block;
    transition: transform 0.3s ease;
}

/* Hover cả dòng */
.timeline-item:hover .arrow{
    transform: translateX(6px);
}
.gtht{
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    padding: 20px;

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover đẩy lên nhẹ */
.gtht:hover{
    transform: translateY(-5px);
}
.tab-nav {
    display: flex;
    gap: 32px;
    list-style: none;
    padding: 0;
    margin: 9px;
    display: flex;
    justify-content: flex-end;
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
.company-name {
    font-size: 12px;
}
.transparent .header-main:not(.is-sticky) .company-name {
    color: #ffffff !important;
    transition: color 0.3s ease;
    font-weight: 900;
    font-size: 13px;
}
.btn-double-line1 {
    font-size: 12px;
}
.da .box-label .box-text p {
    color: black;
    font-size: 12px;
}
.da .box-image::after {
    content: "";
    position: absolute;
    top: 71px;
    left: 25px;
    width: 1px;
    height: 62px;
    background: rgba(255, 255, 255, 0.8);
    z-index: 5;
}
.da .box-image::before {
    content: "CASE";
    position: absolute;
    top: 20px;
    left: 15px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 12px;
    letter-spacing: 4px;
    font-weight: 500;
    color: #fff;
    background: none;
    padding: 0;
    z-index: 5;
}
.fta::after {
    content: "";
    display: block;
    width: 100%;
    height: 71%;
    position: absolute;
    left: -2px;
    top: 3px;
    border: 1px solid rgba(255, 255, 255, .3);
}
.fta::before {
    content: "";
    display: block;
    width: 100%;
    height: 71%;
    position: absolute;
    left: 3px;
    top: 8px;
    border: 1px solid rgba(255, 255, 255, .3);
}
}