/*
Theme Name: Proton
Description: Giao dien Proton Fusion port 1:1 tu mau HTML Leafix.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: proton
*/

/*
 * Logo Proton (600x277) thay logo Leafix (201x56): giu dung chieu cao o logo cua mau.
 * Chieu cao = logo Leafix khi mau ep width (header 150px, offcanvas 190px / 130px).
 */
.proton-logo { width: auto !important; }
.proton-logo--header { height: 56px; }
.proton-logo--offcanvas { height: 53px; }
.proton-logo--footer { height: 56px; }
@media (max-width: 1199px) {
	.proton-logo--header { height: 42px; }
}
@media (max-width: 575px) {
	.proton-logo--offcanvas { height: 36px; }
}

/* Le 2 ben o man dien thoai: mau de 12px (gutter Bootstrap), noi dung sat mep -> 16px (user yeu cau). */
@media (max-width: 575px) {
	.container { padding-left: 16px; padding-right: 16px; }
}

/* Khoi "Ve chung toi" trang chu: mau giu margin-left 35px ca khi 2 cot xep chong (< 992px) -> lech trai/phai. */
@media (max-width: 991px) {
	.about-content-style-2.style-about-one { margin-left: 0; }
}

/* Hop "Bo Ba Chong Suong" o hero: mau cho xuong dong < 992px -> anh 176px nam goc trai, nua phai trong (user yeu cau). Giu 1 hang: chu trai, anh phai. */
.hero-1 .garden-content-area .garden-text { text-wrap: pretty; color: rgba(255, 255, 255, 0.82); }
.hero-1 .garden-content-area .garden-text strong { color: var(--white); font-weight: 600; }
.hero-1 .garden-content-area .garden-thumb img { display: block; border-radius: 6px; }
@media (max-width: 991px) {
	.hero-1 .garden-content-area { flex-wrap: nowrap; justify-content: space-between; }
	.hero-1 .garden-content-area .garden-text { flex: 1 1 auto; margin-bottom: 0; }
	.hero-1 .garden-content-area .garden-thumb { flex: 0 0 auto; }
}
@media (max-width: 575px) {
	.hero-1 .garden-content-area { gap: 14px; padding: 8px; }
	.hero-1 .garden-content-area .garden-text { margin-left: 8px; font-size: 14px; line-height: 1.6; }
	.hero-1 .garden-content-area .garden-thumb { width: 108px; }
	.hero-1 .garden-content-area .garden-thumb img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; }
}

/* Soat mobile 2026-10-15 (user yeu cau): desktop giu nguyen mau, tru khung anh San pham truoc/sau va lop toi duoi chu khung anh Giai phap (loi o moi man hinh). */
/* Con tro chuot tuy bien cua mau: may cam ung khong co chuot -> cham dung o goc trai / cho vua cham. */
@media (hover: none), (pointer: coarse) {
	.mouseCursor { display: none !important; }
}
/* San pham truoc/sau (moi man hinh): anh san pham that ~500px hien nguyen co -> bop chu thanh cot hep. Khoa khung = anh mau 194x169. */
.project-details-wrapper .prev-item .prev-left,
.project-details-wrapper .prev-item .prev-right { flex: 1 1 0; min-width: 0; }
.project-details-wrapper .prev-item .prev-right { justify-content: flex-end; }
.project-details-wrapper .prev-item .thumb { flex: 0 0 194px; height: 169px; overflow: hidden; border-radius: 10px; }
.project-details-wrapper .prev-item .thumb img { object-fit: cover; }
.project-details-wrapper .prev-item .content { min-width: 0; }
/* Giai phap, khung anh "Cong nghe cao phan tu" (moi man hinh): mau dat chu trang thang len anh; anh AI moi sang -> chu chim. Them lop toi duoi phan chu. */
.choose-us-section-2 .choose-thumb-2::after { content: ""; position: absolute; inset: 0; border-radius: 20px; pointer-events: none;
	background: linear-gradient(to top, rgba(6, 30, 12, 0.88) 0%, rgba(6, 30, 12, 0.6) 30%, rgba(6, 30, 12, 0) 55%); }
