/* =========================================================
FLATSOME NATIVE — style cho các trang dựng bằng element gốc
Flatsome ([section]/[row]/[col]/[ux_text]/[ux_image]/[button]).
Section giữ class thiết kế (.about, .sectors…) nên CSS gốc vẫn
ăn; file này chỉ map phần layout từ flex cũ sang grid Flatsome.
========================================================= */
/* ---- Trang /v2/* : section Flatsome chỉ là vỏ trong suốt,
markup design nguyên văn nằm trong ux_text bên trong ---- */
.section.v2sec{padding:0;margin:0;display:block;background:transparent;}
.section.v2sec>.section-content{padding:0;}
.section.v2sec .ux-text{margin:0;}
/* ---- Khung chung ---- */
.page .section .row{max-width:none;}
.page .section-content{padding:0;}
.page .section{margin:0;}
.page .col{padding-bottom:0;}
.page .row:not(.row-collapse){margin-left:-14px;margin-right:-14px;}
.page .row:not(.row-collapse)>.col{padding-left:14px;padding-right:14px;}
.sh-anchor{display:block;position:relative;top:-20px;}
/* Khoảng cách phần tử: dùng [gap], bỏ margin mặc định Flatsome ở mọi ngữ cảnh
(trong text_box, Text render class .text thay vì .ux-text) */
.page .ux-text{margin:0;}
.page .col-inner>.text{margin:0;}
.page .text-box .text{margin:0;}
.page .col .img{margin-bottom:0;}
.page .text-box .button{margin:0;}
/* Gutter row theo số đo thiết kế (mặc định Flatsome = 28px) */
.page .row.sh-gutter-14{margin-left:-7px;margin-right:-7px;width:calc(100% + 14px);max-width:none;}
.page .row.sh-gutter-14>.col{padding-left:7px;padding-right:7px;}
.page .row.sh-gutter-22{margin-left:-11px;margin-right:-11px;width:calc(100% + 22px);max-width:none;}
.page .row.sh-gutter-22>.col{padding-left:11px;padding-right:11px;}
.page .row.sh-gutter-40{margin-left:-20px;margin-right:-20px;width:calc(100% + 40px);max-width:none;}
.page .row.sh-gutter-40>.col{padding-left:20px;padding-right:20px;}
.page .row.sh-gutter-44{margin-left:-22px;margin-right:-22px;width:calc(100% + 44px);max-width:none;}
.page .row.sh-gutter-44>.col{padding-left:22px;padding-right:22px;}
.page .row.sh-gutter-56{margin-left:-28px;margin-right:-28px;width:calc(100% + 56px);max-width:none;}
.page .row.sh-gutter-56>.col{padding-left:28px;padding-right:28px;}
.page .row.sh-gutter-80{margin-left:-40px;margin-right:-40px;width:calc(100% + 80px);max-width:none;}
.page .row.sh-gutter-28{margin-left:-14px;margin-right:-14px;width:calc(100% + 28px);max-width:none;}
.page .row.sh-gutter-28>.col{padding-left:14px;padding-right:14px;}
.page .row.sh-gutter-24{margin-left:-12px;margin-right:-12px;width:calc(100% + 24px);max-width:none;}
.page .row.sh-gutter-24>.col{padding-left:12px;padding-right:12px;}
.page .row.sh-gutter-80>.col{padding-left:40px;padding-right:40px;}
/* Cột trái/phải khối "Về chúng tôi" theo design: 555px / 605px (trên khung 1240) */
@media (min-width:1200px){
.page .row.sh-gutter-80{flex-wrap:nowrap;}
.page .row.sh-gutter-80>.col.sh-about-left{width:635px;max-width:635px;flex:0 0 635px;}
.page .row.sh-gutter-80>.col.sh-about-right{width:685px;max-width:685px;flex:1 1 685px;min-width:0;}
}
/* Gutter lớn trên mobile: xem block "MOBILE: gutter lớn về mốc 28px" ở CUỐI FILE
(phải đặt sau mọi khai báo .sh-gutter-* mới thắng được, vd .sh-gutter-48 ở dưới). */
/* ---- Nút theo thiết kế (icon mũi tên như design qua ::after) ---- */
.button.sh-btn{
margin:0;border-radius:0;text-transform:none;letter-spacing:0;
font-size:16px;font-weight:700;line-height:normal;min-height:0;
padding:15px 30px;box-shadow:none;
display:inline-flex;align-items:center;gap:10px;
}
.button.sh-btn>span{padding:0;margin:0;}
.button.sh-btn::after{content:"";width:18px;height:18px;flex:none;background:no-repeat center/contain;}
.button.sh-btn--primary{background-color:var(--brand);color:#fff;border:0;}
.button.sh-btn--primary:hover{background-color:var(--brand-deep);color:#fff;}
.button.sh-btn--primary::after{background-image:url("../site/ic-arrow-right.svg");}
.button.sh-btn--outline{background:transparent;border:1px solid var(--ink);color:var(--ink);}
.button.sh-btn--outline:hover{background:var(--ink);color:#fff;}
.button.sh-btn--outline::after{background-image:url("../site/ic-arrow-right-dark.svg");}
.button.sh-btn--outline:hover::after{filter:brightness(0) invert(1);}
/* ---- Trung hoà typography Flatsome trong banner (.banner p margin 1em,
.banner h1 3.5em/line-height 1/margin .2em… đè class thiết kế) ---- */
.page .banner p{margin:0;padding:0;}
.page .banner .button{margin:0;}
.page .banner h1,.page .banner h2,.page .banner h3{margin:0;padding:0;}
.page .banner h1{font-size:54px;font-weight:700;line-height:1.1;letter-spacing:-.54px;}
@media (max-width:640px){
.page .banner h1{font-size:31px;line-height:1.15;letter-spacing:0;}
}
/* ---- HERO (ux_banner) ---- */
.banner.sh-hero{margin:0;}
.sh-hero .hero__dots{justify-content:center;}
.page .sh-hero .hero__sub{margin:0 auto;}
.sh-hero .text-box{width:100%;}
/* Button trong text_box: inline-flex để text-align:center của text_box tự căn giữa */
.page .banner .text-box a.button{display:inline-flex;margin:0!important;}
/* Nền section: Flatsome đặt background-position 50% 0 — design dùng center */
.page .section-bg{background-position:50% 50%!important;}
.page .section-bg img{object-position:50% 50%;}
/* ---- THẺ SỐ LIỆU (ux_banner nhỏ) ---- */
.banner.sh-stat{margin:0;box-shadow:0 4px 16px rgba(0,0,0,.3);}
.sh-stat .banner-bg::after{
content:"";position:absolute;inset:0;
background:linear-gradient(to bottom,rgba(147,17,22,0) 50.177%,rgba(147,17,22,.8) 100%);
}
.sh-stat .text-box{width:100%;padding:20px;}
.sh-stat-line{display:flex;align-items:flex-end;justify-content:space-between;width:100%;gap:10px;}
.sh-stat-line p{margin:0;}
/* ---- Chữ trong 3 thẻ số liệu (section «Về chúng tôi») ----
VẤN ĐỀ 1 — admin kéo "Font size" trong UX Builder KHÔNG ăn: builder xuất ra
`#text-box-xxx .text-box-content{font-size:%}` (scale theo PHẦN TRĂM của thẻ cha),
nhưng page-home.css khai font-size PX CỨNG cho .stat__label/.stat__num/small —
px không kế thừa % của cha nên slider vô tác dụng. → đổi sang em để scale được.
VẤN ĐỀ 2 — «chỗ to chỗ nhỏ»: design cho .stat__num 36px nhưng chỉ 26px
((m²), tỷ, gần). → cho small BẰNG .stat__num.
VẤN ĐỀ 3 — nội dung admin nhập dài ("gần 400 người") + white-space:nowrap của
design ⇒ tràn khỏi thẻ. → cho phép xuống dòng, căn phải.
Selector .sh-stat (0,2,0) thắng .stat__num (0,1,0) của page-home.css ở CẢ media
query mobile — cỡ chữ mobile do .res-text của Flatsome scale theo em.
⚠️ GỐC em Ở ĐÂY LÀ 10px, KHÔNG PHẢI 16px: Flatsome đặt font-size:10px cho
.text-box.banner-layer để điều khiển % của builder tính theo mốc tròn.
Vậy 1em = 10px → 2.4em = 24px, 1.6em = 16px. (đã đo bằng CDP, đừng đoán 16px) */
.sh-stat .stat__label{font-size:1.6em;} /* 16px, giữ như design */
.sh-stat .stat__num{
font-size:2.4em;line-height:1.25;letter-spacing:-.3px; /* 36px → 24px */
white-space:normal;text-align:right;min-width:0;
}
.sh-stat .stat__num small{font-size:1em;font-weight:800;} /* bằng phần số, không nhỏ hơn */
.sh-stat .stat__label{min-width:0;}
/* ---- THẺ LĨNH VỰC / GIÁ TRỊ CỐT LÕI (col thành card) ---- */
.sh-sector-card .col-inner,
.sh-value-card .col-inner{
height:100%;display:flex;flex-direction:column;
background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden;
box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.sh-sector-card .img img{width:100%;height:441px;object-fit:cover;background:linear-gradient(to bottom,#edf2f7,#fcfcff);}
.sh-value-card .img img{width:100%;aspect-ratio:1536/1024;object-fit:cover;}
.sh-sector-body,.sh-value-body{
flex:1;display:flex;flex-direction:column;gap:12px;align-items:flex-start;
padding:28px 32px 32px;color:#fff;
background:linear-gradient(-90deg,#b3171d 0%,#771519 100%);
}
.sh-value-body{position:relative;overflow:hidden;padding:40px 32px 32px;}
.sh-sector-body p,.sh-value-body p{margin:0;}
/* Hover thẻ «Giá trị cốt lõi»: nhấc nhẹ + bóng sâu hơn một chút.
Transform đặt trên .col-inner (KHÔNG phải .col) để không phá negative-margin
gutter của .sh-gutter-28 và height chain stretch của row. */
.sh-value-card .col-inner{
transition:transform .25s ease, box-shadow .25s ease;
will-change:transform;
}
.sh-value-card:hover .col-inner{
transform:translateY(-6px);
box-shadow:0 16px 30px rgba(0,0,0,.36);
}
@media (prefers-reduced-motion:reduce){
.sh-value-card .col-inner{transition:none;}
.sh-value-card:hover .col-inner{transform:none;}
}
/* ---- CHỨNG NHẬN (col thành thẻ .badge) ---- */
.sh-cert-card .col-inner{
height:100%;display:flex;flex-direction:column;gap:16px;align-items:center;
padding:30px 40px 20px;background:var(--bg);border:1px solid var(--line);
}
.sh-cert-card .img{width:100%;}
.sh-cert-card .img img{width:100%;aspect-ratio:258/327;object-fit:cover;}
.sh-cert-card .col-inner>.text{display:flex;flex-direction:column;align-items:center;}
.sh-cert-card .col-inner>.text p{margin:0;}
.sh-certs-bar{display:flex;align-items:center;justify-content:space-between;width:100%;}
.sh-certs-dots{display:flex;align-items:center;justify-content:center;gap:8px;padding-top:10px;}
.sh-certs-dots .dot{background:rgba(108,108,108,.5);}
.sh-certs-dots .dot.is-active{background:var(--brand);}
/* ---- BANNER TRANG CON (ux_image full-bleed trong .page) ---- */
.img.sh-pagebanner{margin:0;}
.img.sh-pagebanner img{width:100%;height:380px;object-fit:cover;}
@media (max-width:768px){ .img.sh-pagebanner img{height:200px;} }
/* ---- TIMELINE (row.timeline thay flex cũ) ----
Cột Flatsome = 50% container; đệm 60px mỗi bên để chấm nối (+60px từ mép
thẻ) rơi đúng đường kẻ giữa. */
.row.timeline{position:relative;flex-wrap:nowrap;}
.row.timeline::before{
content:"";position:absolute;left:50%;top:0;bottom:0;width:1.5px;z-index:0;
background:repeating-linear-gradient(to bottom, var(--brand) 0 2px, transparent 2px 4px);
}
.row.timeline>.col{padding:0;}
.row.timeline .timeline__col{width:50%;flex:none;display:block;}
/* adapt.css ép .page span về var(--font) → trả năm timeline về Bebas Neue như design */
.page span.tl-year{font-family:"Bebas Neue",var(--font);}
/* Flatsome: .row-collapse>.col{padding:0!important} → phải !important lại padding design */
.row.timeline .timeline__col--left{padding:0 60px 0 0!important;}
.row.timeline .timeline__col--right{padding:140px 0 0 60px!important;}
.row.timeline .col-inner>.text,.row.timeline .col-inner>.ux-text{margin:0;}
.row.timeline .tl-row{margin:0;}
.timeline__col--left .tl-row::before{width:60px;}
.timeline__col--right .tl-row::before{width:60px;}
.timeline__col--left .tl-row::after{left:calc(100% + 60px);}
.timeline__col--right .tl-row::after{right:calc(100% + 60px);}
@media (max-width:1024px){
.row.timeline{flex-wrap:wrap;}
.row.timeline::before{display:none;}
.row.timeline .timeline__col{width:100%;padding:0!important;}
.row.timeline .timeline__col--right{padding:24px 0 0!important;}
}
/* ---- TẦM NHÌN / SỨ MỆNH (2 card đều chiều cao như flex stretch design) ---- */
.sh-vision-col .col-inner,
.sh-vision-col .col-inner>.text,
.sh-vision-col .col-inner>.ux-text,
.sh-vision-col .vision-card{height:100%;}
/* ---- HỒ SƠ CÔNG TY ---- */
/* Cột theo design: bảng 633px cứng + sơ đồ chiếm phần còn lại (gutter 40) */
@media (min-width:1200px){
.page .row.sh-profile-row{flex-wrap:nowrap;}
.page .row.sh-profile-row>.col.sh-profile-left{width:673px;max-width:673px;flex:0 0 673px;}
.page .row.sh-profile-row>.col.sh-profile-right{width:auto;max-width:none;flex:1 1 auto;min-width:0;}
}
.sh-profile-table .profile-table{width:100%;}
/* Sơ đồ stretch bằng chiều cao bảng: ảnh absolute như design để không tự sinh chiều cao */
.sh-profile-right .col-inner{height:100%;}
.img.sh-chart{margin:0;height:100%;}
.img.sh-chart .img-inner{
border:1px dashed var(--brand-deep);border-radius:14px;background:var(--bg);
transition:background-color .18s ease;height:100%;position:relative;
}
.img.sh-chart:hover .img-inner{background:var(--bg-alt);}
.img.sh-chart .img-inner a{display:block;position:static;}
.img.sh-chart img{
position:absolute;inset:16px;width:calc(100% - 32px);height:calc(100% - 32px);
object-fit:contain;cursor:zoom-in;
}
@media (max-width:1199px){
.img.sh-chart{height:auto;}
.img.sh-chart .img-inner{height:auto;min-height:320px;padding:16px;}
.img.sh-chart img{position:static;width:100%;height:auto;}
}
/* ---- NHÀ MÁY ---- */
.img.sh-factory-photo img{width:100%;height:440px;object-fit:cover;border-radius:16px;box-shadow:0 4px 16px rgba(0,0,0,.3);}
@media (max-width:1024px){ .img.sh-factory-photo img{height:300px;} }
.sh-factory-specs{display:flex;flex-direction:column;gap:24px;align-items:flex-start;}
/* ---- LIÊN HỆ ---- */
.sh-contact-info{display:flex;flex-direction:column;gap:22px;align-items:flex-start;}
.sh-contact-info p{margin:0;}
.ux-text.cform{margin:0;}
/* Cột theo design: cinfo 430px cứng + form chiếm phần còn lại (gutter 56) */
@media (min-width:1200px){
.page .row.sh-contact-row{flex-wrap:nowrap;}
.page .row.sh-contact-row>.col.sh-cinfo-col{width:486px;max-width:486px;flex:0 0 486px;}
.page .row.sh-contact-row>.col.sh-cform-col{width:auto;max-width:none;flex:1 1 auto;min-width:0;}
}
/* Text class .cform trong col: card form theo CSS design (page-lienhe .cform) */
.col-inner>.text.cform{margin:0;}
/* CF7 gom mọi control vào 1
+ → xếp dọc gap 14 đúng design */
.cform .wpcf7{width:100%;}
.cform .wpcf7-form p{margin:0;display:flex;flex-direction:column;gap:14px;align-items:stretch;}
.cform .wpcf7-form br{display:none;}
.cform .wpcf7-form .wpcf7-form-control-wrap{display:block;width:100%;}
/* Flatsome ép input height 2.507em → trả về padding design; display:block bỏ line-box dư */
.cform .wpcf7-form .wpcf7-form-control-wrap input{width:100%;display:block;height:auto;margin:0;}
/* CF7 đặt rows=10 → ép về đúng 112px design (vẫn resize dọc được) */
.cform .wpcf7-form .wpcf7-form-control-wrap textarea{width:100%;display:block;height:112px;min-height:112px;margin:0;}
/* CF7 đặt rows=10 → ép về đúng 112px design (vẫn resize dọc được) */
.cform textarea.wpcf7-textarea{height:112px;min-height:112px;}
/* Flatsome đặt margin-bottom cho form (1.3em) + input submit (~15px) — flex item
không collapse margin nên card form cao dư ~36px → về 0 như design */
.cform .wpcf7-form{margin:0;}
.cform .wpcf7-form .wpcf7-submit{margin:0;}
/* Spinner CF7 chèn sau nút submit: visibility:hidden vẫn chiếm chỗ → bỏ khỏi flow */
.cform .wpcf7-form .wpcf7-spinner{display:none;}
/* Khối thông báo CF7 chỉ hiện khi có nội dung (aria-hidden do CF7 JS quản) */
.cform .wpcf7-form.init .wpcf7-response-output,
.cform .wpcf7-response-output[aria-hidden="true"]{display:none;}
.cform .wpcf7-response-output{margin:0;}
/* Bản đồ: section class .cmap đã có CSS; ảnh + nút bên trong */
.cmap .img{margin:0;position:static;}
.cmap .img img{width:100%;height:530px;object-fit:cover;}
.cmap .button.cmap__btn{
position:absolute;left:50%;bottom:32px;transform:translateX(-50%);
margin:0;display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:999px;
background:var(--bg);color:var(--ink);font-size:15px;font-weight:700;text-transform:none;letter-spacing:0;
box-shadow:0 6px 20px rgba(0,0,0,.22);border:0;min-height:0;line-height:1.2;
transition:transform .15s ease;
}
.cmap .button.cmap__btn:hover{transform:translateX(-50%) translateY(-2px);color:var(--brand);}
@media (max-width:600px){ .cmap .img img{height:340px;} }
/* ---- LƯỚI TIN TỨC TĨNH (v2, granular): grid 2 cột thay .news__grid flex ---- */
.row.sh-newsgrid{display:grid;grid-template-columns:minmax(0,1fr) 561px;row-gap:0;column-gap:16px;margin:0;position:relative;}
.row.sh-newsgrid>.col{padding:0;width:auto;max-width:none;flex:none;}
.row.sh-newsgrid .sh-news-left .col-inner,
.row.sh-newsgrid .sh-news-left .col-inner>.text,
.row.sh-newsgrid .sh-news-left .col-inner>.ux-text,
.row.sh-newsgrid .sh-news-left .news-hero{height:100%;}
@media (max-width:1024px){
.row.sh-newsgrid{grid-template-columns:1fr;}
.row.sh-newsgrid .sh-news-left .news-hero{min-height:260px;}
}
/* ---- LƯỚI SẢN PHẨM (v2): pcard trong col theo bề rộng col, hàng cách 24px ---- */
.row.sh-pgrid{row-gap:24px;}
.sh-pcard-col .col-inner,.sh-pcard-col .col-inner>.text{height:100%;}
.sh-pcard-col .pcard{width:100%;height:100%;}
/* ---- Cân đối ảnh nhóm «Điện gia dụng» (/san-pham/) ----
Ô ảnh 570x343 + object-fit:contain: ảnh NGANG (bình nước nóng 499x297) nở full 570px
trong khi ảnh DỌC (máy lọc nước 278x593) chỉ còn 161px -> nhìn to gấp ~3.5 lần.
Tăng padding NGANG cho riêng ảnh tỉ lệ ngang để thu nội dung lại, GIỮ NGUYÊN chiều cao
ô ảnh (đừng dùng max-width: aspect-ratio sẽ kéo tụt luôn height của cả 2 thẻ). */
.group--elec .pcard__img.is-landscape{padding:18px 135px;}
@media (max-width:1024px){ .group--elec .pcard__img.is-landscape{padding:18px 22%;} }
/* ---- LƯỚI TIN TỨC trang Tin tức (v2): 3 cột gap 24, hàng cách 28 ---- */
.row.sh-ngrid{row-gap:28px;}
.sh-ncard-col .col-inner,.sh-ncard-col .col-inner>.text{height:100%;}
.sh-ncard-col .ncard{height:100%;}
/* ---- DANH MỤC SẢN PHẨM (v2): sidebar 258px cứng + lưới ccard ---- */
.page .row.sh-gutter-32{margin-left:-16px;margin-right:-16px;width:calc(100% + 32px);max-width:none;}
.page .row.sh-gutter-32>.col{padding-left:16px;padding-right:16px;}
@media (min-width:1200px){
.page .row.sh-cat-row{flex-wrap:nowrap;}
.page .row.sh-cat-row>.col.sh-side-col{width:290px;max-width:290px;flex:0 0 290px;}
.page .row.sh-cat-row>.col.sh-catmain-col{width:auto;max-width:none;flex:1 1 auto;min-width:0;}
}
.sh-ccard-col .col-inner,.sh-ccard-col .col-inner>.text{height:100%;}
.sh-ccard-col .ccard{width:100%;height:100%;}
/* Card đúng 300px như design (col 33.33% Flatsome = 300.67 gây lệch sub-pixel ảnh) */
@media (min-width:1200px){
.page .sh-catmain-col .row.sh-pgrid>.col.sh-ccard-col{flex:0 0 324px;max-width:324px;width:324px;}
}
/* ---- BÀI VIẾT DANH MỤC (v2): khối 920px giữa, phần tử cách 14px như .art__inner ---- */
.page .section .row.sh-art-row{max-width:920px;margin-left:auto;margin-right:auto;}
.sh-art-col .col-inner{display:flex;flex-direction:column;gap:14px;align-items:stretch;}
/* Bảng thông số: Flatsome thêm margin-bottom bảng + border/line-height td → về design */
.sh-art-col .spectable{margin:0;}
.sh-art-col .spectable th,.sh-art-col .spectable td{border:0;line-height:normal;}
.sh-art-col .spectable th{text-transform:none;letter-spacing:0;}
/* ---- CHI TIẾT SẢN PHẨM (v2) ---- */
.page .row.sh-gutter-48{margin-left:-24px;margin-right:-24px;width:calc(100% + 48px);max-width:none;}
.page .row.sh-gutter-48>.col{padding-left:24px;padding-right:24px;}
@media (min-width:1200px){
.page .row.sh-pdphero-row{flex-wrap:nowrap;}
.page .row.sh-pdphero-row>.col.sh-gallery-col{width:568px;max-width:568px;flex:0 0 568px;}
.page .row.sh-pdphero-row>.col.sh-pdpinfo-col{width:auto;max-width:none;flex:1 1 auto;min-width:0;}
.page .row.sh-pdpbody-row{flex-wrap:nowrap;}
.page .row.sh-pdpbody-row>.col.sh-pdpmain-col{width:940px;max-width:940px;flex:0 0 940px;}
.page .row.sh-pdpbody-row>.col.sh-pdpside-col{width:auto;max-width:none;flex:1 1 auto;min-width:0;}
}
/* Flatsome `.row .gallery{margin:-15px;width:auto}` trùng tên .gallery design → trả về design */
.page .row .gallery{margin:0;width:520px;padding:0;}
@media (max-width:1024px){ .page .row .gallery{width:100%;} }
/* Cột info: các Text con cách 16px như .pdp-info design */
.sh-pdpinfo-col .col-inner{display:flex;flex-direction:column;gap:16px;align-items:flex-start;}
/* Sidebar dính khi cuộn như design .pdp-side */
.sh-pdpside-col .col-inner{position:sticky;top:24px;display:flex;flex-direction:column;gap:20px;}
/* Bảng thông số trong tab: reset Flatsome (margin/uppercase th) — border-bottom td là CỦA design, giữ */
.sh-pdpmain-col .spectable{margin:0;}
.sh-pdpmain-col .spectable th{text-transform:none;letter-spacing:0;}
/* Thẻ SP liên quan */
.sh-rcard-col .col-inner,.sh-rcard-col .col-inner>.text{height:100%;}
.sh-rcard-col .rcard{width:100%;height:100%;}
/* ---- TIN TỨC CHI TIẾT (v2): cột bài viết 820px giữa, phần tử cách 24px như .post__col ---- */
.page .section .row.sh-post-row{max-width:820px;margin-left:auto;margin-right:auto;}
/* class post__col đặt trên col để CSS design (.post__col p, figure…) ăn — triệt flex/width của nó trên col */
.page .col.post__col{display:block;width:100%;max-width:100%;}
.post__col .col-inner{display:flex;flex-direction:column;gap:24px;align-items:stretch;}
.img.sh-post-hero,.img.sh-post-fig{margin:0;}
.img.sh-post-hero img,.img.sh-post-fig img{width:100%;height:440px;object-fit:cover;border-radius:14px;}
@media (max-width:600px){ .img.sh-post-hero img,.img.sh-post-fig img{height:auto;aspect-ratio:16/9;} }
/* ---- Ảnh admin chèn trong NỘI DUNG bài viết — yêu cầu khách 2026-08-14 ----
page-tinchitiet.css ép figure img 100%x440px cover -> ảnh sai tỉ lệ bị cắt và
kích thước admin chỉnh trong editor bị đè. Bỏ crop (height:auto); kích thước
admin ăn qua inline width của .wp-caption (ảnh có caption) hoặc attribute
width của img trần (không set width trong CSS để attribute tự ăn).
Ảnh đại diện .post__hero giữ 440px cover theo design. */
.post__col figure,.post__col .wp-caption{width:auto;max-width:100%;}
.post__col figure img{height:auto;object-fit:contain;border-radius:14px;}
.post__col p img,.post__col > img{max-width:100%;height:auto;border-radius:14px;}
/* .post__col là flex column align-items:flex-start -> căn giữa/phải theo editor */
.post__col p{width:100%;}
/* Tiêu đề + heading bị shrink-to-fit -> xuống dòng sớm dù còn chỗ trống bên phải */
.post__col > .post__title,
.post__col > h1,.post__col > h2,.post__col > h3,
.post__col > h4,.post__col > h5,.post__col > h6,
.post__col > ul,.post__col > ol,.post__col > blockquote,
.post__col > .post__crumb,.post__col > .post__meta{width:100%;}
/* main.css đặt h1,h2,h3{text-wrap:balance} -> tiêu đề bài viết dài bị chia đều
độ dài các dòng, ngắt sớm và chừa khoảng trống bên phải. Tiêu đề tin tức dài
nên cần fill hết chiều rộng cột. */
.post__title,
.post__col > h2,.post__col > h3{text-wrap:wrap;text-wrap-style:auto;}
/* Tiêu đề bài viết căn đều 2 bên cho khớp phần nội dung bên dưới (yêu cầu khách).
Dòng cuối theo chuẩn justify vẫn căn trái - không giãn. */
.post__title{text-align:justify;text-justify:inter-word;hyphens:none;word-spacing:normal;}
.post__col figure.aligncenter,.post__col img.aligncenter{align-self:center;display:block;margin-left:auto;margin-right:auto;}
.post__col figure.alignright,.post__col img.alignright{align-self:flex-end;}
/* ---- Section flex cũ: vô hiệu gap/flex trên section (con duy nhất là .section-content) ---- */
section.section.history,section.section.vision,section.section.values,
section.section.profile,section.section.factory,section.section.contact,section.section.ir,
section.section.group,section.section.news,section.section.cat,section.section.art,
section.section.pdp-hero,section.section.pdp-body,section.section.rel,
section.section.post,section.section.rel-news{display:block;}
/* ============================================================================
CĂN ĐỀU 2 BÊN (justify) CHO MỌI ĐOẠN VĂN DÀI — yêu cầu khách 2026-08-07
Áp cho: lead/mô tả các section, text trong card, thân bài viết & mô tả sản
phẩm (nội dung admin nhập =>
trần trong .post__col / .panel / .art).
KHÔNG áp cho: tiêu đề, breadcrumb, nút, tên thẻ, meta ngày, số liệu, caption,
bảng thông số, list ngắn — những chỗ 1-2 dòng hoặc đang căn giữa/phải.
============================================================================ */
.page .about__text,
.page .sector-card__text,
.page .certs__lead,
.page .group__lead,
.page .vision-card__text,
.page .tl-text,
.page .art__lead,
.page .post__lead,
.page .feat__excerpt,
.page .ncard__excerpt,
.page .cinfo__lead,
.page .hdsd__lead,
.page .ir__note,
/* Nội dung động do admin nhập (the_content / term meta) */
.page .post__col p,
.page .pdp-main .panel p,
.page .art__inner p{
text-align:justify;
text-justify:inter-word;
/* Tiếng Việt không ngắt từ được -> tránh khoảng trắng toác khi dòng ít từ */
hyphens:none;
word-spacing:normal;
}
/* Loại trừ: các
ngắn 1 dòng bị selector con ở trên bắt nhầm */
.page .pdp-main .panel .pdp-bullet p,
.page .pdp-main .panel .step__text,
.page .pdp-main .panel figcaption,
.page .art__inner .art__contact p,
.page .art__inner .art__note,
.page .art__inner figcaption,
.page .post__col figcaption,
.page .post__col .post__meta,
.page .post__col .post__crumb,
.page .post__col .post__tags,
.page .post__col .post__more p{
text-align:left;
}
/* ---- TRANG CHỦ: đồng bộ bề rộng các đoạn lead (yêu cầu khách 2026-08-10) ----
.about__text đã 555px sẵn (cột .about__left). Đưa .sectors__lead (gốc không
khai width -> nở full) và .certs__lead (gốc 682px trong main.css) về cùng
555px để mép phải 3 đoạn thẳng hàng. */
.page .sectors__lead,
.page .certs__lead{width:555px;max-width:100%;}
/* Cột hẹp: justify trên <=2 dòng ngắn dễ toác chữ -> trả về căn trái */
@media (max-width:600px){
.page .sector-card__text,
.page .vision-card__text,
.page .tl-text,
.page .ncard__excerpt,
.page .feat__excerpt{ text-align:left; }
}
/* ================= CHỨNG NHẬN & GIẢI THƯỞNG — khối ĐỘNG [sonha_certs] =================
(2026-08-07) Trước đây section là markup tĩnh dựng bằng row/col builder: tab, dot,
prev/next đều là