.choose-us-section-2 .choose-thumb-2 .content { z-index: 2; }
.choose-us-section-2 .choose-thumb-2 .content .title-2 { text-wrap: balance; }
.choose-us-section-2 .choose-thumb-2 .content .title-2,
.choose-us-section-2 .choose-thumb-2 .content .choose-list ul li { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.choose-us-section-2 .choose-thumb-2 .content .choose-list ul li { display: flex; align-items: flex-start; }
.choose-us-section-2 .choose-thumb-2 .content .choose-list ul li img { flex: 0 0 auto; margin-top: 4px; }
@media (max-width: 1199px) {
	.choose-us-section-2 .choose-thumb-2::after { inset: 0 20px; }
}
@media (max-width: 767px) {
	.choose-us-section-2 .choose-thumb-2::after { background: linear-gradient(to top, rgba(6, 30, 12, 0.9) 0%, rgba(6, 30, 12, 0.7) 50%, rgba(6, 30, 12, 0) 85%); }
}
/* Gioi thieu "Con so an tuong": mau chia 3 cot o 768-991 cho 4 o -> o thu 4 le dong. Xep 2x2. */
@media (min-width: 576px) and (max-width: 991px) {
	.speaks-wrapper-2 { grid-template-columns: repeat(2, 1fr); }
}
/* Cac bo cuc cua mau doi o moc 1199 / 991 / 575 -> sua theo dung moc do (tablet 768 cung loi). */
@media (max-width: 1199px) {
	/* Trang chu "Vi sao chon": cum hotline bi bop hep, tieu de 4 y rot chu le. */
	.choose-thumb-items .content-area p { max-width: none; }
	.choose-thumb-items .content-area .phn-icon-area { flex: 1 0 100%; }
	.choose-thumb-items .content-area .phn-icon-area .icon { flex: 0 0 40px; }
	.choose-thumb-items .content-area .phn-icon-area .content span { display: block; margin-bottom: 4px; }
	.choose-thumb-items .content-area .phn-icon-area .content p { white-space: nowrap; }
	.choose-content-items .choose-list-items .icon-area .title { text-wrap: balance; }
	/* Bai truoc/sau: mau khoa tieu de 100-117px -> 3-4 dong. Chia doi hang, tieu de dung het phan cua minh. */
	.news-details-content-area .news-details-content .content .soil-from > a { flex: 1 1 0; min-width: 0; }
	.news-details-content-area .news-details-content .content .soil-from :is(.first-from, .sec-from) .title-6 { max-width: none; text-wrap: pretty; }
	/* Giai phap "Gia tri cot loi": mau zic-zac (y chan dao so len tren) -> doc thanh 01 02 sat nhau. Moi y: so o tren, bo cham. */
	.work-process-items-2,
	.work-process-items-2.style-2 { display: flex; flex-direction: column; align-items: center; margin-top: 0; padding: 22px 0; border-bottom: 1px solid #DBDBDB; }
	.work-process-wrapper-2 .row > div:last-child .work-process-items-2 { border-bottom: 0; }
	.work-process-items-2 .dot { display: none; }
	.work-process-items-2 .title-2 { order: -1; margin: 0 0 10px; font-weight: 600; color: var(--theme-2); }
	.work-process-items-2 .content { margin-top: 0 !important; }
}
@media (max-width: 991px) {
	/* Footer trang con "Lien ket nhanh": mau can giua doc + day cot 2 sat mep phai -> 2 cot cung dinh, chia doi. */
	.footer-widget-wrapper-2 .single-footer-widget .quick-area .footer-list { align-items: flex-start; justify-content: flex-start; }
	.footer-widget-wrapper-2 .single-footer-widget .quick-area .footer-list > ul { flex: 0 0 50%; }
	/* San pham truoc/sau: moi muc 1 hang ngang du rong, anh nho co dinh. */
	.project-details-wrapper .prev-item { gap: 16px; padding-top: 32px; }
	.project-details-wrapper .prev-item .prev-left,
	.project-details-wrapper .prev-item .prev-right { gap: 14px; }
	.project-details-wrapper .prev-item .thumb { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 8px; }
	.project-details-wrapper .prev-item .content .title-4 { font-size: 17px; line-height: 1.35; margin-top: 6px; text-wrap: pretty; }
}
@media (max-width: 575px) {
	/* Bai truoc/sau o man hep: moi muc full ngang, icon nho lai. */
	.news-details-content-area .news-details-content .content .soil-from { padding: 18px; gap: 14px; }
	.news-details-content-area .news-details-content .content .soil-from > a { flex: 0 0 100%; gap: 14px; }
	.news-details-content-area .news-details-content .content .soil-from .sec-from { justify-content: flex-end; }
	.news-details-content-area .news-details-content .content .soil-from :is(.first-from, .sec-from) .icon { flex: 0 0 44px; width: 44px; height: 44px; line-height: 44px; }
	.news-details-content-area .news-details-content .content .soil-from :is(.first-from, .sec-from) .title-6 { font-size: 16px; line-height: 1.4; }
	/* Lien he: icon bi bop khi email dai -> giu 60px, email duoc xuong dong; 4 o cach deu 16px (mau: 30px trong nhom, 15px giua 2 nhom). */
	.contact-left-content-in .contact-icon-area { gap: 16px; }
	.contact-left-content-in .contact-icon-area.style-2 { margin-top: 16px; }
	.contact-left-content-in .contact-icon-area .icon-items { padding: 22px; gap: 16px; }
	.contact-left-content-in .contact-icon-area .icon-items .icon { flex: 0 0 60px; }
	.contact-left-content-in .contact-icon-area .icon-items .content { min-width: 0; }
	.contact-left-content-in .contact-icon-area .icon-items .content p { max-width: none; overflow-wrap: anywhere; text-wrap: balance; }}

/* Ra UI tung px 2026-10-15 (user yeu cau, ca desktop). */
/* Le desktop: header / hero / khoi Giai phap dung container rong 1680-1730px -> o 1200-1759px chu va logo sat mep 12px.
   Ep ve 1320px thi menu header rot 2 dong (header chat kin 1440px) -> giu container rong, le 32px; bu cho header bang cach rut khoang logo-menu 80px -> 40px. */
@media (min-width: 1200px) and (max-width: 1759px) {
	.header-1 .header-left { gap: 40px; }
	.header-1 .container,
	.hero-1 .container,
	.service-section .container,
	.service-section-inner .container { padding-left: 32px; padding-right: 32px; }
}
/* The san pham: ten + danh muc luon hien (mau chi hien khi re chuot -> dien thoai khong thay ten). Re chuot van doi anh + hien nut. */
.project-thumb-box-items::before { opacity: 1; visibility: visible; height: 55%; }
.project-thumb-box-items .hover-content .content { opacity: 1; visibility: visible; left: 24px; right: 72px; bottom: 24px; }
.project-thumb-box-items .hover-content .content .title { font-size: 20px; line-height: 1.3; text-wrap: balance; }
.project-thumb-box-items .hover-content .arrow-icon { bottom: 24px; right: 24px; }
.project-thumb-box-items img { border-radius: 20px; }
@media (hover: none) {
	.project-thumb-box-items .hover-content .arrow-icon { opacity: 1; visibility: visible; }
}
/* The bai (trang chu, Giai phap): cao bang nhau trong hang, nut "Doc them" nam day the. */
.service-section .row > [class*="col-"],
.service-section-inner .row > [class*="col-"] { display: flex; }
.service-box-items,
.service-box-items-inner { display: flex; flex-direction: column; width: 100%; }
.service-box-items .link-btn { margin-top: auto; }
.service-box-items-inner .content { display: flex; flex-direction: column; flex: 1 1 auto; }
.service-box-items-inner .content .link-btn { margin-top: auto; padding-top: 30px; }
/* Tieu de khong rot chu le dong. */
h1, h2, h3, h4 { text-wrap: balance; }
/* Footer trang chu: 2 dong gio lam viec dinh nhau "17:30Chu nhat" (flex khong co gap o desktop). */
@media (min-width: 1200px) {
	.footer-top-wrapper .content { gap: 28px; }
}
/* Footer trang con "Lien ket nhanh" desktop: cung dinh, chia doi (mobile/tablet da sua o tren). */
.footer-widget-wrapper-2 .single-footer-widget .quick-area .footer-list { align-items: flex-start; justify-content: flex-start; }
.footer-widget-wrapper-2 .single-footer-widget .quick-area .footer-list > ul { flex: 0 0 50%; }
/* Nut ve dau trang (fixed 50px, cach phai 30px) de len dong ban quyen / link cuoi footer. */
@media (min-width: 768px) and (max-width: 1519px) {
	.footer-bottom-area { padding-right: 72px; }
}
@media (max-width: 767px) {
	.footer-bottom-area { padding-bottom: 72px; }
}
/* So dem: chu so deu be ngang, khong rung khi dang dem. */
.count, .counter-title { font-variant-numeric: tabular-nums; }
/* Hoa tiet nen khoi Giai phap trang chu bi keo meo (31% desktop, 93% dien thoai). */
.service-section .service-bg-shape img { object-fit: cover; }
/* Vung bam tren dien thoai: nut gui email ban tin 14x28px, link footer cao 16-19px. */
@media (max-width: 767px) {
	.footer-subscribe-content .icon-btn,
	footer form button.icon-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
	footer ul li a { display: inline-block; padding-top: 8px; padding-bottom: 8px; }
	footer ul li:not(:last-child) { margin-bottom: 4px !important; }
	.footer-bottom-area a { display: inline-block; padding-top: 10px; padding-bottom: 10px; }
}
/* Trang tin / bai o dien thoai: chu cac khung lech 44/45/47px (vien 1px + padding 28-30) -> cung 44px nhu sidebar. */
@media (max-width: 575px) {
	.news-items .news-content,
	.news-details-contact-box { padding-left: 27px; padding-right: 27px; }
	.news-details-content .content { padding-left: 27px; padding-right: 27px; }
}

/* Noi dung bai viet (HTML cu cua site PHP) va cau bao khong co bai o trang tin. */
.proton-post-body img { max-width: 100%; height: auto; }
.proton-post-body p { margin-bottom: 16px; }
.proton-news-empty { padding: 40px 0; }

/* Anh bai that co ti le khac nhau: khoa khung theo ti le anh mau de the cung hang deu nhau. */
.news-box-items .thumb img { height: auto; aspect-ratio: 410 / 300; }
@media (min-width: 768px) {
	.news-left-content-inner .news-items .news-thumb img { height: auto; aspect-ratio: 840 / 400; }
}
.news-details-content-area .news-details-content .news-image img { height: auto; aspect-ratio: 1290 / 650; object-fit: cover; }
.main-sidebar .recent-post-area .recent-items .recent-thumb { flex: 0 0 100px; }
.main-sidebar .recent-post-area .recent-items .recent-thumb img { width: 100px; height: 100px; object-fit: cover; }

/* So trang hien tai: chu trang tren nen xanh (main.css de chu toi). Man hep thu nho nut de 1 hang. */
.page-nav-wrap ul li .page-numbers.current { color: var(--white); }
@media (max-width: 575px) {
	.page-nav-wrap ul li .page-numbers { width: 40px; height: 40px; line-height: 40px; font-size: 14px; }
}

/* Tieu de trong noi dung bai cu (h1-h3) nho hon tieu de bai. */
.proton-post-body h1 { font-size: 30px; margin: 24px 0 12px; }
.proton-post-body h2 { font-size: 26px; margin: 24px 0 12px; }
.proton-post-body h3 { font-size: 22px; margin: 20px 0 10px; }
@media (max-width: 575px) {
	.proton-post-body h1 { font-size: 24px; }
	.proton-post-body h2 { font-size: 22px; }
	.proton-post-body h3 { font-size: 19px; }
}

/* Catalog san pham (bo cuc Du an): bang thanh phan cuon ngang trong khung o man hep, anh the vuong nhu anh san pham. */
.proton-product-ingredients { overflow-x: auto; margin-bottom: 30px; }
.proton-product-ingredients table { width: 100%; border-collapse: collapse; }
.proton-product-ingredients th,
.proton-product-ingredients td { padding: 10px 14px; border: 1px solid #D8DDE1; }
.proton-product-ingredients th { background-color: #F3F5EF; }
.project-thumb-box-items img { aspect-ratio: 1 / 1; object-fit: cover; }
.project-thumb-box-items .hover-content .title { overflow-wrap: anywhere; }
/* Anh chinh trang chi tiet: anh san pham vuong, keo het be ngang thi qua cao -> gioi han va can giua. */
.project-details-wrapper > .project-details-thumb img { display: block; width: auto; max-width: 100%; max-height: 640px; margin: 0 auto; }

/* Cau tieng Viet dai (doan "Vi sao chon", cau hoi FAQ, dong duoi "Con cau hoi?"): mau viet hoa dau moi chu -> giu nhu go. */
.choose-content-2 .choose-text,
.faq-right-items-inner-two .accordion-box .block .acc-btn,
.faq-left-items-inner .accordion-box .block .acc-btn,
.faq-left-items-inner-2 .faq-icon-area .icon-items .content p { text-transform: none; }
/* Cau hoi FAQ dai xuong dong de len icon "+" (dat tuyet doi right 24px): chua cho icon ben phai;
   man >= 1400px mau de line-height 1 lam dau tieng Viet 2 dong dinh nhau -> 1.4 nhu man nho cua mau. */
.faq-right-items-inner-two .accordion-box .block .acc-btn,
.faq-left-items-inner .accordion-box .block .acc-btn { padding-right: 56px; line-height: 1.4; }

/* Breadcrumb trang tin: tieu de bai dai chiem het hang flex -> "Trang chu" bi bop 2 dong; giu muc dau tren 1 dong, chi tieu de xuong dong. */
.breadcrumb-wrapper .page-heading .breadcrumb-list li:not(:last-child) { flex-shrink: 0; white-space: nowrap; }

/* Form (giai doan 4): o bay chong spam an ngoai man hinh; dong thong bao duoi nut gui, rong thi an. */
.proton-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.proton-form-message { margin: 12px 0 0; font-size: 15px; line-height: 1.5; }
.proton-form-message:empty { display: none; }
.proton-form-message.is-success { color: var(--theme-2); }
.proton-form-message.is-error { color: #d93025; }
/* Nen xanh dam (form Lien he, chan trang): chu thanh cong mau xanh non, loi mau do nhat cho doc duoc. */
/* Chan trang trang chu: mau to mau moi <p> trong .footer-subscribe-content (0,3,1) -> them lop cho du manh. */
.contact-form-box .proton-form-message.is-success,
footer .proton-form-message.is-success,
.footer-widget-wrapper .footer-subscribe-content .proton-form-message.is-success { color: var(--theme); }
.contact-form-box .proton-form-message.is-error,
footer .proton-form-message.is-error,
.footer-widget-wrapper .footer-subscribe-content .proton-form-message.is-error { color: #ffb4ab; }

/* The san pham khi re chuot: bo lop kinh mo phu ca the (::before, backdrop-filter blur) cua mau theo yeu cau;
   thay bang dai toi mo dan chi o nua duoi (sau ten + danh muc) cho chu de doc. Van an/hien theo hover nhu mau. */
.project-thumb-box-items::before {
	inset: auto 0 0 0;
	width: 100%;
	height: 75%;
	border-radius: 0 0 20px 20px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0) 100%);
	backdrop-filter: none;
	pointer-events: none;
}
/* Nut mui ten: mau o goc tren phai -> goc duoi phai, ngang dong ten (user yeu cau); chu chua cho ben phai cho nut. */
.project-thumb-box-items .hover-content .arrow-icon { top: auto; bottom: 60px; }
.project-thumb-box-items .hover-content .content { right: 112px; }

/* Sapo bai (post_excerpt = detail_short site cu): site cu in duoi anh bia, truoc than bai. */
.proton-post-lead { margin: 16px 0 20px; font-weight: 500; color: var(--header); }

/* CTA trang chu: 3 dong san pham la link (mau chi to mau .title trang); link ke thua mau trang, re chuot mau theme. */
.cta-content-items .cta-text-items .cta-items .title a { color: inherit; }
.cta-content-items .cta-text-items .cta-items .title a:hover { color: var(--theme); }