/* BILOCO-DOC [CSS-BLOCK] 001 GLOBAL / COMPONENTS | Nhóm quy tắc global / components; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ :root{--ink:#10283f;--navy:#071d33;--navy2:#0d3558;--blue:#075f9f;--blue2:#0a5f9f;--nav-text:#203950;--nav-hover:#0a86cf;--nav-active:#075f9f;--sky:#eaf4fb;--soft:#f5f8fb;--line:#dfe8f0;--muted:#617083;--white:#fff;--shadow:0 18px 46px rgba(8,31,54,.09)}*{box-sizing:border-box}html{scroll-behavior:smooth}button,input,select,textarea,optgroup,pre,code,kbd,samp,tt{font-family:inherit}body{margin:0;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;color:var(--ink);background:#fff;line-height:1.65}body.nav-open{overflow:hidden}a{color:inherit}img{max-width:100%;height:auto}/* BILOCO-DOC [CSS-BLOCK] 008 HEADER / NAV / LANGUAGE | Nhóm quy tắc header / nav / language; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .site-header{height:78px;position:sticky;top:0;z-index:90;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(14px);transition:box-shadow .2s}.site-header.scrolled{box-shadow:0 8px 26px rgba(9,35,60,.08)}.header-inner{height:100%;max-width:1220px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:26px}.site-logo{display:flex;align-items:center;gap:8px;text-decoration:none;min-width:max-content}.site-logo img{max-height:48px;max-width:180px;object-fit:contain}.site-logo strong{font-size:24px;letter-spacing:.085em;font-weight:900}.site-logo span{font-size:10px;background:var(--blue);color:#fff;padding:4px 6px;border-radius:5px;font-weight:800}.main-nav{display:flex;align-items:center;gap:4px}.nav-link,.dropdown-toggle{appearance:none;border:0;background:transparent;font:inherit;display:flex;align-items:center;gap:5px;padding:27px 11px;text-decoration:none;font-size:14px;font-weight:730;color:var(--nav-text);cursor:pointer;transition:color .16s ease,background-color .16s ease}.nav-link:hover,.dropdown-toggle:hover{color:var(--nav-hover)}.nav-item{position:relative}.dropdown-menu{position:absolute;top:calc(100% - 2px);left:0;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:0 0 12px 12px;padding:8px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(7px);transition:.16s}.dropdown-menu a{display:block;padding:9px 11px;border-radius:7px;text-decoration:none;font-size:13px;font-weight:650}.dropdown-menu a:hover{background:#eef6fc;color:var(--nav-hover)}.has-dropdown:hover>.dropdown-menu,.has-dropdown:focus-within>.dropdown-menu{opacity:1;visibility:visible;transform:none}.nav-cta{background:var(--navy);color:#fff;text-decoration:none;padding:10px 14px;border-radius:8px;font-weight:760;font-size:13px;margin-left:7px}.nav-cta:hover{background:var(--blue2)}.menu-toggle{display:none;align-items:center;gap:4px;border:0;background:transparent;padding:8px;cursor:pointer}/* BILOCO-DOC [CSS-BLOCK] 026 HEADER / NAV / LANGUAGE | Nhóm quy tắc header / nav / language; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .menu-toggle span{width:20px;height:2px;background:var(--ink);display:block}.menu-toggle b{font-size:11px;margin-left:5px}.hero{min-height:650px;display:grid;grid-template-columns:minmax(0,1.12fr) .88fr;align-items:center;padding:92px max(24px,calc((100vw - 1180px)/2));background:linear-gradient(116deg,#071d33 0%,#0c3458 58%,#eef5fa 58%,#fff 100%);color:#fff;gap:70px}.hero>div:first-child{max-width:760px}.eyebrow,.section-kicker{letter-spacing:.13em;font-weight:850;font-size:12px;color:#48b8ff}.hero h1{font-size:clamp(43px,6.5vw,76px);line-height:1.03;margin:16px 0 20px;max-width:820px}.hero p{font-size:19px;line-height:1.65;max-width:680px;color:#d9e7f3}/* BILOCO-DOC [CSS-BLOCK] 033 HERO / SLIDES | Nhóm quy tắc hero / slides; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:29px}.cta{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border:1px solid #9eb1c3;border-radius:8px;color:#fff;text-decoration:none;font-weight:760;cursor:pointer;font:inherit}.cta.primary{background:var(--blue);border-color:var(--blue);color:#fff}.hero-proof{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;color:var(--ink)}.hero-proof span{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 18px;font-weight:800;box-shadow:0 14px 40px rgba(9,35,60,.08)}.section{padding:82px max(24px,calc((100vw - 1180px)/2))}.soft{background:var(--soft)}/* BILOCO-DOC [CSS-BLOCK] 040 PROJECT / SERVICE | Nhóm quy tắc project / service; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .section h2{font-size:clamp(30px,4vw,46px);line-height:1.16;margin:8px 0 20px}.section-title{margin-bottom:30px}.section-title.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end}.section-title.split p{color:var(--muted);margin:0}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}.intro-grid p{font-size:18px;color:#405269}.sample-note{border-left:3px solid #e7a52d;padding:10px 14px;background:#fff7e7;color:#74530f!important;font-size:14px!important}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}/* BILOCO-DOC [CSS-BLOCK] 048 CONTENT / ARTICLES | Nhóm quy tắc content / articles; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .service-card{border:1px solid var(--line);border-radius:16px;padding:24px;background:#fff;text-decoration:none;transition:.2s;display:grid;grid-template-columns:58px minmax(0,1fr);column-gap:16px;row-gap:12px;align-items:start}.service-card:hover,.project-card:hover,.news-list-item:hover,.news-small:hover,.news-feature:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.service-icon{grid-column:1;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#eff6ff;border:1px solid #d6e5f8;box-shadow:0 6px 16px rgba(11,52,92,.08);font-size:28px;line-height:1}.service-card-media{grid-column:1/-1}.service-card h3{grid-column:2;margin:0;align-self:center;font-size:20px;line-height:1.35}.service-card p{grid-column:1/-1;color:var(--muted);min-height:70px;margin:0}.service-card .more{grid-column:1/-1}.service-icon.large{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:#eff6ff;border:1px solid #d6e5f8;box-shadow:0 8px 20px rgba(11,52,92,.14);font-size:32px;line-height:1;margin:0 0 12px;color:var(--navy)}.more{font-weight:760;color:var(--blue)}/* BILOCO-DOC [CSS-BLOCK] 055 PROJECT / SERVICE | Nhóm quy tắc project / service; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.project-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;background:#fff;transition:.2s}.project-visual{aspect-ratio:16/9;background:linear-gradient(135deg,#0a2743,#176ba6);display:flex;align-items:flex-end;padding:18px;color:#cbeaff;font-weight:800;letter-spacing:.08em;font-size:12px;background-size:cover;background-position:center}.project-visual.has-image{position:relative}.project-visual.has-image:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,rgba(5,21,36,.72))}.project-visual span{position:relative;z-index:1}.project-body{padding:20px}.project-body h3{margin:0 0 8px;font-size:21px}.project-body p{color:var(--muted);min-height:72px}.project-meta{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#6a7788;border-top:1px solid var(--line);padding-top:12px}/* BILOCO-DOC [CSS-BLOCK] 065 GLOBAL / COMPONENTS | Nhóm quy tắc global / components; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .process{background:var(--navy);color:#fff}.process-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:#27445f;border:1px solid #27445f}.process-grid div{background:var(--navy);padding:24px 16px;display:grid;gap:12px}.process-grid b{color:#53b7ff;font-size:22px}.process-grid span{font-weight:700}.news-home{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:22px}.news-feature,.news-small{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;transition:.2s}/* BILOCO-DOC [CSS-BLOCK] 072 MEDIA / IMAGES | Nhóm quy tắc media / images; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .news-feature-image{aspect-ratio:16/9;background:linear-gradient(135deg,#0a2947,#166da8);background-size:cover;background-position:center}.news-feature-body{padding:24px}.news-feature-body small,.news-small small,.news-list-copy small{color:var(--blue);font-weight:820;text-transform:uppercase;letter-spacing:.06em}.news-feature-body h3{font-size:28px;line-height:1.25;margin:8px 0}.news-feature-body p{color:var(--muted);font-size:16px}.news-small-list{display:grid;gap:10px}.news-small{display:grid;grid-template-columns:132px minmax(0,1fr);min-height:106px}.news-small-image{background:linear-gradient(135deg,#113a5e,#2c7dae);background-size:cover;background-position:center}/* BILOCO-DOC [CSS-BLOCK] 080 CONTENT / ARTICLES | Nhóm quy tắc content / articles; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .news-small-body{padding:12px 14px}.news-small h3{font-size:16px;line-height:1.35;margin:5px 0 0}.news-more-row{margin-top:20px;text-align:right}.text-link,.asset-text-link{color:#075f9f;font-weight:760;text-decoration:none}.contact-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;background:#eaf3f9}.lead-form{background:#fff;border:1px solid #d9e5ee;border-radius:18px;padding:26px}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}/* BILOCO-DOC [CSS-BLOCK] 087 GLOBAL / COMPONENTS | Nhóm quy tắc global / components; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ label{display:grid;gap:6px;font-weight:650;font-size:14px}input,select,textarea{width:100%;font:inherit;border:1px solid #cbd7e2;border-radius:8px;padding:10px 11px;background:#fff;color:var(--ink)}fieldset{border:0;padding:0;margin:18px 0}legend{font-weight:800;margin-bottom:8px}.scope-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.scope-grid label{display:flex;align-items:center;font-weight:500}.scope-grid input{width:auto}.hp{position:absolute!important;left:-9999px!important}/* BILOCO-DOC [CSS-BLOCK] 095 FORMS / BUTTONS | Nhóm quy tắc forms / buttons; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .form-message{padding:10px 12px;border-radius:8px;margin-bottom:14px}.form-message.ok{background:#eaf8ef;color:#17663a}.form-message.error{background:#fff0ef;color:#9b241d}.site-footer{background:#061728;color:#c9d8e6}.footer-grid{padding:48px max(24px,calc((100vw - 1180px)/2));display:grid;grid-template-columns:1.4fr .7fr .8fr;gap:48px}.footer-grid strong{color:#fff;font-size:24px}.footer-grid b{display:block;color:#fff;margin-bottom:10px}/* BILOCO-DOC [CSS-BLOCK] 102 FOOTER / CONTACT | Nhóm quy tắc footer / contact; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .footer-grid a{display:block;color:#dce9f4;margin:5px 0;text-decoration:none}.footer-muted{font-size:13px;color:#95a9bc}.footer-bottom{border-top:1px solid rgba(255,255,255,.09);padding:16px max(24px,calc((100vw - 1180px)/2));display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#8fa5b9}.footer-bottom a{color:inherit}.page-hero,.article-hero{padding:82px max(24px,calc((100vw - 1180px)/2));background:linear-gradient(135deg,#071d33,#0b456f);color:#fff}.page-hero>div,.article-hero>div{max-width:920px}.page-hero h1,.article-hero h1{font-size:clamp(38px,6vw,66px);line-height:1.08;margin:12px 0}/* BILOCO-DOC [CSS-BLOCK] 109 HERO / SLIDES | Nhóm quy tắc hero / slides; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .page-hero p,.article-hero p{font-size:19px;color:#d6e6f2}.page-hero .service-icon.large,.article-hero .service-icon.large{position:relative;left:0}.page-hero .section-kicker,.article-hero .section-kicker{display:block}.hero-image{margin-top:28px;border-radius:18px;overflow:hidden;aspect-ratio:16/7;background:#0d3457}.hero-image img{width:100%;height:100%;object-fit:cover}.case-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:50px;align-items:start}.case-block{padding:0 0 26px;margin-bottom:26px;border-bottom:1px solid var(--line)}.case-block h2{font-size:27px}.case-facts{border:1px solid var(--line);border-radius:16px;padding:22px;position:sticky;top:98px}/* BILOCO-DOC [CSS-BLOCK] 116 GLOBAL / COMPONENTS | Nhóm quy tắc global / components; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .case-facts dl{margin:0}.case-facts dt{font-size:12px;text-transform:uppercase;color:var(--muted);font-weight:800;margin-top:14px}.case-facts dd{margin:3px 0 0;font-weight:650}.tag-list{display:flex;gap:7px;flex-wrap:wrap}.tag-list a{padding:6px 9px;background:var(--sky);border-radius:99px;text-decoration:none;font-size:12px;font-weight:700}.prose{max-width:900px}.prose p,.prose li{font-size:17px;line-height:1.8;color:#32475d}.prose h2{font-size:30px;margin-top:38px}.prose h3{font-size:23px;margin-top:30px}/* BILOCO-DOC [CSS-BLOCK] 125 MEDIA / IMAGES | Nhóm quy tắc media / images; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .prose img{max-width:100%;border-radius:12px}.prose figure{margin:28px 0}.prose figcaption{text-align:center;color:var(--muted);font-size:13px}.prose blockquote{margin:24px 0;padding:16px 20px;border-left:4px solid var(--blue);background:#f4f8fb}.article-content{min-height:320px}.share-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:22px 0}.share-bar>span{font-weight:800;font-size:13px;margin-right:4px}/* BILOCO-DOC [CSS-BLOCK] 132 FORMS / BUTTONS | Nhóm quy tắc forms / buttons; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .share-bar a,.share-bar button{border:1px solid var(--line);border-radius:7px;padding:7px 10px;background:#fff;text-decoration:none;color:#315773;font:inherit;font-weight:720;cursor:pointer}.share-bar .share-fb{background:#1877f2;border-color:#1877f2;color:#fff}.listing-hero{padding:66px max(24px,calc((100vw - 1180px)/2));background:#f2f7fb;border-bottom:1px solid var(--line)}.listing-hero h1{font-size:clamp(36px,5vw,58px);margin:7px 0 8px}.listing-hero p{max-width:760px;color:var(--muted);font-size:18px}.news-list{display:grid;gap:16px}.news-list-item{display:grid;grid-template-columns:280px minmax(0,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;background:#fff;transition:.18s}/* BILOCO-DOC [CSS-BLOCK] 139 MEDIA / IMAGES | Nhóm quy tắc media / images; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .news-list-image{min-height:175px;background:linear-gradient(135deg,#113a5e,#2c7dae);background-size:cover;background-position:center}.news-list-copy{padding:18px 22px}.news-list-copy h2{font-size:24px;margin:6px 0 8px}.news-list-copy p{margin:0;color:var(--muted)}.pagination{display:flex;gap:6px;flex-wrap:wrap;margin-top:32px}.pagination a,.pagination span{min-width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;text-decoration:none}.pagination .active{background:var(--navy);color:#fff;border-color:var(--navy)}/* BILOCO-DOC [CSS-BLOCK] 146 PROJECT / SERVICE | Nhóm quy tắc project / service; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .project-list-head{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}.project-list-head a{padding:7px 11px;border:1px solid var(--line);border-radius:99px;text-decoration:none;font-size:13px}.project-list-head a.active{background:var(--navy);color:#fff}.not-found{min-height:66vh;display:grid;place-items:start;align-content:center;padding:70px max(24px,calc((100vw - 900px)/2))}.not-found>span{font-size:90px;font-weight:900;color:#d6e2ec;line-height:1}.not-found h1{font-size:42px;margin:12px 0}.dark-btn{color:var(--ink);border-color:#8da2b5}/* BILOCO-DOC [CSS-BLOCK] 153 GLOBAL / COMPONENTS | Nhóm quy tắc global / components; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .mobile-actions{display:none} /* BILOCO-DOC [CSS-BLOCK] 154 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:980px){.menu-toggle{display:flex;flex-direction:column}.main-nav{display:none;position:fixed;top:78px;left:0;right:0;bottom:0;background:#fff;padding:12px 18px 90px;overflow:auto;align-items:stretch}.main-nav.open{display:block}.main-nav>.nav-link,.dropdown-toggle{width:100%;justify-content:space-between;padding:13px 8px;border-bottom:1px solid #edf1f5;text-align:left}.nav-cta{display:block;text-align:center;margin:18px 0 0;padding:13px}.dropdown-menu{position:static;box-shadow:none;border:0;border-radius:0;padding:0 0 3px 13px;opacity:1;visibility:visible;transform:none;display:none}.has-dropdown.open>.dropdown-menu{display:block}.dropdown-menu a{padding:9px 8px}.has-dropdown:hover>.dropdown-menu:not(:focus-within){transform:none}.hero{grid-template-columns:1fr;background:var(--navy);min-height:auto}.hero-proof{display:none}.section-title.split,.intro-grid,.contact-section,.case-layout{grid-template-columns:1fr}.service-grid,.project-grid{grid-template-columns:repeat(2,1fr)}.process-grid{grid-template-columns:repeat(2,1fr)}.case-facts{position:static}.news-home{grid-template-columns:1fr}.news-small-list{grid-template-columns:1fr 1fr}.news-small{grid-template-columns:115px 1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}} /* BILOCO-DOC [CSS-BLOCK] 155 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:700px){body{padding-bottom:58px}.section{padding:56px 18px}.header-inner{padding:0 16px}.site-logo strong{font-size:21px}.hero{padding:65px 18px}.hero h1{font-size:42px}.service-grid,.project-grid,.grid2,.scope-grid{grid-template-columns:1fr}.process-grid{grid-template-columns:1fr 1fr}.project-body p{min-height:0}.contact-section{padding-bottom:70px}.lead-form{padding:18px}.footer-grid{padding:40px 18px;grid-template-columns:1fr;gap:26px}.footer-grid>div:first-child{grid-column:auto}.footer-bottom{padding:15px 18px}.mobile-actions{position:fixed;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;left:0;right:0;bottom:0;height:58px;background:#fff;border-top:1px solid var(--line);z-index:100}.mobile-actions a{display:grid;place-items:center;text-decoration:none;font-weight:760;font-size:13px}.mobile-actions a.primary{background:var(--blue);color:#fff}.page-hero,.article-hero{padding:60px 18px}.listing-hero{padding:50px 18px}.not-found{padding:60px 18px}.not-found h1{font-size:34px}.news-small-list{grid-template-columns:1fr}.news-small{grid-template-columns:110px 1fr}.news-feature-body h3{font-size:24px}.news-list-item{grid-template-columns:130px minmax(0,1fr)}.news-list-image{min-height:145px}.news-list-copy{padding:13px 14px}.news-list-copy h2{font-size:18px;line-height:1.35}.news-list-copy p{font-size:13px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.article-hero h1{font-size:38px}} /* BILOCO-DOC [CSS-BLOCK] 156 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:430px){.news-list-item{grid-template-columns:112px minmax(0,1fr)}.news-list-copy{padding:11px}.news-list-copy h2{font-size:16px}.news-list-copy small{font-size:10px}.news-list-copy p{display:none}.process-grid{grid-template-columns:1fr}.hero h1{font-size:37px}.site-logo span{display:none}} /* === BILOCO v1.1.0 navigation, language and form refinement === */ .site-header{height:76px} .header-inner{max-width:1380px;gap:18px} .site-logo img{max-width:190px;max-height:50px} .main-nav{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:10px} .nav-primary,.nav-tools{display:flex;align-items:center;gap:4px} .nav-primary{min-width:0} /* BILOCO-DOC [CSS-BLOCK] 163 HEADER / NAV / LANGUAGE | Nhóm quy tắc header / nav / language; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .nav-tools{flex:0 0 auto} .nav-link,.dropdown-toggle{font-size:13px;font-weight:760;white-space:nowrap;padding:26px 9px} .nav-caret{display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transform-origin:center;margin-left:3px;opacity:.7;transition:transform .16s ease} .has-dropdown.open>.dropdown-toggle .nav-caret{transform:rotate(225deg) translate(-1px,-1px)} .dropdown-menu{top:calc(100% - 4px);border-radius:14px;padding:9px;min-width:240px} .has-dropdown.open>.dropdown-menu{opacity:1;visibility:visible;transform:none} .more-menu{min-width:260px} /* BILOCO-DOC [CSS-BLOCK] 170 GLOBAL / COMPONENTS | Nhóm quy tắc global / components; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .more-subgroup{padding:5px 0 9px;border-bottom:1px solid var(--line)} .more-subgroup:last-child{border-bottom:0} .more-subgroup>b{display:block;padding:7px 10px 4px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em} .nav-more.is-empty{display:none} .language-native{display:flex;align-items:center;padding:3px;border:1px solid #d7e2eb;background:#f5f8fb;border-radius:999px;margin-left:6px} .language-native a{display:grid;place-items:center;min-width:35px;height:31px;padding:0 8px;border-radius:999px;text-decoration:none;font-size:11px;font-weight:850;color:#627386} .language-native a.active{background:#0c6a59;color:#fff;box-shadow:0 2px 8px rgba(12,106,89,.18)} .translate-toggle{padding:8px 10px;border:1px solid #cbd9e4!important;border-radius:999px!important;background:#fff!important;box-shadow:0 2px 8px rgba(10,40,65,.04);font-size:11px!important;font-weight:780!important;color:#284257!important} .translate-toggle .globe{font-size:14px;color:#1673b7} /* BILOCO-DOC [CSS-BLOCK] 179 HEADER / NAV / LANGUAGE | Nhóm quy tắc header / nav / language; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .translate-menu{right:0;left:auto;width:330px;display:grid;grid-template-columns:1fr 1fr;padding:12px} .translate-menu a{font-size:12px;padding:9px 10px} .nav-cta{white-space:nowrap;border-radius:9px;padding:10px 13px;font-size:12px;margin-left:2px} /* Form controls: compact checkboxes and balanced text fields */ input,select,textarea{min-height:44px;border-radius:10px;border-color:#cbd8e3;transition:border-color .15s,box-shadow .15s,background .15s} textarea{min-height:auto} input:focus,select:focus,textarea:focus{outline:none;border-color:#4d94c8;box-shadow:0 0 0 3px rgba(35,119,178,.11)} input[type="checkbox"],input[type="radio"]{width:16px!important;height:16px!important;min-height:16px!important;flex:0 0 16px;margin:0;accent-color:#0d6f60;box-shadow:none!important} /* BILOCO-DOC [CSS-BLOCK] 186 GLOBAL / COMPONENTS | Nhóm quy tắc global / components; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .scope-grid{gap:9px 14px} .scope-grid label{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid #e1e9f0;border-radius:9px;background:#fff;font-size:13px} /* News list: image left / content right with consistent rhythm */ .news-list{display:grid;gap:14px} .news-list-item{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:180px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;transition:.2s} .news-list-image{min-height:180px;background:linear-gradient(135deg,#113a5e,#2c7dae);background-size:cover;background-position:center} .news-list-copy{padding:21px 24px;display:flex;flex-direction:column;justify-content:center} .news-list-copy h2{font-size:24px;line-height:1.28;margin:7px 0 8px} /* BILOCO-DOC [CSS-BLOCK] 193 CONTENT / ARTICLES | Nhóm quy tắc content / articles; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .news-list-copy p{margin:0;color:var(--muted)} .list-read-more{margin-top:10px;color:var(--blue);font-weight:780;font-size:13px} .pagination{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:32px;flex-wrap:wrap} .pagination a,.pagination span{min-width:38px;height:38px;padding:0 10px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;text-decoration:none;background:#fff;font-size:13px;font-weight:750} .pagination .active{background:var(--navy);border-color:var(--navy);color:#fff} /* BILOCO-DOC [CSS-BLOCK] 198 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:1240px){ .header-inner{padding:0 16px;gap:12px} .nav-link,.dropdown-toggle{padding-left:7px;padding-right:7px;font-size:12px} .nav-cta{display:none} } /* BILOCO-DOC [CSS-BLOCK] 199 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:1100px){ .site-header{height:68px} .header-inner{padding:0 16px} .site-logo img{max-height:44px;max-width:165px} .menu-toggle{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:4px;margin-left:auto} .menu-toggle b{position:absolute;left:-9999px} .main-nav{position:fixed;top:68px;right:0;bottom:0;width:min(390px,92vw);background:#fff;border-left:1px solid var(--line);box-shadow:-20px 0 50px rgba(8,31,54,.12);padding:16px 16px 90px;display:block;overflow:auto;transform:translateX(105%);transition:transform .2s ease;z-index:99} .main-nav.open{transform:none} .nav-primary,.nav-tools{display:grid;gap:6px;align-items:stretch} .nav-tools{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)} .nav-link,.dropdown-toggle,.translate-toggle{width:100%;min-height:44px;padding:10px 12px!important;border-radius:9px!important;justify-content:space-between;text-align:left;font-size:14px!important} .nav-root-link{border:1px solid transparent} .nav-item{width:100%} .dropdown-menu{position:static;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-left:2px solid #dce7ef;border-radius:0;margin:2px 0 6px 12px;padding:3px 0 3px 8px;width:auto;min-width:0} .has-dropdown:hover>.dropdown-menu{display:none} .has-dropdown.open>.dropdown-menu{display:block} .dropdown-menu a{padding:10px 11px;font-size:13px} .translate-menu{grid-template-columns:1fr 1fr;margin-left:0;border-left:0;border:1px solid var(--line);border-radius:12px;padding:8px} .language-native{margin:0;width:max-content} .nav-cta{display:flex;margin:3px 0 0;justify-content:center;font-size:13px;padding:12px 14px} .more-subgroup>b{padding-left:11px} .news-home{grid-template-columns:1fr} .news-small-list{grid-template-columns:repeat(2,minmax(0,1fr))} } /* BILOCO-DOC [CSS-BLOCK] 200 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:760px){ .news-list-item{grid-template-columns:126px minmax(0,1fr);min-height:128px;border-radius:13px} .news-list-image{min-height:128px} .news-list-copy{padding:13px 14px} .news-list-copy h2{font-size:17px;margin:5px 0 5px} .news-list-copy p{font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .list-read-more{font-size:12px;margin-top:5px} .news-small-list{grid-template-columns:1fr} .scope-grid{grid-template-columns:1fr} } /* BILOCO-DOC [CSS-BLOCK] 201 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:480px){ .translate-menu{grid-template-columns:1fr 1fr} .news-list-item{grid-template-columns:110px minmax(0,1fr)} .news-list-copy{padding:11px 12px} .news-list-copy h2{font-size:15px} .news-list-copy p{display:none} } select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#64778a 50%),linear-gradient(135deg,#64778a 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px!important} /* === BILOCO v1.1.1 mobile navigation hotfix === */ .mobile-nav-list{display:none} /* BILOCO-DOC [CSS-BLOCK] 204 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:1100px){ body.nav-open{overflow:hidden} .main-nav{ position:fixed; top:68px; left:0; right:0; bottom:auto; width:100%; height:auto; max-height:calc(100dvh - 68px - env(safe-area-inset-bottom)); margin:0; padding:12px 16px calc(18px + env(safe-area-inset-bottom)); background:#fff; border-left:0; border-top:1px solid var(--line); box-shadow:0 18px 34px rgba(8,31,54,.14); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px); transition:opacity .18s ease,transform .18s ease,visibility .18s ease; z-index:99; } .main-nav.open{ opacity:1; visibility:visible; pointer-events:auto; transform:none; } .nav-primary{display:none} .mobile-nav-list{display:grid;gap:5px;align-items:stretch} .mobile-nav-list>.nav-link, .mobile-nav-list>.nav-item{width:100%} .mobile-nav-list .nav-link, .mobile-nav-list .dropdown-toggle{ min-height:43px; margin:0; padding:10px 12px!important; border-bottom:1px solid #edf1f5; border-radius:8px!important; } .mobile-nav-list .nav-root-link{display:flex;align-items:center} .mobile-nav-list .dropdown-menu{ margin:2px 0 6px 12px; } .nav-tools{margin-top:10px;padding-top:10px} } /* BILOCO-DOC [CSS-BLOCK] 205 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:700px){ .main-nav{padding-left:12px;padding-right:12px} } /* === BILOCO v1.1.3 active + hover navigation colors === */ .nav-primary>.nav-link.is-active, .nav-primary>.nav-item.is-active>.dropdown-toggle{ color:var(--nav-active); } .nav-primary>.nav-link.is-active, .nav-primary>.nav-item.is-active>.dropdown-toggle{ position:relative; } .nav-primary>.nav-link.is-active::after, .nav-primary>.nav-item.is-active>.dropdown-toggle::after{ content:""; position:absolute; left:9px; right:9px; bottom:0; height:3px; border-radius:3px 3px 0 0; background:var(--nav-active); } .dropdown-menu a.is-active{ background:#eaf4fb; color:var(--nav-active); font-weight:820; } .more-subgroup.is-active>b{ color:var(--nav-active); } /* BILOCO-DOC [CSS-BLOCK] 211 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:1100px){ .mobile-nav-list>.nav-link.is-active, .mobile-nav-list>.nav-item.is-active>.dropdown-toggle{ color:var(--nav-active); background:#edf7fd; border-left:3px solid var(--blue)!important; padding-left:10px!important; font-weight:850; } .mobile-nav-list>.nav-link.is-active::after, .mobile-nav-list>.nav-item.is-active>.dropdown-toggle::after{ display:none; } .mobile-nav-list .has-dropdown.is-active>.dropdown-menu{ display:block; } .mobile-nav-list .has-dropdown.is-active>.dropdown-toggle .nav-caret{ transform:rotate(225deg) translate(-1px,-1px); } .mobile-nav-list .dropdown-menu a.is-active{ background:#eef7fd; color:var(--nav-active); box-shadow:inset 3px 0 0 var(--nav-active); } } /* Keep ACTIVE distinct from HOVER on every menu level. */ .nav-primary>.nav-link.is-active:hover, .nav-primary>.nav-item.is-active>.dropdown-toggle:hover, .dropdown-menu a.is-active:hover{ color:var(--nav-active); } .dropdown-menu a:not(.is-active):hover, .more-subgroup a:not(.is-active):hover{ color:var(--nav-hover); } /* BILOCO-DOC [CSS-BLOCK] 214 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:1100px){ .mobile-nav-list .nav-link:not(.is-active):hover, .mobile-nav-list .dropdown-toggle:hover{ color:var(--nav-hover); background:#f4f9fd; } .mobile-nav-list>.nav-link.is-active:hover, .mobile-nav-list>.nav-item.is-active>.dropdown-toggle:hover, .mobile-nav-list .dropdown-menu a.is-active:hover{ color:var(--nav-active); } } /* === BILOCO v1.1.4 language controls === */ .language-more{z-index:120}.language-more.open>.translate-menu{display:grid;opacity:1;visibility:visible;transform:none;z-index:130}.language-native a{cursor:pointer}.language-native a:hover{color:var(--nav-hover);background:#eef7fc}.language-native a.active:hover{color:#fff;background:#0c6a59}.translate-menu a{cursor:pointer}/* BILOCO-DOC [CSS-BLOCK] 221 HEADER / NAV / LANGUAGE | Nhóm quy tắc header / nav / language; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .translate-menu a:hover{background:#eef7fc;color:var(--nav-hover)} /* BILOCO-DOC [CSS-BLOCK] 222 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:1100px){.language-more.open>.translate-menu{display:grid}.translate-menu{max-height:min(420px,48dvh);overflow:auto}} /* v1.1.5 article metadata + compact share */ .article-meta,.news-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#64788b;font-size:13px;font-weight:650}.article-hero .article-meta{color:#c9dbe9;margin-top:10px}.news-meta{margin-top:12px}.news-meta.compact{font-size:11px;margin-top:7px;gap:5px}.compact-share{gap:6px;margin:18px 0}.compact-share .share-label{font-size:12px;margin-right:2px}/* BILOCO-DOC [CSS-BLOCK] 229 GLOBAL / COMPONENTS | Nhóm quy tắc global / components; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .compact-share .share-icon{width:32px;height:32px;min-width:32px;padding:0;border-radius:7px;display:inline-grid;place-items:center;line-height:1;text-align:center;text-decoration:none;font-size:13px;font-weight:850;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}.compact-share .share-icon:hover{transform:translateY(-1px);box-shadow:0 6px 15px rgba(8,31,54,.12)}.compact-share .share-icon b{font:inherit}.compact-share .share-fb{background:#1877f2;border-color:#1877f2;color:#fff}.compact-share .share-zalo{background:#0068ff;border-color:#0068ff;color:#fff}.compact-share .share-x{background:#111;border-color:#111;color:#fff}.compact-share .share-linkedin{background:#0a66c2;border-color:#0a66c2;color:#fff}.compact-share .share-copy{background:#fff;color:#315773}.compact-share .share-copy.copied{background:#e9f7ef;border-color:#9bd5b4;color:#17663a}.publish-time{white-space:nowrap} /* BILOCO-DOC [CSS-BLOCK] 239 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media (max-width:640px){.compact-share{margin:14px 0;gap:5px}.compact-share .share-label{width:100%;margin:0 0 1px}.compact-share .share-icon{width:30px;height:30px;min-width:30px;border-radius:6px}.article-meta{font-size:12px}.news-meta{font-size:12px}.news-meta.compact{font-size:10.5px}.news-small-body{padding-bottom:10px}} /* === BILOCO v1.2.0 inline languages, mobile menu, TOC/FAQ/video === */ .mobile-language-bar{display:none}.language-native{display:flex;align-items:center;gap:5px}.language-native a{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:7px;text-decoration:none;font-size:12px;font-weight:800;color:var(--nav-text)}.language-native a.active{background:#e8f4fb;color:var(--nav-active)}.language-native .flag,.mobile-native-languages .flag{font-size:16px;line-height:1} .video-embed{position:relative;width:100%;aspect-ratio:16/9;background:#0b1722;border-radius:12px;overflow:hidden;margin:24px 0}/* BILOCO-DOC [CSS-BLOCK] 246 GLOBAL / COMPONENTS | Nhóm quy tắc global / components; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.toc-heading{scroll-margin-top:120px}.article-reading-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:34px;align-items:start}.article-toc{position:sticky;top:100px;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}.toc-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;border:0;background:#f6f9fc;padding:12px 14px;color:var(--ink);font:inherit;font-weight:800;cursor:pointer}.toc-toggle i{width:8px;height:8px;border-right:2px solid #6b8092;border-bottom:2px solid #6b8092;transform:rotate(45deg);transition:transform .15s}.article-toc.open .toc-toggle i{transform:rotate(225deg)}.toc-links{display:none;padding:8px}/* BILOCO-DOC [CSS-BLOCK] 254 CONTENT / ARTICLES | Nhóm quy tắc content / articles; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .article-toc.open .toc-links{display:grid}.toc-links a{display:block;padding:7px 8px;border-radius:7px;text-decoration:none;color:#536a7e;font-size:13px;line-height:1.4}.toc-links a.level-3{padding-left:19px;font-size:12px}.toc-links a:hover,.toc-links a.active{background:#edf6fc;color:var(--nav-active);font-weight:750}.faq-section{margin-top:46px}.faq-list{display:grid;gap:8px}.faq-item{border:1px solid var(--line);border-radius:11px;background:#fff;overflow:hidden}/* BILOCO-DOC [CSS-BLOCK] 261 GLOBAL / COMPONENTS | Nhóm quy tắc global / components; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;border:0;background:#fff;padding:15px 16px;text-align:left;color:var(--ink);font:inherit;font-weight:780;cursor:pointer}.faq-question::after{content:'+';font-size:20px;color:var(--blue2)}.faq-item.open .faq-question::after{content:'−'}.faq-answer{display:none;padding:0 16px 16px;color:#465d70}.faq-item.open .faq-answer{display:block} /* BILOCO-DOC [CSS-BLOCK] 266 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:1100px){ .site-header{height:auto}.mobile-language-bar{display:block;border-bottom:1px solid #e7edf2;background:#f7fafc}.mobile-language-inner{min-height:34px;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:4px 14px;font-size:11px;color:#687b8e}.mobile-language-inner>span{margin-right:auto;font-weight:700}.mobile-native-languages{display:flex;gap:5px}.mobile-native-languages a{display:inline-flex;align-items:center;gap:4px;padding:4px 7px;border-radius:7px;text-decoration:none;color:var(--nav-text)}.mobile-native-languages a.active{background:#e6f4fb;color:var(--nav-active)}.header-inner{height:68px}.nav-tools .language-native{display:none}.main-nav{top:var(--mobile-header-height,102px)!important;bottom:0!important;height:auto!important;max-height:none!important;padding-bottom:calc(28px + env(safe-area-inset-bottom))!important;overflow-y:auto!important;overscroll-behavior-y:contain!important}.main-nav.open{transform:none}.article-reading-layout{grid-template-columns:1fr;gap:18px}.article-toc{position:sticky;top:var(--mobile-header-height,102px);z-index:20}.toc-heading{scroll-margin-top:calc(var(--mobile-header-height,102px) + 55px)} } /* BILOCO-DOC [CSS-BLOCK] 267 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:640px){.mobile-language-inner{padding-left:10px;padding-right:10px}.article-toc{border-radius:10px}.faq-question{padding:13px 14px}.faq-answer{padding:0 14px 14px}.video-embed{border-radius:8px;margin:18px 0}} .article-reading-layout.no-toc{grid-template-columns:minmax(0,1fr)} .article-reading-layout.no-toc>.article-content{width:100%;max-width:920px;margin:0 auto} /* === BILOCO v1.2.1 frontend polish === */ .header-mobile-tools{display:none;align-items:center;gap:5px;margin-left:auto} .header-mobile-tools .mobile-native-languages{display:flex;align-items:center;gap:3px} .header-mobile-tools .mobile-native-languages a{display:inline-flex;align-items:center;gap:4px;padding:5px 7px;border-radius:8px;text-decoration:none;color:var(--nav-text);font-size:12px;font-weight:850;line-height:1} .header-mobile-tools .mobile-native-languages a.active{background:#e9f5fc;color:var(--nav-active)} /* BILOCO-DOC [CSS-BLOCK] 274 HEADER / NAV / LANGUAGE | Nhóm quy tắc header / nav / language; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .header-mobile-tools .flag{font-size:16px;line-height:1} .mobile-translate{position:relative;z-index:190} .mobile-globe-button,.header-search-button,.desktop-search-button{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--nav-text);text-decoration:none;font:inherit;font-size:17px;cursor:pointer;padding:0} .mobile-globe-button:hover,.header-search-button:hover,.desktop-search-button:hover{border-color:#b9d7e9;color:var(--nav-hover);background:#f3f9fd}.header-search-button.is-active,.desktop-search-button.is-active{border-color:#9fc9e1;background:#eaf5fc;color:var(--nav-active)} .mobile-translate-menu{position:absolute;right:0;top:calc(100% + 10px);width:min(280px,78vw);max-height:min(430px,58dvh);overflow:auto;display:none;grid-template-columns:1fr 1fr;gap:2px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);z-index:180} .mobile-translate.open .mobile-translate-menu{display:grid} .mobile-translate-menu a{padding:9px 10px;border-radius:8px;text-decoration:none;font-size:12px;font-weight:700;color:var(--nav-text)} .mobile-translate-menu a:hover{background:#eef7fc;color:var(--nav-hover)} /* BILOCO-DOC [CSS-BLOCK] 283 FORMS / BUTTONS | Nhóm quy tắc forms / buttons; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .desktop-search-button{margin-left:3px;font-size:18px} /* Content images: center article/project visuals and keep them proportional. */ /* ==================================================================== * BILOCO CONTENT IMAGE BLOCK 132 - FULL WIDTH, CENTERED, PROFESSIONAL * All images inserted in article/project rich content use the full text * column while preserving the original ratio. Small source files may * look soft, so the Admin Media Finder recommends >= 1200px originals. * ==================================================================== */ .article-content img,.case-block img,.prose img{display:block;width:100%;max-width:100%;height:auto;margin:24px auto;border-radius:14px;object-fit:contain} .case-facts img{display:block;max-width:100%;height:auto;margin:16px auto;border-radius:12px;object-fit:contain} .article-content figure,.case-block figure,.prose figure{display:block;width:100%;max-width:100%;margin:28px auto;text-align:center} .article-content figure img,.case-block figure img,.prose figure img{width:100%;margin:0 auto} .article-content>img,.prose>img{width:100%} .article-content figcaption,.case-block figcaption,.prose figcaption{margin-top:8px;color:var(--muted);font-size:13px;text-align:center} /* BILOCO-DOC [CSS-BLOCK] 290 HERO / SLIDES | Nhóm quy tắc hero / slides; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .article-hero .hero-image,.page-hero .hero-image{max-width:920px;margin-left:auto;margin-right:auto} /* Homepage news: one large story + five evenly balanced compact stories. */ .news-home{grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr);align-items:stretch} .news-feature{height:100%;display:flex;flex-direction:column} .news-feature-image{aspect-ratio:auto;min-height:360px;flex:1} .news-feature-body{flex:0 0 auto} .news-feature-body h3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .news-feature-body p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} /* BILOCO-DOC [CSS-BLOCK] 297 CONTENT / ARTICLES | Nhóm quy tắc content / articles; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .news-small-list{height:100%;grid-template-rows:repeat(5,minmax(0,1fr));align-items:stretch} .news-small{height:100%;min-height:0;grid-template-columns:122px minmax(0,1fr);align-items:stretch} .news-small-image{min-height:0;height:100%} .news-small-body{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:10px 13px} .news-small h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:4px 0 0;font-size:15px;line-height:1.32} .news-small .news-meta{margin-top:5px} /* Listing cards: balanced image/text height and controlled line count. */ .news-list-item{grid-template-columns:260px minmax(0,1fr);min-height:168px} /* BILOCO-DOC [CSS-BLOCK] 304 MEDIA / IMAGES | Nhóm quy tắc media / images; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .news-list-image{min-height:168px;height:100%} .news-list-copy{padding:18px 22px} .news-list-copy h2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:22px;line-height:1.28;margin:6px 0} .news-list-copy p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;color:var(--muted);font-size:14px;line-height:1.55} .news-list-copy .list-read-more{margin-top:8px} /* Related content: compact image left, title right; same proportions on every row. */ .related-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .related-item{display:grid;grid-template-columns:126px minmax(0,1fr);min-height:108px;background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease} /* BILOCO-DOC [CSS-BLOCK] 311 GLOBAL / COMPONENTS | Nhóm quy tắc global / components; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .related-item:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .related-thumb{height:100%;min-height:108px;background:linear-gradient(135deg,#113a5e,#2c7dae);background-size:cover;background-position:center} .related-copy{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:11px 13px} .related-copy small{color:var(--blue);font-weight:820;text-transform:uppercase;letter-spacing:.05em;font-size:10px} .related-copy h3{font-size:15px;line-height:1.35;margin:4px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .related-copy .news-meta{margin-top:5px} /* Search frontend. */ .search-hero{padding-bottom:54px} /* BILOCO-DOC [CSS-BLOCK] 318 FORMS / BUTTONS | Nhóm quy tắc forms / buttons; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .front-search-form{display:flex;gap:8px;max-width:760px;margin-top:24px} .front-search-form input{height:50px;border:0;border-radius:10px;padding:0 16px;font-size:16px;box-shadow:0 8px 24px rgba(0,0,0,.08)} .front-search-form button{height:50px;min-width:112px;border:0;border-radius:10px;background:var(--blue);color:#fff;font:inherit;font-weight:800;cursor:pointer;padding:0 18px} .search-summary{margin-bottom:18px;color:var(--muted)} .search-results{display:grid;gap:12px} .search-result{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:135px;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;background:#fff;transition:.18s} .search-result:hover{transform:translateY(-2px);box-shadow:var(--shadow)} /* BILOCO-DOC [CSS-BLOCK] 325 MEDIA / IMAGES | Nhóm quy tắc media / images; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .search-result-image{min-height:135px;background:linear-gradient(135deg,#113a5e,#2c7dae);background-size:cover;background-position:center} .search-result-copy{padding:15px 18px;display:flex;flex-direction:column;justify-content:center} .search-result-copy small{color:var(--blue);font-weight:820;text-transform:uppercase;letter-spacing:.05em} .search-result-copy h2{font-size:20px;line-height:1.3;margin:4px 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .search-result-copy p{margin:0;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} /* TOC reliability and sticky behavior. */ .article-toc{max-height:calc(100vh - 125px);overflow:auto} /* BILOCO-DOC [CSS-BLOCK] 332 GLOBAL / COMPONENTS | Nhóm quy tắc global / components; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .toc-links{max-height:calc(100vh - 190px);overflow:auto} .toc-links a{border-left:2px solid transparent} .toc-links a.active{border-left-color:var(--nav-active)} /* BILOCO-DOC [CSS-BLOCK] 335 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:1100px){ .mobile-language-bar{display:none!important} .site-header{height:68px!important} .header-inner{height:68px!important;min-height:68px;padding-left:14px;padding-right:10px;gap:7px} .site-logo img{max-height:40px;max-width:130px} .site-logo strong{font-size:22px} .header-mobile-tools{display:flex} .header-search-button{display:none} .menu-toggle{flex:0 0 42px;margin-left:1px;padding:7px 5px} .menu-toggle b{display:none} .main-nav{ top:var(--mobile-header-height,68px)!important; right:0!important; bottom:auto!important; width:100%!important; max-width:none!important; height:auto!important; max-height:calc(100dvh - var(--mobile-header-height,68px))!important; padding:10px 12px calc(18px + env(safe-area-inset-bottom))!important; border-left:0!important; border-top:1px solid var(--line)!important; overflow-y:auto!important; overscroll-behavior-y:contain!important; -webkit-overflow-scrolling:touch!important; } .mobile-nav-list{display:grid!important;gap:4px!important} .mobile-nav-list>.nav-link,.mobile-nav-list>.nav-item{display:block!important;width:100%!important} .nav-tools{display:grid!important;margin-top:8px!important;padding-top:8px!important} .nav-tools .language-native,.nav-tools .language-more,.nav-tools .desktop-search-button{display:none!important} .nav-tools .nav-cta{margin:0!important;text-align:center} .article-reading-layout{grid-template-columns:1fr!important} .article-toc{top:calc(var(--mobile-header-height,68px) + 8px);max-height:58vh} .toc-links{max-height:45vh} .related-list{grid-template-columns:1fr} } /* BILOCO-DOC [CSS-BLOCK] 336 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:760px){ .section{padding-left:18px;padding-right:18px} .news-home{display:grid;grid-template-columns:1fr;gap:14px} .news-feature{width:100%} .news-feature-image{aspect-ratio:16/10;min-height:0;flex:none} .news-feature-body{padding:18px} .news-feature-body h3{font-size:24px;-webkit-line-clamp:3} .news-feature-body p{-webkit-line-clamp:3;font-size:14px} .news-small-list{height:auto;display:grid;grid-template-rows:none;grid-template-columns:1fr;gap:9px} .news-small{min-height:106px;grid-template-columns:118px minmax(0,1fr)} .news-small-image{min-height:106px} .news-small h3{font-size:15px;-webkit-line-clamp:2} .news-list-item{grid-template-columns:118px minmax(0,1fr);min-height:126px} .news-list-image{min-height:126px} .news-list-copy{padding:11px 12px} .news-list-copy h2{font-size:16px;-webkit-line-clamp:3;margin:4px 0} .news-list-copy p{font-size:12.5px;-webkit-line-clamp:2} .news-list-copy .news-meta{font-size:10.5px;margin-top:5px} .news-list-copy .list-read-more{display:none} .article-hero .hero-image,.page-hero .hero-image{border-radius:13px;aspect-ratio:auto;background:transparent} .article-hero .hero-image img,.page-hero .hero-image img{height:auto;max-height:70vh;object-fit:contain;background:#f4f7f9} .article-content img,.case-block img,.prose img{width:100%;max-width:100%;margin:18px auto;border-radius:12px}.case-facts img{max-width:100%;margin:14px auto;border-radius:10px} .related-item{grid-template-columns:112px minmax(0,1fr);min-height:98px} .related-thumb{min-height:98px} .related-copy h3{font-size:14px;-webkit-line-clamp:3} .search-result{grid-template-columns:110px minmax(0,1fr);min-height:112px} .search-result-image{min-height:112px} .search-result-copy{padding:11px 12px} .search-result-copy h2{font-size:16px} .search-result-copy p{font-size:12.5px;-webkit-line-clamp:2} .front-search-form{gap:6px} .front-search-form input{height:46px;min-width:0} .front-search-form button{height:46px;min-width:88px;padding:0 12px} } /* BILOCO-DOC [CSS-BLOCK] 337 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:430px){ .header-inner{padding-left:12px;padding-right:8px} .site-logo{min-width:0} .site-logo strong{font-size:20px;letter-spacing:.07em} .header-mobile-tools{gap:2px} .header-mobile-tools .mobile-native-languages{gap:1px} .header-mobile-tools .mobile-native-languages a{padding:5px 5px;font-size:11px} .header-mobile-tools .flag{font-size:14px} .mobile-globe-button{width:31px;height:31px;font-size:15px} .menu-toggle{flex-basis:38px} .mobile-translate-menu{right:-38px;width:min(270px,88vw)} .news-small{grid-template-columns:104px minmax(0,1fr)} .news-list-item{grid-template-columns:104px minmax(0,1fr)} .news-list-copy p{display:none} .related-item{grid-template-columns:100px minmax(0,1fr)} } /* BILOCO-DOC [CSS-BLOCK] 338 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:700px){body.nav-open .mobile-actions{display:none!important}} /* Accessibility contrast/focus refinements for Lighthouse. */ .section-kicker{color:#0871bd} .hero .eyebrow,.hero .section-kicker,.page-hero .section-kicker,.article-hero .section-kicker,.process .section-kicker{color:#69c8ff} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(8,119,201,.38);outline-offset:3px} /* ====================================================================== * BILOCO COMPANY IDENTITY BLOCK 125B - HOMEPAGE CONTACT SUMMARY * ====================================================================== */ .contact-company-mini{display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;align-items:start;margin-top:24px;padding:16px;border:1px solid #d8e5ef;border-radius:16px;background:rgba(255,255,255,.72)} .contact-company-mini img{display:block;width:92px;height:80px;object-fit:contain;background:#fff;border-radius:12px;padding:4px} .contact-company-mini>div{min-width:0} /* BILOCO-DOC [CSS-BLOCK] 345 FOOTER / CONTACT | Nhóm quy tắc footer / contact; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .contact-company-mini b{display:block;font-size:14px;line-height:1.45;color:#10283f} .contact-company-mini span{display:block;margin-top:3px;color:#0a5f9f;font-size:13px;font-weight:760;font-style:italic} .contact-company-mini p{margin:5px 0;font-size:13px;line-height:1.55;color:#52677a} .contact-company-mini a{color:#164f78;text-decoration:none;font-weight:700} .contact-company-mini em{display:block;margin-top:8px;color:#0a5f9f;font-size:12px;font-style:normal;font-weight:750} /* BILOCO-DOC [CSS-BLOCK] 350 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:700px){.contact-company-mini{grid-template-columns:72px minmax(0,1fr);padding:13px}.contact-company-mini img{width:72px;height:64px}} /* BILOCO COMPANY IDENTITY BLOCK 125C - OFFICIAL HEADER LOGO SIZE */ .site-logo img{max-height:58px;max-width:82px;width:auto;object-fit:contain} /* BILOCO-DOC [CSS-BLOCK] 352 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:980px){.site-logo img{max-height:50px;max-width:72px}} /* BILOCO-DOC [CSS-BLOCK] 353 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:430px){.site-logo img{max-height:44px;max-width:64px}} /* ===================================================================== * BILOCO FRONTEND BLOCK 126B - PROJECT REQUEST FORM POLISH * Database-backed project/service choices with compact touch controls. * ===================================================================== */ .scope-grid label{ min-height:44px; padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:#fff; gap:9px; cursor:pointer; } .scope-grid input[type="checkbox"]{ width:16px; height:16px; flex:0 0 16px; margin:0; accent-color:var(--blue); } .scope-grid label:has(input:checked){ border-color:#9ac9e8; background:#f0f8fd; } /* BILOCO-DOC [CSS-BLOCK] 357 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:640px){ .scope-grid{grid-template-columns:1fr;gap:8px} .scope-grid label{min-height:42px;padding:8px 10px} } /* ===================================================================== * BILOCO FRONTEND BLOCK 126C - TOC / FAQ FINISHING * Keep the collapsed state clean and make keyboard focus visible. * ===================================================================== */ .toc-toggle:focus-visible, .toc-links a:focus-visible, .faq-question:focus-visible{ outline:3px solid rgba(8,119,201,.22); outline-offset:2px; } .article-toc:not(.open) .toc-links{display:none!important} .article-toc.open .toc-links{display:grid!important} /* ==================================================================== * BILOCO LANGUAGE UI BLOCK 127A - NATIVE VI/EN FLAGS * ==================================================================== * Use local SVG flags for consistent rendering on desktop and mobile. * This avoids OS/browser emoji differences and keeps the language switch * visually identical on PC, tablet and phone. * ==================================================================== */ .language-native .lang-flag, .mobile-native-languages .lang-flag, .header-mobile-tools .lang-flag { width: 24px; height: 16px; display: block; flex: 0 0 auto; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(11, 38, 61, .10); } .language-native a { gap: 6px; min-width: 56px; } /* BILOCO-DOC [CSS-BLOCK] 363 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media (min-width: 1101px) { .language-native { display: flex !important; align-items: center; gap: 4px; } .language-native a { display: inline-flex !important; align-items: center; justify-content: center; } } /* BILOCO-DOC [CSS-BLOCK] 364 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media (max-width: 1100px) { .mobile-native-languages a { gap: 5px; } } /* ==================================================================== * BILOCO PROJECT UI BLOCK 128A - PROJECT INFORMATION CARD * Purpose: * - Keep the project information heading compact. * - Separate the card header from the data area with a distinct color. * - Reduce label/value size for a cleaner professional hierarchy. * - Preserve the existing project data and sticky behavior. * ==================================================================== */ .case-facts { padding: 0; overflow: hidden; background: #ffffff; border-color: #d7e4ee; box-shadow: 0 10px 28px rgba(7, 41, 70, .06); } .case-facts > h2 { margin: 0; padding: 14px 18px; font-size: 20px; line-height: 1.25; font-weight: 820; color: #ffffff; background: linear-gradient(135deg, #0b4168 0%, #0877c9 100%); border-bottom: 1px solid rgba(255, 255, 255, .16); } .case-facts > dl, .case-facts > h3, .case-facts > .prose, .case-facts > .tag-list { margin-left: 18px; margin-right: 18px; } .case-facts > dl { margin-top: 14px; margin-bottom: 14px; } .case-facts dt { margin-top: 11px; font-size: 10px; line-height: 1.35; letter-spacing: .055em; color: #6c7d8e; } .case-facts dd { margin-top: 2px; font-size: 14px; line-height: 1.45; font-weight: 700; color: #17344d; } /* BILOCO-DOC [CSS-BLOCK] 371 GLOBAL / COMPONENTS | Nhóm quy tắc global / components; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .case-facts > h3 { margin-top: 16px; margin-bottom: 8px; padding-top: 12px; border-top: 1px solid #e4ecf2; font-size: 14px; line-height: 1.35; color: #075f9f; } .case-facts > .prose { margin-bottom: 14px; } .case-facts > .prose p, .case-facts > .prose li { font-size: 13px; line-height: 1.6; } .case-facts > .tag-list { margin-bottom: 18px; } .case-facts > .tag-list a { padding: 5px 8px; font-size: 11px; } /* BILOCO-DOC [CSS-BLOCK] 376 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media (max-width: 900px) { .case-facts { position: static; top: auto; } .case-facts > h2 { padding: 12px 15px; font-size: 18px; } .case-facts > dl, .case-facts > h3, .case-facts > .prose, .case-facts > .tag-list { margin-left: 15px; margin-right: 15px; } .case-facts dt { font-size: 9px; } .case-facts dd { font-size: 13px; } } /* ==================================================================== * BILOCO FRONTEND BLOCK 131A - RELATED PROJECTS * Reuses compact related cards so images/titles remain vertically aligned. * ==================================================================== */ .project-related{padding-top:10px} .project-related .section-head{margin-bottom:14px} .project-related .section-head h2{margin:0;font-size:clamp(22px,2.5vw,32px);color:#12334d} .project-related .related-item{min-height:116px} .project-related .related-thumb{min-height:116px;background-position:center;background-size:cover} .project-related .related-copy h3{-webkit-line-clamp:2} /* BILOCO-DOC [CSS-BLOCK] 383 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:680px){.project-related .related-item{grid-template-columns:108px minmax(0,1fr);min-height:96px}.project-related .related-thumb{min-height:96px}.project-related .related-copy{padding:9px 11px}} /* ==================================================================== * BILOCO CONTENT MEDIA BLOCK 134A - RESPONSIVE IMAGE THEMES * Layout is stored per placement using safe data-* attributes. * Media files remain untouched and reusable in other content blocks. * ==================================================================== */ .article-content [data-biloco-gallery="1"], .case-block [data-biloco-gallery="1"], .prose [data-biloco-gallery="1"]{ display:grid; gap:18px; width:100%; margin:28px auto; clear:both; } .article-content [data-biloco-gallery="1"][data-cols-desktop="1"], .case-block [data-biloco-gallery="1"][data-cols-desktop="1"], .prose [data-biloco-gallery="1"][data-cols-desktop="1"]{grid-template-columns:minmax(0,1fr)} .article-content [data-biloco-gallery="1"][data-cols-desktop="2"], .case-block [data-biloco-gallery="1"][data-cols-desktop="2"], .prose [data-biloco-gallery="1"][data-cols-desktop="2"]{grid-template-columns:repeat(2,minmax(0,1fr))} .article-content [data-biloco-gallery="1"][data-cols-desktop="3"], .case-block [data-biloco-gallery="1"][data-cols-desktop="3"], .prose [data-biloco-gallery="1"][data-cols-desktop="3"]{grid-template-columns:repeat(3,minmax(0,1fr))} .article-content [data-biloco-gallery="1"] figure, .case-block [data-biloco-gallery="1"] figure, .prose [data-biloco-gallery="1"] figure{ min-width:0; margin:0; overflow:hidden; border-radius:14px; background:#f5f8fb; border:1px solid #e4ebf1; } .article-content [data-biloco-gallery="1"] figure img, .case-block [data-biloco-gallery="1"] figure img, .prose [data-biloco-gallery="1"] figure img{ display:block; width:100%; max-width:none; margin:0; border-radius:0; background:#eef3f6; } /* BILOCO-DOC [CSS-BLOCK] 390 MEDIA / IMAGES | Nhóm quy tắc media / images; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .article-content [data-biloco-gallery="1"][data-ratio="16-9"] figure img, .case-block [data-biloco-gallery="1"][data-ratio="16-9"] figure img, .prose [data-biloco-gallery="1"][data-ratio="16-9"] figure img{aspect-ratio:16/9} .article-content [data-biloco-gallery="1"][data-ratio="3-2"] figure img, .case-block [data-biloco-gallery="1"][data-ratio="3-2"] figure img, .prose [data-biloco-gallery="1"][data-ratio="3-2"] figure img{aspect-ratio:3/2} .article-content [data-biloco-gallery="1"][data-ratio="4-3"] figure img, .case-block [data-biloco-gallery="1"][data-ratio="4-3"] figure img, .prose [data-biloco-gallery="1"][data-ratio="4-3"] figure img{aspect-ratio:4/3} .article-content [data-biloco-gallery="1"][data-ratio="1-1"] figure img, .case-block [data-biloco-gallery="1"][data-ratio="1-1"] figure img, .prose [data-biloco-gallery="1"][data-ratio="1-1"] figure img{aspect-ratio:1/1} .article-content [data-biloco-gallery="1"][data-ratio="auto"] figure img, .case-block [data-biloco-gallery="1"][data-ratio="auto"] figure img, .prose [data-biloco-gallery="1"][data-ratio="auto"] figure img{aspect-ratio:auto;height:auto} .article-content [data-biloco-gallery="1"][data-fit="cover"] figure img, .case-block [data-biloco-gallery="1"][data-fit="cover"] figure img, .prose [data-biloco-gallery="1"][data-fit="cover"] figure img{height:100%;object-fit:cover} .article-content [data-biloco-gallery="1"][data-fit="contain"] figure img, .case-block [data-biloco-gallery="1"][data-fit="contain"] figure img, .prose [data-biloco-gallery="1"][data-fit="contain"] figure img{height:100%;object-fit:contain} .article-content [data-biloco-gallery="1"] figcaption, .case-block [data-biloco-gallery="1"] figcaption, .prose [data-biloco-gallery="1"] figcaption{ padding:8px 10px; margin:0; background:#fff; border-top:1px solid #e7edf2; font-size:12px; line-height:1.45; color:var(--muted); } /* BILOCO-DOC [CSS-BLOCK] 398 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:900px){ .article-content [data-biloco-gallery="1"][data-cols-tablet="1"], .case-block [data-biloco-gallery="1"][data-cols-tablet="1"], .prose [data-biloco-gallery="1"][data-cols-tablet="1"]{grid-template-columns:minmax(0,1fr)} .article-content [data-biloco-gallery="1"][data-cols-tablet="2"], .case-block [data-biloco-gallery="1"][data-cols-tablet="2"], .prose [data-biloco-gallery="1"][data-cols-tablet="2"]{grid-template-columns:repeat(2,minmax(0,1fr))} .article-content [data-biloco-gallery="1"][data-cols-tablet="3"], .case-block [data-biloco-gallery="1"][data-cols-tablet="3"], .prose [data-biloco-gallery="1"][data-cols-tablet="3"]{grid-template-columns:repeat(3,minmax(0,1fr))} } /* BILOCO-DOC [CSS-BLOCK] 399 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:640px){ .article-content [data-biloco-gallery="1"], .case-block [data-biloco-gallery="1"], .prose [data-biloco-gallery="1"]{gap:10px;margin:20px auto} .article-content [data-biloco-gallery="1"][data-cols-mobile="1"], .case-block [data-biloco-gallery="1"][data-cols-mobile="1"], .prose [data-biloco-gallery="1"][data-cols-mobile="1"]{grid-template-columns:minmax(0,1fr)} .article-content [data-biloco-gallery="1"][data-cols-mobile="2"], .case-block [data-biloco-gallery="1"][data-cols-mobile="2"], .prose [data-biloco-gallery="1"][data-cols-mobile="2"]{grid-template-columns:repeat(2,minmax(0,1fr))} .article-content [data-biloco-gallery="1"] figure, .case-block [data-biloco-gallery="1"] figure, .prose [data-biloco-gallery="1"] figure{border-radius:10px} } .article-content [data-biloco-gallery="1"][data-ratio="auto"] figure img, .case-block [data-biloco-gallery="1"][data-ratio="auto"] figure img, .prose [data-biloco-gallery="1"][data-ratio="auto"] figure img{height:auto;object-fit:contain} /* ==================================================================== * BILOCO v1.3.5 - ACCESSIBILITY / CONTENT SPACING / CAPTCHA * ==================================================================== */ .article-content>p:empty,.case-block>p:empty,.prose>p:empty{display:none} .toc-heading{scroll-margin-top:112px} .captcha-field{margin:14px 0;min-height:66px} .captcha-label{display:block;margin-bottom:7px;color:#405269;font-size:12px;font-weight:750} .captcha-config-warning{margin:12px 0;padding:10px 12px;border:1px solid #f4c790;border-radius:9px;background:#fff7ed;color:#9a3412;font-size:13px;font-weight:650} /* BILOCO-DOC [CSS-BLOCK] 406 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:760px){.toc-heading{scroll-margin-top:calc(var(--mobile-header-height,102px) + 24px)}} /* ==================================================================== * BILOCO v1.3.5 - MERGED LANGUAGE CSS TO REMOVE RENDER-BLOCKING REQUEST * ==================================================================== */ /* ==================================================================== * BILOCO LANGUAGE CSS BLOCK 01 - HIDDEN GOOGLE TRANSLATE ENGINE HOST * ==================================================================== * The Google element is kept off-screen because Biloco uses only the * translation engine. The user-facing Google toolbar is never displayed. * ==================================================================== */ .google-translate-host { position: fixed; left: -10000px; bottom: -10000px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* ==================================================================== * BILOCO LANGUAGE CSS BLOCK 02 - SUPPRESS GOOGLE TRANSLATE TOOLBAR * ==================================================================== * Covers both legacy and current Google Translate injected class names. * Keep selectors isolated here so future Google UI changes are easy to * update without touching the main site stylesheet. * ==================================================================== */ .goog-te-banner-frame, .goog-te-banner-frame.skiptranslate, iframe.goog-te-banner-frame, .VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .goog-te-balloon-frame, .goog-tooltip, #goog-gt-tt, body > .skiptranslate { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; overflow: hidden !important; } /* ==================================================================== * BILOCO LANGUAGE CSS BLOCK 03 - REMOVE TRANSLATION LAYOUT OFFSETS * ==================================================================== */ html, html.translated-ltr, html.translated-rtl, body, body.translated-ltr, body.translated-rtl { top: 0 !important; margin-top: 0 !important; } /* ==================================================================== * BILOCO LANGUAGE CSS BLOCK 04 - REMOVE GOOGLE TEXT HIGHLIGHT EFFECTS * ==================================================================== */ .goog-text-highlight { background: transparent !important; box-shadow: none !important; } /* ==================================================================== * BILOCO LANGUAGE CSS BLOCK 05 - NATIVE LANGUAGE VISIBILITY * ==================================================================== * PHP only outputs a VI/EN button when that native CMS version exists. * CSS merely keeps the remaining controls aligned after a button is hidden. * ==================================================================== */ .language-native:empty, .mobile-native-languages:empty { display: none !important; } /* ==================================================================== * BILOCO LANGUAGE CSS BLOCK 06 - MACHINE LANGUAGE DROPDOWN * ==================================================================== */ .mobile-translate-menu, .translate-menu { overscroll-behavior: contain; scrollbar-width: thin; } /* BILOCO-DOC [CSS-BLOCK] 413 HEADER / NAV / LANGUAGE | Nhóm quy tắc header / nav / language; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .mobile-translate-menu a, .translate-menu a { cursor: pointer; } /* BILOCO-DOC [CSS-BLOCK] 414 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media (max-width: 1100px) { .mobile-translate-menu { max-height: min(430px, 58dvh); overflow-y: auto; } } /* ================================================================ * BILOCO v1.3.5 - RESPONSIVE IMAGE DELIVERY * Real elements enable native lazy loading and intrinsic sizing. * ================================================================ */ .project-visual,.news-feature-image,.news-small-image,.news-list-image{position:relative;overflow:hidden} .project-visual>img,.news-feature-image>img,.news-small-image>img,.news-list-image>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block} .project-visual.has-image:after{z-index:1} .project-visual span{z-index:2} /* === BILOCO v1.3.5.4 CONTENT WIDTH REPAIR === */ /* Keep section gutter and readable text width independent. Previously `.section.prose` applied max-width to the same box that owned the large responsive page padding, leaving only a narrow strip of usable content on desktop. */ .content-section{width:100%;max-width:none} .content-reading-shell{width:100%;max-width:980px;margin-left:auto;margin-right:auto;min-width:0} /* BILOCO-DOC [CSS-BLOCK] 421 CONTENT / ARTICLES | Nhóm quy tắc content / articles; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .article-reading-layout>.article-content{width:100%;min-width:0} .article-reading-layout.no-toc{grid-template-columns:minmax(0,1fr)} .article-reading-layout.no-toc>.article-content{width:100%;max-width:980px;margin-left:auto;margin-right:auto} .prose table{width:100%;max-width:100%;display:block;overflow-x:auto;border-collapse:collapse} .prose iframe,.prose video{max-width:100%} /* BILOCO-DOC [CSS-BLOCK] 426 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:1100px){ .content-reading-shell,.article-reading-layout.no-toc>.article-content{max-width:100%} } /* === BILOCO v1.3.5.5 RIGHT CONTENT SIDEBAR === */ /* Desktop content remains readable while a reusable right sidebar adds project contact, service navigation and recent articles. */ .content-main-with-sidebar{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:38px;align-items:start;width:100%;min-width:0} .content-main-with-sidebar>.content-reading-shell{max-width:none;margin:0;min-width:0} .content-right-sidebar{position:sticky;top:100px;display:grid;gap:16px;min-width:0;align-self:start} .sidebar-card{border:1px solid var(--line);border-radius:15px;background:#fff;padding:18px;box-shadow:0 8px 24px rgba(8,31,54,.045)} .sidebar-card-title{font-size:15px;font-weight:850;color:var(--ink);margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line)} .sidebar-kicker{display:block;color:var(--blue);font-size:11px;font-weight:900;letter-spacing:.12em;margin-bottom:6px} /* BILOCO-DOC [CSS-BLOCK] 433 ADMIN / SIDEBAR | Nhóm quy tắc admin / sidebar; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .sidebar-cta-card{background:linear-gradient(145deg,#f5faff,#eef6fb)} .sidebar-cta-card h2{font-size:23px!important;line-height:1.2;margin:0 0 8px!important} .sidebar-cta-card p{font-size:14px!important;line-height:1.55!important;color:#52687b!important;margin:0 0 14px} .sidebar-cta-actions{display:grid;gap:8px} .sidebar-primary,.sidebar-phone{display:flex;align-items:center;justify-content:center;min-height:40px;border-radius:9px;text-decoration:none;font-size:13px;font-weight:820} .sidebar-primary{background:var(--navy);color:#fff}.sidebar-primary:hover{background:var(--blue2)} .sidebar-phone{background:#fff;border:1px solid #cbdce8;color:var(--blue)} .sidebar-link-list{display:grid}.sidebar-link-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 2px;border-bottom:1px solid #edf2f6;text-decoration:none;color:#344c61;font-size:13px;font-weight:720}.sidebar-link-list a:last-child{border-bottom:0}.sidebar-link-list a:hover{color:var(--nav-hover)}.sidebar-link-list b{font-size:18px;color:#8aa2b5} .sidebar-article-list{display:grid;gap:0}.sidebar-article-list a{display:grid;gap:3px;padding:10px 0;border-bottom:1px solid #edf2f6;text-decoration:none}.sidebar-article-list a:last-child{border-bottom:0;padding-bottom:0}.sidebar-article-list a:first-child{padding-top:0}.sidebar-article-list small{color:var(--blue);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.05em}/* BILOCO-DOC [CSS-BLOCK] 451 ADMIN / SIDEBAR | Nhóm quy tắc admin / sidebar; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .sidebar-article-list strong{font-size:13.5px;line-height:1.4;color:var(--ink)}.sidebar-article-list span{font-size:11px;color:#75889a}.sidebar-article-list a:hover strong{color:var(--nav-hover)} /* Article: left TOC + centered reading column + right sidebar on wide screens. */ .article-reading-layout{grid-template-columns:190px minmax(0,1fr) 270px;gap:26px;padding-left:max(24px,calc((100vw - 1320px)/2));padding-right:max(24px,calc((100vw - 1320px)/2))} .article-reading-layout>.article-content{max-width:820px;margin:0 auto} .article-reading-layout.no-toc{grid-template-columns:minmax(0,1fr) 300px} .article-reading-layout.no-toc>.article-content{max-width:900px;margin-left:auto;margin-right:auto} .article-reading-layout>.content-right-sidebar{grid-column:3} .article-reading-layout.no-toc>.content-right-sidebar{grid-column:2} /* BILOCO-DOC [CSS-BLOCK] 460 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:1180px){ .article-reading-layout{grid-template-columns:180px minmax(0,1fr) 250px;gap:20px} .content-main-with-sidebar{grid-template-columns:minmax(0,1fr) 270px;gap:28px} } /* BILOCO-DOC [CSS-BLOCK] 461 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:1100px){ .article-reading-layout,.article-reading-layout.no-toc,.content-main-with-sidebar{grid-template-columns:1fr} .article-reading-layout>.article-content,.article-reading-layout.no-toc>.article-content,.content-main-with-sidebar>.content-reading-shell{max-width:920px;width:100%;margin-left:auto;margin-right:auto} .article-reading-layout>.content-right-sidebar,.article-reading-layout.no-toc>.content-right-sidebar{grid-column:auto} .content-right-sidebar{position:static;width:100%;max-width:920px;margin:0 auto;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start} .article-toc{grid-column:auto} } /* BILOCO-DOC [CSS-BLOCK] 462 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:760px){ .content-right-sidebar{grid-template-columns:1fr} .sidebar-card{padding:16px} } /* === BILOCO v1.3.5.6 ELECTRONIC COMPANY PROFILE / FLIPBOOK === */ .profile-public{background:#f3f6f9;min-height:70vh} .profile-public-hero{max-width:1320px;margin:0 auto;padding:64px 28px 34px;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,420px);gap:42px;align-items:center} .profile-public-hero-copy h1{font-size:clamp(38px,5vw,68px);line-height:1.02;margin:10px 0 16px;color:var(--ink);letter-spacing:-.035em} .profile-public-hero-copy>p{max-width:760px;color:#586e80;font-size:18px;line-height:1.65} .profile-public-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}.profile-public-actions .btn{min-height:42px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none} /* BILOCO-DOC [CSS-BLOCK] 469 PROJECT / SERVICE | Nhóm quy tắc project / service; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .profile-public-cover-preview{border-radius:20px;overflow:hidden;box-shadow:0 24px 70px rgba(8,31,54,.16);aspect-ratio:4/3;background:#dfe7ee} .profile-public-cover-preview img{width:100%;height:100%;object-fit:cover;display:block} .profile-reader-shell{max-width:1380px;margin:0 auto;padding:0 28px 72px;position:relative} .profile-reader-toolbar{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 14px;position:sticky;top:78px;z-index:12;width:max-content;padding:7px 10px;border:1px solid #d7e0e8;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-radius:999px;box-shadow:0 8px 28px rgba(8,31,54,.08)} .profile-reader-toolbar button{border:0;background:#071d33;color:#fff;width:36px;height:36px;border-radius:50%;font-size:26px;line-height:1;cursor:pointer}.profile-reader-toolbar button:disabled{opacity:.32;cursor:default}.profile-reader-toolbar span{min-width:72px;text-align:center;font-size:13px;font-weight:800;color:#344c61} .profile-book{position:relative;min-height:760px;perspective:2200px;transform-style:preserve-3d} .profile-book-page{display:none;position:absolute;inset:0;max-width:1180px;min-height:740px;margin:0 auto;background:#fff;border:1px solid #dce5ec;border-radius:18px;overflow:hidden;box-shadow:0 24px 80px rgba(5,30,52,.13);transform-origin:left center;backface-visibility:hidden} .profile-book-page.is-active{display:block;z-index:3}.profile-book-page.flip-in-next{animation:profileFlipInNext .52s cubic-bezier(.2,.75,.2,1)}.profile-book-page.flip-out-next{display:block;z-index:4;animation:profileFlipOutNext .52s cubic-bezier(.2,.75,.2,1)}.profile-book-page.flip-in-prev{animation:profileFlipInPrev .52s cubic-bezier(.2,.75,.2,1)}.profile-book-page.flip-out-prev{display:block;z-index:4;animation:profileFlipOutPrev .52s cubic-bezier(.2,.75,.2,1)} /* BILOCO-DOC [CSS-BLOCK] 483 KEYFRAMES | Nhóm quy tắc @keyframes; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @keyframes profileFlipInNext{from{opacity:.35;transform:rotateY(-20deg) translateX(38px)}to{opacity:1;transform:rotateY(0) translateX(0)}} @keyframes profileFlipOutNext{from{opacity:1;transform:rotateY(0)}to{opacity:0;transform:rotateY(-34deg) translateX(-34px)}} @keyframes profileFlipInPrev{from{opacity:.35;transform:rotateY(20deg) translateX(-38px)}to{opacity:1;transform:rotateY(0) translateX(0)}} @keyframes profileFlipOutPrev{from{opacity:1;transform:rotateY(0)}to{opacity:0;transform:rotateY(34deg) translateX(34px)}} .profile-cover-page{background:linear-gradient(145deg,#071d33,#0e3558);color:#fff}.profile-cover-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}.profile-cover-page:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,20,36,.82),rgba(4,20,36,.3))}/* BILOCO-DOC [CSS-BLOCK] 490 PROJECT / SERVICE | Nhóm quy tắc project / service; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .profile-cover-overlay{position:absolute;z-index:2;left:7%;right:7%;bottom:10%;max-width:760px}.profile-cover-overlay>span{font-size:15px;font-weight:900;letter-spacing:.18em}.profile-cover-overlay h2{font-size:clamp(42px,6vw,78px);line-height:1.02;margin:12px 0 18px;color:#fff}.profile-cover-overlay p{font-size:19px;line-height:1.6;max-width:700px;color:#e5eef6} .profile-page-number{position:absolute;right:24px;top:21px;color:#a6b6c3;font-size:12px;font-weight:900;letter-spacing:.12em}.profile-page-inner{min-height:740px;padding:60px 64px 54px;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:24px}.profile-page-head{max-width:850px}.profile-page-head>span{display:block;color:var(--blue);font-size:11px;font-weight:900;letter-spacing:.14em;margin-bottom:9px}.profile-page-head h2{font-size:clamp(30px,4vw,50px);line-height:1.08;margin:0;color:var(--ink);letter-spacing:-.025em}.profile-page-content.prose{max-width:none;width:100%;margin:0;min-width:0}.profile-page-content.prose p{font-size:16px;line-height:1.72}/* BILOCO-DOC [CSS-BLOCK] 501 MEDIA / IMAGES | Nhóm quy tắc media / images; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .profile-page-media{margin:0;border-radius:14px;overflow:hidden;background:#edf2f5}.profile-page-media img{width:100%;max-height:380px;object-fit:cover;display:block} .profile-layout-image-left .profile-page-inner,.profile-layout-image-right .profile-page-inner{grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);grid-template-areas:"head head" "media content";align-items:start}.profile-layout-image-right .profile-page-inner{grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);grid-template-areas:"head head" "content media"}.profile-layout-image-left .profile-page-head,.profile-layout-image-right .profile-page-head{grid-area:head}.profile-layout-image-left .profile-page-media,.profile-layout-image-right .profile-page-media{grid-area:media}.profile-layout-image-left .profile-page-content,.profile-layout-image-right .profile-page-content{grid-area:content}.profile-layout-full-image .profile-page-media img{max-height:480px}/* BILOCO-DOC [CSS-BLOCK] 509 ADMIN / SIDEBAR | Nhóm quy tắc admin / sidebar; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .profile-layout-editorial .profile-page-content{columns:2;column-gap:42px}.profile-layout-grid .profile-page-inner,.profile-layout-process .profile-page-inner,.profile-layout-contact .profile-page-inner{align-content:start} .profile-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.profile-data-card{border:1px solid #dce5ec;border-radius:13px;padding:17px;background:#f9fbfc}.profile-data-card h3{font-size:16px;margin:8px 0 7px;color:var(--ink)}.profile-data-card p{font-size:13px!important;line-height:1.55!important;margin:0;color:#5e7181}.profile-data-icon{display:inline-flex;min-width:38px;height:30px;align-items:center;justify-content:center;border-radius:8px;background:#e8f2f8;color:var(--blue);font-size:11px;font-weight:900} /* BILOCO-DOC [CSS-BLOCK] 516 PROJECT / SERVICE | Nhóm quy tắc project / service; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .profile-project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.profile-project-card{display:grid;grid-template-columns:130px minmax(0,1fr);border:1px solid #dce5ec;border-radius:13px;overflow:hidden;background:#fff}.profile-project-card img{width:100%;height:100%;min-height:118px;object-fit:cover}.profile-project-card>div{padding:14px}.profile-project-card h3{font-size:15px;margin:0 0 7px}.profile-project-card p{font-size:12.5px!important;line-height:1.45!important;margin:0 0 7px}.profile-project-card small{color:#738696} .profile-process-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.profile-process-list>div{display:grid;grid-template-columns:52px 1fr;align-items:center;border:1px solid #dce5ec;border-radius:12px;padding:12px 15px}.profile-process-list b{color:var(--blue);font-size:18px}.profile-process-list span{font-size:14px;font-weight:750;color:#344c61}/* BILOCO-DOC [CSS-BLOCK] 527 FOOTER / CONTACT | Nhóm quy tắc footer / contact; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .profile-contact-card{max-width:760px;border-radius:16px;background:linear-gradient(145deg,#071d33,#0d3a62);padding:30px;color:#fff}.profile-contact-card strong{font-size:24px}.profile-contact-card p,.profile-contact-card a{color:#e8f2f8}.profile-contact-card a{text-decoration:none;font-weight:750} .profile-swipe-hint{text-align:center;color:#748797;font-size:12px;margin-top:14px} .profile-scroll-mode .profile-reader-toolbar{display:none}.profile-scroll-mode .profile-book{display:grid;gap:22px;min-height:0;perspective:none}/* BILOCO-DOC [CSS-BLOCK] 534 PROJECT / SERVICE | Nhóm quy tắc project / service; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .profile-scroll-mode .profile-book-page{display:block!important;position:relative;inset:auto;min-height:0;animation:none!important;transform:none!important;opacity:1!important}.profile-scroll-mode .profile-page-inner{min-height:0}.profile-scroll-mode .profile-swipe-hint{display:none} .profile-reader-shell:fullscreen{background:#edf2f5;padding:28px;overflow:auto}.profile-reader-shell:fullscreen .profile-reader-toolbar{top:0}.profile-reader-shell:fullscreen .profile-book-page{max-width:1280px} /* BILOCO-DOC [CSS-BLOCK] 540 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:980px){.profile-public-hero{grid-template-columns:1fr;padding-top:42px}.profile-public-cover-preview{max-width:520px}.profile-book{min-height:680px}.profile-book-page{min-height:660px}.profile-page-inner{min-height:660px;padding:48px 38px}.profile-layout-image-left .profile-page-inner,.profile-layout-image-right .profile-page-inner{grid-template-columns:1fr;grid-template-areas:"head" "media" "content"}.profile-layout-editorial .profile-page-content{columns:1}.profile-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} /* BILOCO-DOC [CSS-BLOCK] 541 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:640px){.profile-public-hero{padding:32px 16px 24px}.profile-public-hero-copy h1{font-size:38px}.profile-public-actions{display:grid;grid-template-columns:1fr 1fr}.profile-public-actions .btn{width:100%}.profile-reader-shell{padding:0 12px 46px}.profile-reader-toolbar{top:68px}.profile-book{min-height:650px}.profile-book-page{min-height:630px;border-radius:12px}.profile-page-inner{min-height:630px;padding:42px 22px}.profile-cover-overlay{left:8%;right:8%;bottom:8%}.profile-cover-overlay h2{font-size:42px}.profile-cover-overlay p{font-size:15px}.profile-card-grid,.profile-project-grid,.profile-process-list{grid-template-columns:1fr}.profile-project-card{grid-template-columns:105px 1fr}.profile-page-head h2{font-size:30px}} /* BILOCO-DOC [CSS-BLOCK] 542 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(prefers-reduced-motion:reduce){.profile-book-page{animation:none!important;transition:none!important}} /* BILOCO-DOC [CSS-BLOCK] 543 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media print{.site-header,.site-footer,.mobile-actions,.profile-public-hero,.profile-reader-toolbar,.profile-swipe-hint{display:none!important}.profile-public{background:#fff}.profile-reader-shell{max-width:none;padding:0}.profile-book{display:block;min-height:0}.profile-book-page{display:block!important;position:relative!important;inset:auto!important;min-height:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;page-break-after:always;break-after:page;animation:none!important;transform:none!important;opacity:1!important}.profile-page-inner{min-height:0!important;padding:14mm 12mm}.profile-cover-page{height:270mm}.profile-cover-overlay h2{font-size:34pt}.profile-page-number{top:8mm;right:8mm}} /* === BILOCO v1.3.5.6 LOCAL QR PROFILE SHARE === */ .profile-modal-open{overflow:hidden} .profile-qr-modal[hidden]{display:none!important} .profile-qr-modal{position:fixed;inset:0;z-index:1400;display:grid;place-items:center;padding:22px;background:rgba(4,20,36,.72);backdrop-filter:blur(8px)} .profile-qr-dialog{position:relative;width:min(390px,100%);padding:30px;border-radius:20px;background:#fff;box-shadow:0 28px 90px rgba(0,0,0,.3);text-align:center} .profile-qr-dialog h2{margin:8px 0 18px;color:var(--ink);font-size:24px;line-height:1.2} .profile-qr-dialog p{margin:15px 0 0;color:#637789;font-size:13px;line-height:1.55} /* BILOCO-DOC [CSS-BLOCK] 550 PROJECT / SERVICE | Nhóm quy tắc project / service; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .profile-qr-code{width:min(270px,72vw);aspect-ratio:1;margin:0 auto;padding:10px;border:1px solid #dce5ec;border-radius:14px;background:#fff} .profile-qr-code svg{display:block;width:100%;height:100%} .profile-qr-close{position:absolute;right:12px;top:12px;width:38px;height:38px;border:0;border-radius:50%;background:#eef3f6;color:#17334b;font-size:24px;line-height:1;cursor:pointer} .profile-qr-close:hover,.profile-qr-close:focus-visible{background:#dfeaf2;outline:2px solid var(--blue);outline-offset:2px} /* BILOCO-DOC [CSS-BLOCK] 554 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:640px){.profile-qr-dialog{padding:26px 18px 22px}.profile-qr-dialog h2{font-size:21px}} /* BILOCO-DOC [CSS-BLOCK] 555 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media print{.profile-qr-modal{display:none!important}} /* === BILOCO v1.3.5.8 PROFILE PROJECT CARDS / EQUAL PAGES / MOBILE FULLSCREEN EXIT === */ .profile-book{--profile-book-page-height:760px;min-height:var(--profile-book-page-height)} .profile-book-page{height:var(--profile-book-page-height);min-height:var(--profile-book-page-height)} .profile-cover-page{height:var(--profile-book-page-height);min-height:var(--profile-book-page-height)} .profile-page-inner{height:100%;min-height:0;box-sizing:border-box;overflow:auto;scrollbar-gutter:stable} .profile-project-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(132px,1fr);gap:14px} .profile-project-card{min-width:0;min-height:132px;height:100%;grid-template-columns:132px minmax(0,1fr);align-items:stretch} /* BILOCO-DOC [CSS-BLOCK] 562 MEDIA / IMAGES | Nhóm quy tắc media / images; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .profile-project-card.no-image{display:block;grid-template-columns:none;background:linear-gradient(145deg,#fff,#f8fbfd)} .profile-project-thumb{margin:0;min-width:0;height:100%;background:#eaf0f4;overflow:hidden} .profile-project-thumb img{width:100%;height:100%;min-height:132px;object-fit:cover;display:block} .profile-project-body{min-width:0;padding:14px 15px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start} .profile-project-card.no-image .profile-project-body{height:100%;box-sizing:border-box;padding:16px 18px} .profile-project-eyebrow{display:block;margin:0 0 6px;color:var(--blue);font-size:10.5px;font-weight:900;line-height:1.2;letter-spacing:.055em;text-transform:uppercase} .profile-project-card h3{font-size:16px;line-height:1.32;margin:0 0 6px;color:var(--ink)} /* BILOCO-DOC [CSS-BLOCK] 569 CONTENT / ARTICLES | Nhóm quy tắc content / articles; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .profile-project-card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px!important;line-height:1.48!important;margin:0 0 8px;color:#516779} .profile-project-meta{display:flex;flex-wrap:wrap;gap:5px 7px;margin-top:auto;padding-top:4px} .profile-project-meta span{display:inline-flex;align-items:center;min-height:22px;padding:3px 8px;border-radius:999px;background:#eef4f8;color:#5d7283;font-size:10.5px;font-weight:750;line-height:1.25} .profile-fullscreen-exit{display:none!important} .profile-reader-shell:fullscreen .profile-fullscreen-exit,.profile-reader-shell.profile-pseudo-fullscreen .profile-fullscreen-exit{display:inline-flex!important;width:auto!important;min-width:78px!important;height:36px!important;padding:0 11px!important;border-radius:999px!important;gap:5px;align-items:center;justify-content:center;background:#fff!important;color:#102b43!important;border:1px solid #cad8e3!important;font-size:20px!important;font-weight:800;line-height:1!important;box-shadow:0 4px 16px rgba(7,29,51,.12)} .profile-fullscreen-exit span{font-size:12px;line-height:1} .profile-reader-shell.profile-pseudo-fullscreen{position:fixed!important;inset:0!important;z-index:1600!important;width:100%!important;max-width:none!important;height:100dvh!important;margin:0!important;padding:12px!important;overflow:auto!important;background:#edf2f5!important} /* BILOCO-DOC [CSS-BLOCK] 576 ADMIN / SIDEBAR | Nhóm quy tắc admin / sidebar; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .profile-reader-shell.profile-pseudo-fullscreen .profile-reader-toolbar{top:0!important} .profile-reader-shell.profile-pseudo-fullscreen .profile-book-page{max-width:1280px} body.profile-fullscreen-lock{overflow:hidden!important} /* BILOCO-DOC [CSS-BLOCK] 579 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:980px){ .profile-book{--profile-book-page-height:700px} .profile-project-grid{grid-auto-rows:minmax(126px,1fr)} .profile-project-card{min-height:126px;grid-template-columns:118px minmax(0,1fr)} } /* BILOCO-DOC [CSS-BLOCK] 580 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:640px){ .profile-book{--profile-book-page-height:660px} .profile-page-inner{padding:40px 20px 26px} .profile-reader-toolbar{max-width:calc(100vw - 28px);gap:8px} .profile-reader-shell:fullscreen .profile-fullscreen-exit,.profile-reader-shell.profile-pseudo-fullscreen .profile-fullscreen-exit{min-width:68px!important;padding:0 9px!important} .profile-project-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:10px} .profile-project-card,.profile-project-card.has-image{grid-template-columns:92px minmax(0,1fr);min-height:104px} .profile-project-card.no-image{display:block;min-height:104px} .profile-project-thumb img{min-height:104px} .profile-project-body,.profile-project-card.no-image .profile-project-body{padding:11px 12px} .profile-project-card p{-webkit-line-clamp:2;font-size:12px!important} .profile-project-meta span:nth-child(n+3){display:none} } /* BILOCO-DOC [CSS-BLOCK] 581 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media print{ html,body{width:auto!important;height:auto!important;overflow:visible!important;background:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact} body.profile-fullscreen-lock{overflow:visible!important} .profile-reader-shell,.profile-reader-shell.profile-pseudo-fullscreen{position:static!important;inset:auto!important;width:auto!important;max-width:none!important;height:auto!important;margin:0!important;padding:0!important;overflow:visible!important;background:#fff!important} .profile-book{display:block!important;width:auto!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;overflow:visible!important;perspective:none!important} .profile-book-page{display:block!important;position:relative!important;inset:auto!important;width:297mm!important;max-width:297mm!important;height:210mm!important;min-height:210mm!important;max-height:210mm!important;margin:0!important;padding:0!important;overflow:hidden!important;border:0!important;border-radius:0!important;box-shadow:none!important;animation:none!important;transform:none!important;opacity:1!important;break-inside:avoid!important;page-break-inside:avoid!important;break-after:page!important;page-break-after:always!important} .profile-book-page:last-child{break-after:auto!important;page-break-after:auto!important} .profile-cover-page{width:297mm!important;height:210mm!important;min-height:210mm!important;max-height:210mm!important} .profile-page-inner{width:100%!important;height:210mm!important;min-height:210mm!important;max-height:210mm!important;padding:13mm 16mm 11mm!important;box-sizing:border-box!important;overflow:hidden!important;gap:5mm!important} .profile-page-head{max-width:230mm!important} .profile-page-head>span{font-size:8pt!important;margin-bottom:2mm!important} .profile-page-head h2{font-size:25pt!important;line-height:1.08!important} .profile-page-content.prose p{font-size:10pt!important;line-height:1.48!important} .profile-page-media img{max-height:88mm!important} .profile-project-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(3,minmax(0,1fr))!important;gap:4mm!important;min-height:0!important} .profile-project-card{min-height:0!important;height:auto!important;border-radius:3mm!important} .profile-project-card.has-image{grid-template-columns:34mm minmax(0,1fr)!important} .profile-project-thumb img{min-height:0!important;height:100%!important} .profile-project-card.no-image{display:block!important} .profile-project-body,.profile-project-card.no-image .profile-project-body{padding:3.5mm 4mm!important} .profile-project-eyebrow{font-size:7pt!important;margin-bottom:1.5mm!important} .profile-project-card h3{font-size:11pt!important;margin-bottom:1.5mm!important} .profile-project-card p{font-size:8.5pt!important;line-height:1.35!important;margin-bottom:1.5mm!important;-webkit-line-clamp:2} .profile-project-meta{gap:1.2mm!important;padding-top:0!important} .profile-project-meta span{min-height:0!important;padding:1mm 2mm!important;font-size:7pt!important} .profile-card-grid{gap:3mm!important} .profile-data-card{padding:3.5mm!important} .profile-process-list{gap:3mm!important} .profile-fullscreen-exit{display:none!important} } .profile-scroll-mode .profile-book{height:auto!important;min-height:0!important} .profile-scroll-mode .profile-book-page{height:auto!important;min-height:0!important;max-height:none!important} .profile-scroll-mode .profile-page-inner{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important} .profile-card-grid{grid-auto-rows:1fr;align-items:stretch} .profile-reader-shell:-webkit-full-screen .profile-fullscreen-exit{display:inline-flex!important;width:auto!important;min-width:78px!important;height:36px!important;padding:0 11px!important;border-radius:999px!important;gap:5px;align-items:center;justify-content:center;background:#fff!important;color:#102b43!important;border:1px solid #cad8e3!important;font-size:20px!important;font-weight:800;line-height:1!important;box-shadow:0 4px 16px rgba(7,29,51,.12)} /* ====================================================================== * BILOCO v1.3.5.8 - canonical footer/contact layout * Replaces overlapping legacy footer/icon overrides with one source of truth. * ====================================================================== */ .footer-grid{ padding:32px max(24px,calc((100vw - 1180px)/2)); display:grid; grid-template-columns:minmax(0,1.62fr) minmax(150px,.56fr) minmax(190px,.72fr); column-gap:38px; row-gap:26px; align-items:start; } /* BILOCO-DOC [CSS-BLOCK] 588 FOOTER / CONTACT | Nhóm quy tắc footer / contact; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .footer-grid>div{min-width:0} .footer-company-card{ display:grid; grid-template-columns:88px minmax(0,1fr); gap:15px; align-items:start; min-width:0; } .footer-brand-logo{ display:block; width:88px; height:88px; max-width:88px; max-height:88px; object-fit:contain; box-sizing:border-box; background:#fff; border-radius:10px; padding:3px; margin:0; box-shadow:0 8px 24px rgba(0,0,0,.12); } .footer-company-copy{min-width:0} .footer-company-copy>strong{ display:block; margin:0 0 8px; color:#fff; font-size:16px; line-height:1.35; letter-spacing:.005em; overflow-wrap:anywhere; } .footer-company-subname{display:none!important} .footer-company-copy>p{margin:0} .footer-bct-link{display:inline-flex!important;align-items:center;justify-content:flex-start;width:100%;max-width:220px;min-height:38px;margin:12px 0 0!important;padding:0!important;text-decoration:none!important} .footer-bct-logo{display:block;width:100%;max-width:220px;height:auto;max-height:83px;object-fit:contain;border:0;border-radius:0;background:transparent;box-shadow:none} .mobile-footer-bct{margin:10px 0 0!important} .mobile-footer-bct .footer-bct-link{max-width:220px} .footer-company-copy .footer-muted, .footer-hotline{ color:#aebfce; font-size:12.5px; line-height:1.48; } /* BILOCO-DOC [CSS-BLOCK] 596 GLOBAL / COMPONENTS | Nhóm quy tắc global / components; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .company-info-row{ display:grid!important; grid-template-columns:20px minmax(0,1fr); column-gap:8px; align-items:start!important; width:100%; min-width:0; margin:5px 0!important; padding:0!important; line-height:1.48; } .company-info-row>span:last-child{ display:block; min-width:0; padding:1px 0 0; line-height:inherit; overflow-wrap:anywhere; word-break:normal; } .company-info-row b{ display:inline!important; margin:0!important; padding:0!important; color:inherit!important; font:inherit; font-weight:800!important; line-height:inherit!important; } .footer-company-copy .company-info-row a{ display:inline!important; margin:0!important; padding:0!important; color:#e7f2fb; font-weight:750; line-height:inherit!important; overflow-wrap:anywhere; } .company-info-icon{ display:grid!important; place-items:center; width:20px!important; height:20px!important; min-width:20px!important; min-height:20px!important; margin:1px 0 0!important; padding:0!important; box-sizing:border-box; border-radius:50%; background:#0a7c50; color:#fff!important; line-height:1!important; font-size:0!important; box-shadow:none!important; overflow:hidden; } .company-info-icon svg{ display:block; width:11px; height:11px; margin:0; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .footer-hotline{color:#dce9f4} /* BILOCO-DOC [CSS-BLOCK] 603 FOOTER / CONTACT | Nhóm quy tắc footer / contact; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .footer-hotline a{color:#fff!important;font-weight:800!important} .footer-support-title{ margin:8px 0 0!important; color:#fff; font-size:13px; line-height:1.4; font-weight:800; } .footer-support-text{ margin:2px 0 0!important; color:#7fc8f5; font-size:12px; line-height:1.4; font-weight:650; } .footer-grid>div:not(.footer-company-card)>b{ display:block; margin:0 0 9px; line-height:1.35; } .footer-grid>div:not(.footer-company-card)>a{ display:block; margin:6px 0; line-height:1.42; overflow-wrap:anywhere; } .footer-bottom{padding-top:14px;padding-bottom:14px} /* Reusable contact rows outside the footer keep the same stable SVG alignment. */ .contact-company-mini .company-info-row{margin:5px 0!important} .profile-contact-card .company-info-row{ grid-template-columns:24px minmax(0,1fr); column-gap:10px; margin:9px 0!important; } .profile-contact-card .company-info-icon{ width:24px!important; height:24px!important; min-width:24px!important; min-height:24px!important; margin-top:1px!important; background:#11955f; } .profile-contact-card .company-info-icon svg{width:13px;height:13px} /* BILOCO-DOC [CSS-BLOCK] 613 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:980px){ .footer-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:30px; row-gap:24px; } .footer-company-card{grid-column:1/-1;grid-template-columns:82px minmax(0,1fr);gap:14px} .footer-brand-logo{width:82px;height:82px;max-width:82px;max-height:82px} } /* BILOCO-DOC [CSS-BLOCK] 614 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:700px){ .footer-grid{ padding:28px 18px 26px; grid-template-columns:1fr; gap:22px; } .footer-company-card{grid-column:auto;grid-template-columns:72px minmax(0,1fr);gap:13px} .footer-brand-logo{width:72px;height:72px;max-width:72px;max-height:72px;padding:2px} .footer-company-copy>strong{font-size:14px;line-height:1.4;margin-bottom:7px} .footer-company-copy .footer-muted,.footer-hotline{font-size:12px;line-height:1.5} .company-info-row{grid-template-columns:20px minmax(0,1fr);column-gap:8px;margin:5px 0!important} .footer-grid>div:not(.footer-company-card)>a{margin:5px 0} .footer-bottom{padding:13px 18px} .profile-contact-card .company-info-row{grid-template-columns:22px minmax(0,1fr)} .profile-contact-card .company-info-icon{width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important} } /* BILOCO-DOC [CSS-BLOCK] 615 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:430px){ .footer-company-card{grid-template-columns:64px minmax(0,1fr);gap:12px} .footer-brand-logo{width:64px;height:64px;max-width:64px;max-height:64px} .footer-company-copy>strong{font-size:13.5px} } /* ====================================================================== * BILOCO v1.3.5.8 - mobile footer bottom sheet v1358f3 * Mobile: keep the page footer compact and expose company details from * the fixed bottom action bar instead of squeezing a multi-column footer. * ====================================================================== */ .mobile-footer-sheet{display:none} .mobile-actions button{font:inherit} /* BILOCO-DOC [CSS-BLOCK] 618 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:700px){ body{padding-bottom:56px} body.footer-info-open{overflow:hidden} /* F27: Footer information remains visible in the document on mobile. */ .site-footer .footer-grid{display:grid!important} .site-footer .footer-bottom{ min-height:42px; padding:11px 16px 12px; align-items:center; flex-wrap:wrap; line-height:1.35; gap:6px 14px; } /* Compact fixed action strip. */ .mobile-actions{ height:56px; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); padding:0; background:#fff; box-shadow:0 -6px 20px rgba(6,23,40,.09); } .mobile-actions .mobile-action-link{ appearance:none; min-width:0; height:56px; margin:0; padding:5px 3px 4px; border:0; border-right:1px solid #e8eef3; border-radius:0; background:#fff; color:#17364f; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-align:center; text-decoration:none; font-size:10.5px; line-height:1.05; font-weight:750; cursor:pointer; white-space:nowrap; overflow:hidden; } .mobile-actions .mobile-action-link:last-child{border-right:0} .mobile-actions .mobile-action-link.primary{background:#075f9f;color:#fff} .mobile-action-symbol{ width:20px; height:20px; display:grid; place-items:center; border-radius:50%; font-size:15px; line-height:1; font-weight:800; } .mobile-action-zalo{background:#0a78d1;color:#fff;font-size:11px} /* Bottom-sheet container. */ .mobile-footer-sheet{ display:block; position:fixed; inset:0; z-index:140; pointer-events:none; visibility:hidden; } .mobile-footer-sheet.is-open{pointer-events:auto;visibility:visible} .mobile-footer-backdrop{ position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; background:rgba(4,17,31,.58); opacity:0; transition:opacity .2s ease; } .mobile-footer-sheet.is-open .mobile-footer-backdrop{opacity:1} .mobile-footer-panel{ position:absolute; left:0; right:0; bottom:56px; max-height:min(72vh,560px); overflow:auto; overscroll-behavior:contain; background:#061728; color:#dce9f4; border-radius:18px 18px 0 0; box-shadow:0 -18px 44px rgba(0,0,0,.26); padding:15px 16px 18px; transform:translateY(105%); transition:transform .22s ease; } .mobile-footer-sheet.is-open .mobile-footer-panel{transform:translateY(0)} .mobile-footer-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:12px; margin-bottom:8px; border-bottom:1px solid rgba(255,255,255,.1); } .mobile-footer-brand{ min-width:0; display:grid; grid-template-columns:46px minmax(0,1fr); align-items:center; gap:10px; } .mobile-footer-brand img{ width:46px; height:46px; object-fit:contain; padding:2px; border-radius:8px; background:#fff; } .mobile-footer-brand strong{ min-width:0; color:#fff; font-size:13px; line-height:1.3; font-weight:850; overflow-wrap:normal; word-break:normal; } .mobile-footer-close{ appearance:none; flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; margin:0; padding:0 0 2px; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:rgba(255,255,255,.08); color:#fff; font-size:25px; line-height:1; cursor:pointer; } .mobile-footer-info{display:grid;gap:2px} .mobile-footer-info .company-info-row{ grid-template-columns:22px minmax(0,1fr)!important; column-gap:9px!important; margin:5px 0!important; color:#bdd0df; font-size:12px; line-height:1.45; } .mobile-footer-info .company-info-icon{ width:22px!important; height:22px!important; min-width:22px!important; min-height:22px!important; margin:0!important; align-self:start; } .mobile-footer-info .company-info-icon svg{width:12px;height:12px} .mobile-footer-info .company-info-row>span:last-child{ padding-top:1px; min-width:0; overflow-wrap:anywhere; } .mobile-footer-info .company-info-row b{ display:inline!important; color:#fff!important; margin:0!important; line-height:inherit!important; } .mobile-footer-info .company-info-row a{ display:inline!important; margin:0!important; color:#fff; text-decoration:none; font-weight:750; line-height:inherit!important; } } /* BILOCO-DOC [CSS-BLOCK] 619 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:380px){ .mobile-actions .mobile-action-link{font-size:9.5px} .mobile-action-symbol{width:18px;height:18px;font-size:13px} .mobile-footer-panel{padding-left:13px;padding-right:13px} .mobile-footer-brand{grid-template-columns:42px minmax(0,1fr)} .mobile-footer-brand img{width:42px;height:42px} .mobile-footer-brand strong{font-size:12px} } /* ====================================================================== * BILOCO v1.3.5.8 - profile compact tools + readable contact labels v1358f4 * Desktop: move profile actions beside page navigation and use compact icons. * Mobile: one fixed edge button expands/collapses the profile action panel. * Also keep light contact cards readable instead of inheriting footer label color. * ====================================================================== */ .footer-company-copy .company-info-row b{color:#dce9f4!important} .contact-company-mini .company-info-row>span:last-child{ color:#075f9f!important; font-style:normal!important; font-weight:700; line-height:1.48; } .contact-company-mini .company-info-row b{ color:#60788c!important; font-style:normal!important; font-weight:800!important; } .contact-company-mini .company-info-icon{ background:#0a8f64; color:#fff!important; } .contact-company-mini .company-info-icon svg{ width:13px; height:13px; stroke-width:2.35; } .profile-contact-card .company-info-row b{color:#fff!important} /* BILOCO-DOC [CSS-BLOCK] 626 HERO / SLIDES | Nhóm quy tắc hero / slides; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .profile-public-hero{ padding-bottom:24px; } .profile-reader-controls{ position:sticky; top:86px; z-index:18; width:100%; max-width:1180px; margin:0 auto 14px; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:12px; pointer-events:none; } .profile-reader-controls>*{pointer-events:auto} .profile-reader-controls .profile-reader-toolbar{ grid-column:2; position:static!important; top:auto!important; margin:0; justify-self:center; } .profile-reader-controls .profile-public-actions{ grid-column:3; justify-self:end; display:flex; flex-wrap:nowrap; align-items:center; gap:6px; margin:0; padding:5px; border:1px solid #d6e1e9; border-radius:13px; background:rgba(255,255,255,.96); box-shadow:0 8px 24px rgba(7,29,51,.08); backdrop-filter:blur(10px); } .profile-reader-controls .profile-public-actions .btn.profile-tool-button{ width:36px; min-width:36px; height:36px; min-height:36px; margin:0; padding:0; display:inline-flex; align-items:center; justify-content:center; gap:0; border:1px solid transparent; border-radius:9px; background:transparent; color:#17364f; box-shadow:none; text-decoration:none; cursor:pointer; } .profile-reader-controls .profile-public-actions .btn.profile-tool-button:hover, .profile-reader-controls .profile-public-actions .btn.profile-tool-button:focus-visible{ border-color:#cbdce8; background:#eef6fb; color:#075f9f; outline:none; } /* BILOCO-DOC [CSS-BLOCK] 633 FORMS / BUTTONS | Nhóm quy tắc forms / buttons; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .profile-reader-controls .profile-public-actions .btn.profile-tool-button.primary{ background:#075f9f; color:#fff; } .profile-tool-icon, .profile-tools-toggle-icon{ display:grid; place-items:center; width:20px; height:20px; flex:0 0 20px; } .profile-tool-icon svg, .profile-tools-toggle-icon svg{ display:block; width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .profile-tool-label{display:none} .profile-tools-toggle{display:none} .profile-tools-toggle-close{display:none} .profile-reader-shell:fullscreen .profile-reader-controls, .profile-reader-shell.profile-pseudo-fullscreen .profile-reader-controls{ top:10px; } /* BILOCO-DOC [CSS-BLOCK] 640 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:980px) and (min-width:701px){ .profile-reader-controls{top:80px;gap:8px} .profile-reader-controls .profile-public-actions{gap:4px;padding:4px} .profile-reader-controls .profile-public-actions .btn.profile-tool-button{ width:34px; min-width:34px; height:34px; min-height:34px; } } /* BILOCO-DOC [CSS-BLOCK] 641 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:700px){ .profile-public-hero{ padding-bottom:12px; } .profile-public-hero-copy>p{ margin-bottom:0; } .profile-reader-shell{ padding-top:0; } .profile-reader-controls{ position:sticky; top:66px; z-index:22; display:flex; justify-content:center; width:100%; max-width:none; margin:0 auto 10px; pointer-events:none; } .profile-reader-controls .profile-reader-toolbar{ pointer-events:auto; max-width:210px; padding:5px 8px; gap:8px; box-shadow:0 6px 18px rgba(7,29,51,.08); } .profile-reader-controls .profile-reader-toolbar button{ width:34px; height:34px; font-size:24px; } .profile-reader-controls .profile-reader-toolbar span{ min-width:62px; font-size:12px; } .profile-tools-toggle{ appearance:none; position:fixed; right:0; bottom:68px; z-index:138; width:44px; height:44px; margin:0; padding:0; display:grid; place-items:center; border:1px solid #cbdce8; border-right:0; border-radius:12px 0 0 12px; background:#fff; color:#075f9f; box-shadow:0 8px 24px rgba(7,29,51,.16); cursor:pointer; pointer-events:auto; } .profile-tools-toggle:focus-visible{ outline:2px solid #075f9f; outline-offset:2px; } .profile-tools-toggle-close{ display:none; font-size:26px; line-height:1; font-weight:500; transform:translateY(-1px); } .profile-tools-open .profile-tools-toggle-icon{display:none} .profile-tools-open .profile-tools-toggle-close{display:block} .profile-reader-controls .profile-public-actions{ position:fixed; right:8px; bottom:118px; z-index:137; width:min(218px,calc(100vw - 22px)); max-height:calc(100dvh - 160px); overflow:auto; display:grid; grid-template-columns:1fr; gap:4px; margin:0; padding:7px; border:1px solid #d4e0e9; border-radius:14px; background:rgba(255,255,255,.985); box-shadow:0 14px 38px rgba(5,28,48,.2); backdrop-filter:blur(12px); opacity:0; visibility:hidden; transform:translateX(12px) scale(.98); transform-origin:right bottom; pointer-events:none; transition:opacity .18s ease,transform .18s ease,visibility .18s ease; } .profile-tools-open .profile-reader-controls .profile-public-actions{ opacity:1; visibility:visible; transform:translateX(0) scale(1); pointer-events:auto; } .profile-reader-controls .profile-public-actions .btn.profile-tool-button{ width:100%; min-width:0; height:40px; min-height:40px; padding:0 10px; justify-content:flex-start; gap:9px; border-radius:9px; color:#17364f; font-size:12px; font-weight:800; text-align:left; white-space:normal; } .profile-reader-controls .profile-public-actions .btn.profile-tool-button.primary{ color:#fff; } .profile-tool-label{ display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; } .profile-tool-icon{ width:19px; height:19px; flex-basis:19px; } .profile-tool-icon svg{ width:18px; height:18px; } .profile-reader-shell:fullscreen .profile-reader-controls, .profile-reader-shell.profile-pseudo-fullscreen .profile-reader-controls{ top:8px; } } /* BILOCO-DOC [CSS-BLOCK] 642 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:380px){ .profile-tools-toggle{ width:42px; height:42px; bottom:66px; } .profile-reader-controls .profile-public-actions{ right:6px; bottom:114px; width:min(208px,calc(100vw - 18px)); } } /* BILOCO-DOC [CSS-BLOCK] 643 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media print{ .profile-reader-controls, .profile-tools-toggle{ display:none!important; } } /* ====================================================================== * BILOCO v1.3.5.8 - profile mobile control refinement + roadmap/Kaizen UI v1358f5 * - Fullscreen exit is icon-only. * - Phone page navigation is compact and circular. * - Phone page-key kicker (NANG-LUC, DICH-VU...) is hidden. * - Phone tools toggle sits on the left; actions open as a 2-column icon grid. * - Contact labels are darker/stronger on light company cards. * ====================================================================== */ .profile-reader-shell:fullscreen .profile-fullscreen-exit, .profile-reader-shell:-webkit-full-screen .profile-fullscreen-exit, .profile-reader-shell.profile-pseudo-fullscreen .profile-fullscreen-exit{ width:36px!important; min-width:36px!important; height:36px!important; min-height:36px!important; padding:0!important; border-radius:50%!important; gap:0!important; display:inline-grid!important; place-items:center; background:#fff!important; color:#102b43!important; border:1px solid #cad8e3!important; box-shadow:0 4px 16px rgba(7,29,51,.12)!important; font-size:0!important; } .profile-fullscreen-exit>span[aria-hidden="true"]{ display:block!important; font-size:25px!important; line-height:1!important; font-weight:500!important; transform:translateY(-1px); } .profile-fullscreen-exit>.sr-only{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; } .contact-company-mini .company-info-row b{ color:#17364f!important; font-weight:900!important; opacity:1!important; } .contact-company-mini .company-info-row>span:last-child{ color:#075f9f!important; font-weight:750!important; opacity:1!important; } /* BILOCO-DOC [CSS-BLOCK] 649 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:700px){ .profile-reader-controls{ top:66px; margin-bottom:8px; } .profile-reader-controls .profile-reader-toolbar{ width:max-content; max-width:calc(100vw - 24px); padding:4px 6px; gap:5px; border-radius:999px; background:rgba(255,255,255,.97); box-shadow:0 5px 16px rgba(7,29,51,.08); } .profile-reader-controls .profile-reader-toolbar button{ width:34px; min-width:34px; height:34px; min-height:34px; padding:0; border-radius:50%; display:grid; place-items:center; font-size:24px; line-height:1; } .profile-reader-controls .profile-reader-toolbar>span[data-profile-counter]{ min-width:48px; width:48px; font-size:12px; line-height:1; } .profile-reader-shell:fullscreen .profile-fullscreen-exit, .profile-reader-shell:-webkit-full-screen .profile-fullscreen-exit, .profile-reader-shell.profile-pseudo-fullscreen .profile-fullscreen-exit{ width:34px!important; min-width:34px!important; height:34px!important; min-height:34px!important; } .profile-fullscreen-exit>span[aria-hidden="true"]{ font-size:24px!important; } .profile-page-head>span{ display:none!important; } .profile-page-head h2{ margin-top:0!important; } .profile-tools-toggle{ left:0!important; right:auto!important; bottom:68px; width:44px; height:44px; border-left:0!important; border-right:1px solid #cbdce8!important; border-radius:0 12px 12px 0!important; transform:none!important; } .profile-reader-controls .profile-public-actions{ left:52px!important; right:auto!important; bottom:68px!important; width:auto!important; max-width:none!important; max-height:none!important; overflow:visible!important; grid-template-columns:repeat(2,44px)!important; grid-auto-rows:44px; gap:6px!important; padding:7px!important; border-radius:14px!important; transform:translateX(-10px) scale(.98)!important; transform-origin:left bottom!important; } .profile-tools-open .profile-reader-controls .profile-public-actions{ transform:translateX(0) scale(1)!important; } .profile-reader-controls .profile-public-actions .btn.profile-tool-button{ width:44px!important; min-width:44px!important; height:44px!important; min-height:44px!important; padding:0!important; justify-content:center!important; gap:0!important; border:1px solid transparent!important; border-radius:10px!important; text-align:center!important; } .profile-reader-controls .profile-public-actions .btn.profile-tool-button:hover, .profile-reader-controls .profile-public-actions .btn.profile-tool-button:focus-visible{ border-color:#cbdce8!important; } .profile-reader-controls .profile-public-actions .profile-tool-label{ display:none!important; } .profile-reader-controls .profile-public-actions .profile-tool-icon{ width:21px!important; height:21px!important; flex:0 0 21px!important; } .profile-reader-controls .profile-public-actions .profile-tool-icon svg{ width:20px!important; height:20px!important; stroke-width:1.9!important; } } /* BILOCO-DOC [CSS-BLOCK] 650 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:380px){ .profile-tools-toggle{ left:0!important; right:auto!important; bottom:66px!important; } .profile-reader-controls .profile-public-actions{ left:50px!important; right:auto!important; bottom:66px!important; } } /* ====================================================================== * BILOCO v1.3.5.8 - mobile profile tools inline beside pager v1358f6 * - The tools trigger is no longer viewport-fixed. * - It sits immediately to the right of the page pager and follows the reader. * - Tap to open the compact 2-column icon palette below the trigger. * ====================================================================== */ .profile-tools-cluster{display:contents} /* BILOCO-DOC [CSS-BLOCK] 652 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:700px){ .profile-reader-controls{ display:grid!important; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important; align-items:center!important; justify-content:initial!important; padding:0 12px!important; } .profile-reader-controls .profile-reader-toolbar{ grid-column:2; justify-self:center; margin:0!important; } .profile-tools-cluster{ display:block; position:relative; grid-column:3; justify-self:start; align-self:center; margin-left:7px; pointer-events:auto; } .profile-tools-toggle{ position:static!important; inset:auto!important; width:36px!important; min-width:36px!important; height:36px!important; min-height:36px!important; margin:0!important; border:1px solid #cbdce8!important; border-radius:10px!important; background:#fff!important; color:#075f9f!important; box-shadow:0 5px 16px rgba(7,29,51,.10)!important; transform:none!important; } .profile-tools-toggle-icon, .profile-tools-toggle-icon svg{ width:18px!important; height:18px!important; } .profile-tools-toggle-close{ font-size:24px!important; line-height:1!important; } .profile-reader-controls .profile-public-actions{ position:absolute!important; top:calc(100% + 7px)!important; right:0!important; bottom:auto!important; left:auto!important; z-index:40!important; width:auto!important; grid-template-columns:repeat(2,42px)!important; grid-auto-rows:42px!important; gap:6px!important; padding:7px!important; transform:translateY(-6px) scale(.98)!important; transform-origin:right top!important; } .profile-tools-open .profile-reader-controls .profile-public-actions{ transform:translateY(0) scale(1)!important; } .profile-reader-controls .profile-public-actions .btn.profile-tool-button{ width:42px!important; min-width:42px!important; height:42px!important; min-height:42px!important; } } /* BILOCO-DOC [CSS-BLOCK] 653 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:380px){ .profile-reader-controls{padding:0 8px!important} .profile-tools-cluster{margin-left:5px} .profile-tools-toggle{ width:34px!important; min-width:34px!important; height:34px!important; min-height:34px!important; } .profile-reader-controls .profile-public-actions{ top:calc(100% + 6px)!important; grid-template-columns:repeat(2,40px)!important; grid-auto-rows:40px!important; } .profile-reader-controls .profile-public-actions .btn.profile-tool-button{ width:40px!important; min-width:40px!important; height:40px!important; min-height:40px!important; } } /* ====================================================================== * BILOCO v1.3.5.8 - definitive consultation contact icon renderer v1358f12 * One visual source for the public company mini-card. The markup now carries * data-company-icon from the same footer helper and this block paints the * exact same SVG paths as a background. This is deliberately independent of * old inline-SVG/pseudo-element rules so legacy CSS cannot turn icons into * empty green discs. * ====================================================================== */ .contact-company-mini .company-info-row{ display:grid!important; grid-template-columns:20px minmax(0,1fr)!important; column-gap:8px!important; align-items:start!important; margin:5px 0!important; } .contact-company-mini .company-info-icon{ display:block!important; position:relative!important; width:20px!important; height:20px!important; min-width:20px!important; min-height:20px!important; margin:1px 0 0!important; padding:0!important; border:0!important; border-radius:50%!important; background-color:#0a7c50!important; background-repeat:no-repeat!important; background-position:center!important; background-size:11px 11px!important; color:#fff!important; box-shadow:none!important; overflow:hidden!important; font-size:0!important; font-style:normal!important; line-height:1!important; } .contact-company-mini .company-info-icon svg, .contact-company-mini .company-info-icon::before{ display:none!important; content:none!important; } .contact-company-mini .company-info-icon--address, .contact-company-mini .company-info-icon[data-company-icon="address"]{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s6-5.1%206-11a6%206%200%201%200-12%200c0%205.9%206%2011%206%2011Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.35%22%2F%3E%3C%2Fsvg%3E")!important} .contact-company-mini .company-info-icon--office, .contact-company-mini .company-info-icon[data-company-icon="office"]{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2021V4.5A1.5%201.5%200%200%201%206.5%203h8A1.5%201.5%200%200%201%2016%204.5V8h2.5A1.5%201.5%200%200%201%2020%209.5V21M3%2021h18M8%207h2M12%207h1M8%2011h2M12%2011h1M8%2015h2M12%2015h1M16%2012h1M16%2016h1%22%2F%3E%3C%2Fsvg%3E")!important} .contact-company-mini .company-info-icon--phone, .contact-company-mini .company-info-icon[data-company-icon="phone"]{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7.1%203.5%204.8%205.8c-.8.8-.9%202-.4%203%202.2%204.7%206%208.5%2010.7%2010.7%201%20.5%202.2.3%203-.4l2.3-2.3-4.1-3.2-2%202c-2.5-1.3-4.5-3.3-5.8-5.8l2-2-3.4-4.3Z%22%2F%3E%3C%2Fsvg%3E")!important} /* BILOCO-DOC [CSS-BLOCK] 660 FOOTER / CONTACT | Nhóm quy tắc footer / contact; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .contact-company-mini .company-info-icon--tax, .contact-company-mini .company-info-icon[data-company-icon="tax"]{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%203h8l4%204v14H7z%22%2F%3E%3Cpath%20d%3D%22M15%203v5h4M10%2012h6M10%2016h6%22%2F%3E%3C%2Fsvg%3E")!important} .contact-company-mini .company-info-icon--email, .contact-company-mini .company-info-icon[data-company-icon="email"]{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m4%207%208%206%208-6%22%2F%3E%3C%2Fsvg%3E")!important} .contact-company-mini .company-info-icon--hotline, .contact-company-mini .company-info-icon[data-company-icon="hotline"]{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.5%2013v-2a7.5%207.5%200%200%201%2015%200v2%22%2F%3E%3Cpath%20d%3D%22M5%2012H3.5A1.5%201.5%200%200%200%202%2013.5v3A1.5%201.5%200%200%200%203.5%2018H6v-6H5Zm14%200h1.5a1.5%201.5%200%200%201%201.5%201.5v3a1.5%201.5%200%200%201-1.5%201.5H18v-6h1ZM18%2018c-.7%201.8-2.2%203-5%203%22%2F%3E%3C%2Fsvg%3E")!important} .contact-company-mini .company-info-row>span:last-child{ padding-top:1px!important; color:#075f9f!important; font-style:normal!important; font-weight:700!important; line-height:1.46!important; } .contact-company-mini .company-info-row b{ color:#17364f!important; font-style:normal!important; font-weight:900!important; opacity:1!important; } /* BILOCO-DOC [CSS-BLOCK] 665 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:700px){ .contact-company-mini .company-info-row{ grid-template-columns:18px minmax(0,1fr)!important; column-gap:7px!important; margin:4px 0!important; } .contact-company-mini .company-info-icon{ width:18px!important; height:18px!important; min-width:18px!important; min-height:18px!important; background-size:10px 10px!important; } } /* BILOCO v1.3.5.8 f14 - mobile paint cost reduction */ /* BILOCO-DOC [CSS-BLOCK] 666 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media (max-width:700px){.site-header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#fff!important}} /* ==================================================================== * BILOCO CONTENT IMAGE 1358F19 - FULL DEFAULT + USER SIZE/TEMPLATES * ==================================================================== */ .article-content img[data-biloco-media="1"], .case-block img[data-biloco-media="1"], .prose img[data-biloco-media="1"]{ display:block; max-width:100%; height:auto; margin:24px auto; } .article-content [data-biloco-gallery="1"] figure img, .case-block [data-biloco-gallery="1"] figure img, .prose [data-biloco-gallery="1"] figure img{ max-width:100%; } .article-content [data-biloco-gallery="1"][data-media-template="natural"] figure img:not([style]), .case-block [data-biloco-gallery="1"][data-media-template="natural"] figure img:not([style]), .prose [data-biloco-gallery="1"][data-media-template="natural"] figure img:not([style]){ width:auto; margin-left:auto; margin-right:auto; } .article-content [data-biloco-gallery="1"]:not([data-media-template]) > figure:only-child img, .case-block [data-biloco-gallery="1"]:not([data-media-template]) > figure:only-child img, .prose [data-biloco-gallery="1"]:not([data-media-template]) > figure:only-child img{ aspect-ratio:auto!important; height:auto!important; object-fit:contain!important; } /* ==================================================================== * BILOCO ARTICLE DETAIL 1358F20 - COMPACT HERO + OPTIONAL SLIDER * ==================================================================== */ .article-hero.article-detail-hero{ min-height:0; padding:48px max(24px,calc((100vw - 1180px)/2)) 44px; background:linear-gradient(135deg,#071d33 0%,#0b456f 100%); } .article-detail-hero .article-hero-shell{ width:100%; max-width:1120px; margin:0 auto; } /* BILOCO-DOC [CSS-BLOCK] 673 HERO / SLIDES | Nhóm quy tắc hero / slides; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .article-detail-hero .article-hero-copy{ max-width:960px; } .article-detail-hero .article-hero-copy h1{ margin:0 0 14px; font-size:clamp(38px,5.2vw,62px); line-height:1.06; text-wrap:balance; } .article-detail-hero .article-hero-copy p{ max-width:850px; margin:0 0 14px; font-size:17px; line-height:1.65; color:#d6e6f2; } .article-detail-hero .article-meta{ margin-top:10px; } .article-detail-hero.normal-layout .article-hero-static{ width:100%; margin-top:26px; padding:12px; border:1px solid rgba(255,255,255,.14); border-radius:16px; background:rgba(255,255,255,.06); display:flex; justify-content:center; align-items:center; overflow:hidden; } .article-detail-hero.normal-layout .article-hero-static img{ display:block; width:auto; max-width:100%; max-height:640px; height:auto; object-fit:contain; object-position:center; border-radius:10px; background:#fff; } .article-detail-hero.has-slide .article-hero-shell{ display:grid; grid-template-columns:minmax(0,.88fr) minmax(420px,1.12fr); gap:38px; align-items:center; } .article-detail-hero.has-slide .article-hero-copy{ max-width:590px; } .article-hero-slider{ position:relative; width:100%; min-height:390px; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.18); background:#fff; box-shadow:0 20px 48px rgba(0,0,0,.18); } .article-hero-slide-track{ position:relative; width:100%; min-height:390px; } .article-hero-slide{ position:absolute; inset:0; margin:0; padding:0; opacity:0; visibility:hidden; transition:opacity .32s ease; display:flex; align-items:center; justify-content:center; background:#fff; } .article-hero-slide.active{ opacity:1; visibility:visible; z-index:1; } .article-hero-slide img{ display:block; width:100%; height:100%; max-height:520px; object-fit:contain; object-position:center; background:#fff; } /* BILOCO-DOC [CSS-BLOCK] 686 HEADER / NAV / LANGUAGE | Nhóm quy tắc header / nav / language; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .article-slide-nav{ position:absolute; z-index:3; top:50%; transform:translateY(-50%); width:40px; height:40px; border:1px solid rgba(255,255,255,.8); border-radius:50%; display:grid; place-items:center; background:rgba(7,29,51,.84); color:#fff; font-size:26px; line-height:1; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.18); } .article-slide-nav.prev{left:12px} .article-slide-nav.next{right:12px} .article-slide-dots{ position:absolute; z-index:3; left:50%; bottom:12px; transform:translateX(-50%); display:flex; gap:7px; padding:7px 9px; border-radius:99px; background:rgba(7,29,51,.64); } .article-slide-dots button{ width:8px; height:8px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; } .article-slide-dots button.active{background:#fff;transform:scale(1.25)} /* BILOCO-DOC [CSS-BLOCK] 692 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:920px){ .article-hero.article-detail-hero{padding:34px 20px 30px} .article-detail-hero.has-slide .article-hero-shell{grid-template-columns:1fr;gap:22px} .article-detail-hero.has-slide .article-hero-copy{max-width:none} .article-hero-slider,.article-hero-slide-track{min-height:300px} .article-detail-hero.normal-layout .article-hero-static{padding:8px;margin-top:20px} } /* BILOCO-DOC [CSS-BLOCK] 693 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:640px){ .article-detail-hero .article-hero-copy h1{font-size:clamp(32px,10vw,44px)} .article-detail-hero .article-hero-copy p{font-size:15px} .article-hero-slider,.article-hero-slide-track{min-height:230px} .article-slide-nav{width:36px;height:36px;font-size:22px} } /* BILOCO TRANSLATE NOTICE 1358F20 - non-blocking retry status */ .biloco-translate-notice{ position:fixed; left:50%; bottom:22px; z-index:300; max-width:min(520px,calc(100vw - 28px)); transform:translate(-50%,18px); opacity:0; pointer-events:none; padding:11px 15px; border-radius:10px; background:#071d33; color:#fff; font-size:13px; font-weight:650; box-shadow:0 12px 34px rgba(0,0,0,.22); transition:.2s ease; } .biloco-translate-notice.show{opacity:1;transform:translate(-50%,0)} /* ===================================================================== BILOCO F25 - MENU FIX / STICKY MOBILE FOOTER / RESPONSIVE SEARCH & MEDIA Both site.css and home-inline site-home.css MUST have these rules. ===================================================================== */ html { min-height: 100%; } body { min-height: 100vh; min-height: 100dvh; display:flex; flex-direction:column; } body > main { display:block; flex: 1 0 auto; min-width:0; width:100%; } body > .site-footer { margin-top:auto; flex: 0 0 auto; } /* BILOCO-DOC [CSS-BLOCK] 700 HERO / SLIDES | Nhóm quy tắc hero / slides; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .article-detail-hero .article-hero-metadata { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:16px; font-weight:650; font-size:clamp(13px,1.3vw,15px); color:#dce9f5; } .article-detail-hero .article-hero-copy h1 { overflow-wrap:anywhere; } .biloco-content-thumbnail { display:block; width:100%; height:100%; min-height:0; object-fit:cover; object-position:center; } .service-card-media { width:100%; aspect-ratio: 16/9; background:#eef5fa; margin-bottom:14px; border-radius:12px; overflow:hidden; } .search-result-image img, .news-list-image img, .news-feature-image img, .news-small-image img, .related-thumb img, .project-visual img { width:100%; height:100%; object-fit:cover; display:block; } .search-result-image, .news-list-image, .news-feature-image, .news-small-image, .related-thumb { overflow:hidden; background:#ecf4fb; } .front-search-form { display:flex; flex-wrap:nowrap; align-items:stretch; gap:10px; width:100%; max-width:740px; } /* BILOCO-DOC [CSS-BLOCK] 707 FORMS / BUTTONS | Nhóm quy tắc forms / buttons; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .front-search-form input { display:block; flex:1 1 auto; width:0; min-width:0; } .front-search-form button { display:flex; flex:0 0 auto; align-items:center; justify-content:center; white-space:nowrap; width:auto; min-width:108px; padding:0 17px; line-height:1.2; } /* BILOCO-DOC [CSS-BLOCK] 709 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media (max-width:1100px) { body { padding-bottom:calc(56px + env(safe-area-inset-bottom)); } .site-header { flex:0 0 auto; } .main-nav { top:var(--mobile-header-height,68px)!important; bottom:auto!important; left:0!important; right:0!important; width:100%!important; max-width:100%!important; height:auto!important; max-height:calc(100dvh - var(--mobile-header-height,68px) - 56px)!important; overflow-y:auto!important; overscroll-behavior:contain; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-10px)!important; transition:opacity .14s ease,transform .14s ease,visibility .14s ease; display:block!important; z-index:91; } .main-nav.open { opacity:1!important; visibility:visible!important; pointer-events:auto!important; transform:translateY(0)!important; } .mobile-nav-list { display:grid!important; width:100%; } .mobile-nav-list .has-dropdown:not(.open) > .dropdown-menu { display:none!important; } .mobile-nav-list .has-dropdown.open > .dropdown-menu { display:block!important; visibility:visible!important; opacity:1!important; pointer-events:auto!important; position:static!important; transform:none!important; } .mobile-nav-list .has-dropdown.is-active:not(.open) > .dropdown-menu { display:none!important; } .mobile-actions { bottom:0; height:56px; padding-bottom:env(safe-area-inset-bottom); z-index:100; } body.nav-open .mobile-actions { visibility:hidden; pointer-events:none; } .site-footer { margin-top:auto!important; } .site-footer .footer-bottom { margin-top:0!important; } .search-hero { padding-top:42px; padding-bottom:42px; } .front-search-form { max-width:none; gap:8px; } .front-search-form button { min-width:98px; padding:0 11px; font-size:14px; } .search-section { padding-bottom:26px; } .service-card-media { aspect-ratio:16/9; } } /* BILOCO-DOC [CSS-BLOCK] 710 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media (max-width:480px) { .front-search-form { gap:7px; } .front-search-form input { height:46px; font-size:14px; padding:0 11px; } .front-search-form button { height:46px; min-width:90px; font-size:13px; padding:0 9px; } .article-detail-hero .article-hero-metadata { font-size:13px; margin-top:12px; gap:6px; } } /* F25: preserve compact title-only article hero + keep natural featured ratio. */ .article-hero.article-detail-hero { min-height:0; padding-top:34px; padding-bottom:34px; } .article-detail-hero .article-hero-shell { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-items:center; } .article-detail-hero .article-hero-copy h1 { font-size:clamp(30px,4vw,51px); line-height:1.17; margin:0; } .article-featured-in-content { margin:0 auto 24px; max-width:980px; text-align:center; } .article-featured-in-content img { display:block; width:auto; max-width:100%; height:auto; max-height:780px; object-fit:contain; margin:0 auto; } .article-detail-hero.has-slide .article-hero-slider { max-width:100%; overflow:hidden; } /* BILOCO-DOC [CSS-BLOCK] 717 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media(max-width:700px) { .article-hero.article-detail-hero { padding:26px 18px; } .article-detail-hero .article-hero-copy h1 { font-size:clamp(27px,7.5vw,38px); } .article-reading-layout { padding-top:28px; } .article-featured-in-content img { max-height:none; } } /* ===================================================================== BILOCO F26 - MOBILE NAVIGATION / HOME & SUBPAGES, SINGLE OWNER Anchor dropdown absolutely to the sticky header, not position:fixed. This avoids fixed-position containing blocks caused by backdrop filters and prevents the content below the header from swallowing click/touch. ===================================================================== */ /* BILOCO-DOC [CSS-BLOCK] 718 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media (max-width:1100px) { .site-header { z-index:300!important; overflow:visible!important; } .header-inner { position:relative; } .menu-toggle { position:relative; z-index:2; cursor:pointer; touch-action:manipulation; min-width:40px; min-height:44px; pointer-events:auto; } #main-nav.main-nav { position:absolute!important; top:100%!important; left:0!important; right:0!important; bottom:auto!important; width:100%!important; max-width:none!important; height:auto!important; max-height:calc(100dvh - var(--mobile-header-height,68px) - env(safe-area-inset-bottom))!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain; padding:10px 14px 20px!important; border:0; border-top:1px solid var(--line); border-radius:0 0 15px 15px; box-shadow:0 20px 34px rgba(8,31,54,.18); background:#fff!important; display:block!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; transform:translateY(-8px)!important; transition:opacity .15s ease, transform .15s ease, visibility .15s ease; z-index:301!important; } #main-nav.main-nav.open { opacity:1!important; visibility:visible!important; pointer-events:auto!important; transform:none!important; } #main-nav .nav-primary, #main-nav .nav-tools { display:none!important; } #main-nav .mobile-nav-list { display:grid!important; gap:4px; } #main-nav .mobile-nav-list > a, #main-nav .mobile-nav-list > .nav-item > button { display:flex; width:100%; min-height:44px; align-items:center; padding:10px 12px; font-size:15px; line-height:1.4; text-align:left; } #main-nav .mobile-nav-list > .has-dropdown:not(.open) > .dropdown-menu { display:none!important; } #main-nav .mobile-nav-list > .has-dropdown.open > .dropdown-menu { display:block!important; position:static!important; width:100%; opacity:1!important; visibility:visible!important; pointer-events:auto!important; transform:none!important; } #main-nav .mobile-nav-list .dropdown-menu a { min-height:42px; padding:10px 13px; } body.nav-open .mobile-actions { pointer-events:none!important; } } /* ===================================================================== * BILOCO F27 - Restore company footer and permanent consultation section * Applies to home (inline CSS) and all subpages (external CSS). * The mobile action bar is supplemental; it must not replace the footer. * ===================================================================== */ html { scroll-padding-top: 78px; } #contact { scroll-margin-top: 82px; } .site-footer { width: 100%; clear: both; } .footer-explore .footer-consultation-link { display: inline-flex !important; width: fit-content; max-width: 100%; align-items: center; justify-content: center; margin-top: 15px !important; padding: 9px 13px; border: 1px solid #52b5e6; border-radius: 9px; background: #0a5f9f; color: #fff !important; font-weight: 800; text-decoration: none; white-space: normal; } .site-footer a:hover, .site-footer a:focus-visible { color: #fff; text-decoration: underline; } .contact-section { min-width: 0; } /* BILOCO-DOC [CSS-BLOCK] 725 FOOTER / CONTACT | Nhóm quy tắc footer / contact; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ .contact-introduction, .contact-section .lead-form { min-width: 0; } .lead-form .lead-submit { min-height: 45px; position: relative; font-weight: 760; margin-top: 8px; } .lead-form .lead-submit:disabled { opacity: .7; cursor: wait; } /* BILOCO-DOC [CSS-BLOCK] 728 RESPONSIVE media | Nhóm quy tắc responsive @media; giữ nguyên selector, thuộc tính, breakpoint và độ ưu tiên CSS. */ @media (max-width: 700px) { html { scroll-padding-top: 72px; } #contact { scroll-margin-top: 74px; } .site-footer .footer-grid { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 25px; padding: 26px 18px 24px; } .site-footer .footer-company-card { grid-column: auto; grid-template-columns: 64px minmax(0, 1fr); gap: 13px; } .site-footer .footer-brand-logo { width: 64px; height: 64px; max-width: 64px; max-height: 64px; } .site-footer .footer-bottom { min-height: 52px; padding: 12px 18px; gap: 9px; } .contact-section { padding-top: 42px; padding-bottom: 40px; gap: 25px; } .contact-section .lead-form { width: 100%; padding: 18px; } .contact-section .lead-submit { width: 100%; } } /* ================================================================ * BILOCO F30 - CURRENT MACHINE TRANSLATION LANGUAGE * Only marks the stored language in the existing globe menu. * ================================================================ */ .mobile-translate-menu a.active, .translate-menu a.active { background: #e8f4fb; color: #075f9f; font-weight: 800; } /* ===================================================================== * BILOCO-POLICY [PUBLIC-CSS] Cam kết công khai, giữ nguyên layout site. * ===================================================================== */ .blc-culture-page .blc-culture-section{background:#f5f8fc} .blc-culture-page .blc-culture-wrap{max-width:1160px;margin:0 auto} .blc-culture-eyebrow{font-size:12px;letter-spacing:.16em;color:#0871bd;font-weight:850;margin:0 0 24px} .blc-culture-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px} .blc-culture-item{min-width:0;background:#fff;border:1px solid #dae4ef;border-radius:15px;padding:27px;box-shadow:0 10px 30px rgba(7,29,51,.035)} .blc-culture-number{font-size:24px;line-height:1;font-weight:800;letter-spacing:.04em;color:#278bcc} .blc-culture-item p{color:#29435b;font-size:16px;line-height:1.75;margin:17px 0 0} .blc-culture-message{background:#092844;border-radius:16px;padding:30px;margin-top:24px;color:#fff;text-align:center} .blc-culture-message span{display:block;font-size:12px;letter-spacing:.16em;color:#78c6f4;font-weight:850} .blc-culture-message blockquote{font-size:clamp(20px,2.5vw,30px);line-height:1.5;font-weight:800;margin:16px auto 0;max-width:900px} .blc-culture-bottom{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px} .blc-culture-bottom p{flex:1 1 100%;margin:0;color:#64778b;line-height:1.6} .blc-culture-pdf,.blc-culture-contact{display:inline-flex;align-items:center;justify-content:center;border-radius:9px;padding:12px 17px;text-decoration:none;font-weight:750;min-height:46px} .blc-culture-pdf{border:1px solid #bbcddd;color:#123f64;background:#fff} .blc-culture-contact{background:#0a78c2;border:1px solid #0a78c2;color:#fff} @media(max-width:700px){.blc-culture-grid{grid-template-columns:1fr}.blc-culture-item{padding:21px}.blc-culture-item p{font-size:15px}.blc-culture-message{padding:24px 18px}.blc-culture-pdf,.blc-culture-contact{width:100%}} /* ================================================================ * BILOCO F41 - HOMEPAGE PROCESS NUMBER CIRCLES * Scope: homepage "Quy trình" steps only (VI/EN). * Existing process ordering, labels, columns, breakpoints and data * remain unchanged. This block only aligns the number beside its label. * ================================================================ */ .process .process-grid > div { box-sizing: border-box; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; column-gap: 16px; row-gap: 0; min-width: 0; min-height: 110px; padding: 20px 18px; } .process .process-grid > div > b { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; box-sizing: border-box; border: 1px solid #63bfff; border-radius: 50%; background: #0a76b6; color: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); font-size: 19px; font-weight: 800; line-height: 1; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; flex-shrink: 0; } .process .process-grid > div > span { display: block; min-width: 0; overflow-wrap: break-word; font-weight: 700; line-height: 1.45; } @media (max-width: 980px) { .process .process-grid > div { min-height: 100px; padding: 18px 16px; column-gap: 14px; } } @media (max-width: 430px) { .process .process-grid > div { grid-template-columns: 48px minmax(0, 1fr); min-height: 96px; padding: 17px 16px; column-gap: 14px; } .process .process-grid > div > b { width: 48px; height: 48px; font-size: 18px; } } /* BILOCO-DOC [CSS-BLOCK] F42 SERVICE ICON CIRCLE | Đồng bộ icon dịch vụ dạng vòng tròn; không đổi HTML/PHP. */ @media(max-width:700px){.service-card{grid-template-columns:52px minmax(0,1fr);padding:20px;column-gap:14px}.service-icon{width:48px;height:48px;font-size:24px}.service-card h3{font-size:18px}.service-card p{min-height:0}} /* BILOCO-DOC [CSS-BLOCK] F43 SERVICE DETAIL ICON CIRCLE | Đồng bộ icon trang chi tiết dịch vụ; không đổi logic/PHP/HTML. */ @media(max-width:700px){.page-hero .service-icon.large,.article-hero .service-icon.large{width:56px;height:56px;font-size:28px;margin-bottom:10px}} /* === BILOCO F44: SERVICE DETAIL HERO ICON + TITLE ALIGNMENT (VI/EN) === * Only .service-hero-heading within .page-hero, preserve existing service card, * category, featured image, SEO, content and other page layout behavior. */ .page-hero .service-hero-heading { display: flex; align-items: center; gap: 18px; margin: 10px 0 18px; max-width: 100%; } .page-hero .service-hero-heading .service-icon.large { display: flex; align-items: center; justify-content: center; flex: 0 0 64px; width: 64px; height: 64px; margin: 0; border-radius: 50%; } .page-hero .service-hero-heading h1 { flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: break-word; } .page-hero .service-hero-heading + p { margin-top: 0; } @media (max-width: 700px) { .page-hero .service-hero-heading { gap: 12px; margin: 9px 0 14px; } .page-hero .service-hero-heading .service-icon.large { flex-basis: 54px; width: 54px; height: 54px; font-size: 28px; } } @media (max-width: 360px) { .page-hero .service-hero-heading { gap: 10px; } .page-hero .service-hero-heading .service-icon.large { flex-basis: 48px; width: 48px; height: 48px; font-size: 25px; } } /* BILOCO F45 [IOS/SAFARI/CROSS-BROWSER COMPATIBILITY] * Keep older iOS Safari viewport height fallback and modern dynamic viewport, * preserve existing layout, account for iPhone safe area, avoid form focus zoom. */ @media (max-width:1100px) { .main-nav { max-height:calc(100vh - var(--mobile-header-height,68px))!important; } @supports (height:100dvh) { .main-nav { max-height:calc(100dvh - var(--mobile-header-height,68px))!important; } } .mobile-translate-menu { max-height: min(430px,58vh); -webkit-overflow-scrolling: touch; } .translate-menu { max-height: min(420px,48vh); -webkit-overflow-scrolling: touch; } @supports (height:100dvh) { .mobile-translate-menu {max-height:min(430px,58dvh)} .translate-menu {max-height:min(420px,48dvh)} } } @media (max-width:700px) { .lead-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .lead-form select, .lead-form textarea, .search-form input, .search-form select { font-size:16px; } .mobile-actions { padding-bottom:env(safe-area-inset-bottom,0px); height:calc(58px + env(safe-area-inset-bottom,0px)); } body:not(.nav-open) { padding-bottom:calc(58px + env(safe-area-inset-bottom,0px)); } } /* F45: pseudo fullscreen profile remains usable on Safari <15.4. */ .profile-reader-shell.profile-pseudo-fullscreen{height:100vh!important} @supports (height:100dvh) { .profile-reader-shell.profile-pseudo-fullscreen{height:100dvh!important} } /* BILOCO F55 [FAQ] - semantic lists are readable on iOS Safari and other browsers. */ .faq-answer .faq-answer-list{margin:4px 0 0;padding-left:23px;list-style-position:outside} .faq-answer ul.faq-answer-list{list-style-type:disc} .faq-answer ol.faq-answer-list{list-style-type:decimal} .faq-answer .faq-answer-list li{margin:0 0 7px;line-height:1.65;color:#465d70;overflow-wrap:anywhere} .faq-answer .faq-answer-list li:last-child{margin-bottom:0} .faq-answer p{margin:5px 0 10px;line-height:1.7;overflow-wrap:anywhere} .faq-answer p:last-child{margin-bottom:0} /* ==================================================================== * BILOCO F56 – MEDIA IN DETAIL CONTENT (PROJECT / SERVICE / ARTICLE) * The page Hero contains only the title and intro; featured media is the * first item in the content column. No global header, footer, or cards. * ==================================================================== */ .blc-detail-featured { display:block; width:100%; max-width:980px; margin:0 auto 24px; text-align:center; overflow:hidden; border-radius:14px; background:#f2f7fb; border:1px solid #e5ecf2; } .prose .blc-detail-featured, .article-content > .article-featured-in-content { margin:0 auto 24px; } .blc-detail-featured img, .prose .blc-detail-featured img { display:block; width:100%; max-width:100%; height:auto; max-height:720px; margin:0 auto; border-radius:12px; object-fit:contain; object-position:center; } .article-content > .article-hero-slider { width:100%; max-width:100%; margin:0 0 26px; min-width:0; min-height:390px; border:1px solid #e1eaf2; box-shadow:0 10px 26px rgba(6,34,60,.08); } .article-content > .article-hero-slider .article-hero-slide-track { min-height:390px; } .article-content > .article-hero-slider .article-hero-slide { position:absolute; inset:0; width:100%; max-width:100%; margin:0; } .article-content > .article-hero-slider .article-hero-slide img { display:block; width:100%; height:100%; max-width:100%; max-height:100%; margin:0 auto; object-fit:contain; border-radius:0; } @media (max-width:920px) { .article-content > .article-hero-slider, .article-content > .article-hero-slider .article-hero-slide-track { min-height:300px; } } @media (max-width:640px) { .blc-detail-featured { margin-bottom:18px; border-radius:12px; } .blc-detail-featured img, .prose .blc-detail-featured img { max-height:none; border-radius:10px; } .article-content > .article-hero-slider, .article-content > .article-hero-slider .article-hero-slide-track { min-height:230px; } } /* ===================================================================== * BILOCO F58 - PUBLIC PAGE VERTICAL SPACING * Fix inherited 50px/70px grid row gaps when headings stack. * Preserve HTML, icons, cards, column widths, editor and business logic. * Use existing main/section markup; does not depend on biloco-home class. * ===================================================================== */ body > main > .section { padding-top: 44px; padding-bottom: 44px; } body > main > .hero { padding-top: 56px; padding-bottom: 44px; min-height: 520px; } body > main > .page-hero, body > main > .listing-hero, body > main > .search-hero { padding-top: 44px; padding-bottom: 40px; } body > main > .article-hero.article-detail-hero { padding-top: 32px; padding-bottom: 32px; } body > main .section-title { margin-bottom: 22px; } body > main .section-title.split { row-gap: 12px; } body > main .section-title h2, body > main > .intro-grid h2 { margin-top: 6px; margin-bottom: 8px; } body > main .section-title p, body > main > .intro-grid p { margin-top: 0; margin-bottom: 0; } body > main > .hero h1 { margin-bottom: 12px; } body > main > .hero p { margin-top: 0; margin-bottom: 16px; } body > main > .hero .hero-actions { margin-top: 20px; } body > main > .page-hero > div > h1, body > main > .listing-hero > h1, body > main > .search-hero > h1 { margin-bottom: 10px; } body > main > .page-hero > div > p, body > main > .listing-hero > p, body > main > .search-hero > p { margin-top: 0; margin-bottom: 0; } @media (max-width: 1100px) { body > main > .section { padding-top: 34px; padding-bottom: 34px; } body > main > .hero { min-height: 440px; padding-top: 40px; padding-bottom: 34px; } body > main > .page-hero, body > main > .listing-hero, body > main > .search-hero { padding-top: 34px; padding-bottom: 32px; } } /* The original layout becomes one column at 980px, not 700px. */ @media (max-width: 980px) { body > main > .intro-grid { row-gap: 12px; } body > main .section-title.split { row-gap: 10px; } body > main > .hero { min-height: 0; } } @media (max-width: 700px) { body > main > .section { padding-top: 26px; padding-bottom: 26px; } body > main > .hero { padding-top: 30px; padding-bottom: 28px; } body > main > .page-hero, body > main > .listing-hero, body > main > .search-hero { padding-top: 28px; padding-bottom: 26px; } body > main > .article-hero.article-detail-hero { padding-top: 24px; padding-bottom: 24px; } body > main .section-title { margin-bottom: 18px; } body > main > .intro-grid, body > main .section-title.split { row-gap: 10px; } body > main > .intro-grid h2, body > main .section-title h2 { margin-bottom: 4px; } body > main > .hero .hero-actions { margin-top: 16px; } } /* ==================================================================== * BILOCO F72 [LANGUAGE FLAGS] "Ngôn ngữ khác": flag + language name, two columns (desktop dropdown and mobile panel). * Flags are local SVG files (lazy ), so they look the same on Windows, macOS, Android and iOS. * ==================================================================== */ .translate-menu a, .mobile-translate-menu a { display: flex; align-items: center; gap: 9px; min-width: 0; } .translate-menu a .lang-name, .mobile-translate-menu a .lang-name { min-width: 0; line-height: 1.25; overflow-wrap: anywhere; } .translate-menu .lang-flag, .mobile-translate-menu .lang-flag { width: 24px; height: 18px; flex: 0 0 auto; display: block; object-fit: cover; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 38, 61, .16); } .translate-menu { width: 360px; } .translate-menu a { font-size: 13px; font-weight: 650; } .mobile-translate-menu .translate-menu-title { grid-column: 1 / -1; margin: 0 2px 6px; padding: 2px 4px 10px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 850; color: var(--ink); } @media (max-width: 1100px) { .mobile-translate-menu { width: min(330px, calc(100vw - 20px)); gap: 3px 6px; padding: 12px; } .mobile-translate-menu a { padding: 10px 8px; font-size: 13px; font-weight: 750; } } /* ================================================================ * BILOCO F88 [FOOTER SOCIAL PROOF] * Editor-verified Facebook followers/likes and Google Maps reviews. * Shared by both themes, including mobile footer and information sheet. * ================================================================ */ .site-footer .footer-social-proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 16px 0 5px; min-width: 0; } .site-footer .footer-social-card, .mobile-footer-panel .footer-social-card { display: grid; grid-template-columns: 32px minmax(0, 1fr) 16px; align-items: start; gap: 10px; width: 100%; min-width: 0; margin: 0; padding: 13px 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; color: #e8f2f9; background: rgba(255, 255, 255, .055); text-decoration: none; line-height: 1.4; box-sizing: border-box; transition: background .15s ease, border-color .15s ease; } .site-footer .footer-social-card:hover, .mobile-footer-panel .footer-social-card:hover { border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .095); text-decoration: none; } .footer-social-card .footer-social-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #1877f2; color: #fff; font-size: 22px; font-weight: 850; line-height: 1; } .footer-social-card.footer-social-google .footer-social-icon { background: #fff; color: #4285f4; font-size: 19px; } .footer-social-card .footer-social-content { display: grid; gap: 5px; min-width: 0; overflow-wrap: anywhere; } .footer-social-card .footer-social-name { color: #fff; font-weight: 780; font-size: 13px; line-height: 1.4; } .footer-social-card .footer-social-metrics { display: flex; flex-wrap: wrap; gap: 5px 11px; font-size: 12px; color: #e5edf4; } .footer-social-card .footer-social-metrics strong { display: inline; color: #fff; font-size: inherit; font-weight: 820; } .footer-social-card .footer-social-stars { color: #ffc16d; } .footer-social-card .footer-social-date { font-size: 10px; color: #b4c9d6; } .footer-social-card .footer-social-arrow { color: #b6d8eb; font-size: 16px; } .mobile-footer-panel .footer-social-proof { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .14); display: grid; gap: 8px; } @media (max-width: 700px) { .site-footer .footer-direct-contact .footer-social-proof { margin-top: 16px; gap: 9px; } .site-footer .footer-social-card, .mobile-footer-panel .footer-social-card { padding: 12px; } } /* BILOCO F91 [FACEBOOK PUBLIC]: Native Meta iframe stays inside the footer grid. */ .site-footer .footer-social-plugin-wrap, .mobile-footer-panel .footer-social-plugin-wrap { width: 100%; min-width: 0; max-width: 340px; overflow: hidden; border-radius: 9px; } .site-footer .footer-social-plugin, .mobile-footer-panel .footer-social-plugin { display: block; width: 100%; max-width: 340px; overflow: hidden; } .site-footer .footer-social-plugin iframe, .mobile-footer-panel .footer-social-plugin iframe { display: block; width: 100%; max-width: 340px; background: #fff; border: none; } /* =================================================================== * BILOCO F98 - COMPANY PROFILE VIEWER: IMAGE/TEXT OVERLAP FIX * Grid auto tracks were shrinking beneath the intrinsic image height * inside the fixed-size book page. In narrow viewports this could make * text paint over the image even though media and text are siblings. * Keep the page-sized reader and its own scroll, but never shrink rows. * This is screen-only: PDF/print A4 layout is unchanged. * =================================================================== */ @media screen { .profile-public .profile-book-page:not(.profile-cover-page) .profile-page-inner { grid-auto-rows: max-content; align-content: start; } .profile-public .profile-book-page:not(.profile-cover-page) .profile-page-media { min-width: 0; min-height: 0; align-self: start; } } @media screen and (max-width: 1024px) { .profile-public .profile-book-page:not(.profile-cover-page) .profile-page-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; grid-auto-rows: max-content; gap: 18px; padding: 40px 28px 28px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-gutter: auto; } .profile-public .profile-book-page:not(.profile-cover-page) .profile-page-head, .profile-public .profile-book-page:not(.profile-cover-page) .profile-page-media, .profile-public .profile-book-page:not(.profile-cover-page) .profile-page-content { grid-area: auto; grid-column: 1 / -1; min-width: 0; width: 100%; float: none; } .profile-public .profile-book-page:not(.profile-cover-page) .profile-page-media { display: block; height: auto; margin: 0; overflow: hidden; border-radius: 12px; } .profile-public .profile-book-page:not(.profile-cover-page) .profile-page-media img { display: block; width: 100%; height: auto; max-height: min(56vh, 540px); object-fit: contain; object-position: center; margin: 0 auto; } .profile-public .profile-book-page:not(.profile-cover-page) .profile-page-content { columns: 1; position: static; transform: none; margin: 0; min-height: 0; overflow-wrap: anywhere; } .profile-public .profile-book-page .profile-page-content.prose img, .profile-public .profile-book-page .profile-page-content.prose figure { display: block; clear: both; float: none; max-width: 100%; height: auto; position: static; transform: none; } .profile-public .profile-book-page .profile-page-content.prose img { max-height: min(56vh, 540px); object-fit: contain; } .profile-public .profile-book-page .profile-page-content.prose p { margin-top: 0; line-height: 1.7; } .profile-public .profile-book-page .profile-page-content.prose p + p { margin-top: 14px; } } @media screen and (max-width: 640px) { .profile-public .profile-book-page:not(.profile-cover-page) .profile-page-inner { padding: 42px 18px 24px; gap: 16px; } .profile-public .profile-book-page:not(.profile-cover-page) .profile-page-head h2 { font-size: clamp(25px, 6.5vw, 32px); line-height: 1.2; } } /* BILOCO F101 — Compact trust snippets in footer (mobile, tablet and PC). */ .site-footer .footer-social-proof, .mobile-footer-panel .footer-social-proof{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;width:100%;max-width:320px;margin-top:12px} .site-footer .footer-social-proof .footer-social-card, .mobile-footer-panel .footer-social-proof .footer-social-card{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:8px;min-height:56px;max-width:320px;line-height:1.35;text-decoration:none;box-sizing:border-box} .site-footer .footer-social-proof .footer-social-avatar, .mobile-footer-panel .footer-social-proof .footer-social-avatar{flex:0 0 42px;width:42px;height:42px;object-fit:contain;background:white;border-radius:6px} .site-footer .footer-social-proof .footer-social-icon, .mobile-footer-panel .footer-social-proof .footer-social-icon{flex:0 0 38px;width:38px;height:38px;font-size:21px} .site-footer .footer-social-proof .footer-social-content, .mobile-footer-panel .footer-social-proof .footer-social-content{display:grid;gap:1px;min-width:0;flex:1} .site-footer .footer-social-proof .footer-social-name, .mobile-footer-panel .footer-social-proof .footer-social-name{font-size:13px;line-height:1.25} .site-footer .footer-social-proof .footer-social-metrics, .mobile-footer-panel .footer-social-proof .footer-social-metrics{display:flex;align-items:center;gap:8px;font-size:11px;line-height:1.3} .site-footer .footer-social-proof .footer-social-date, .mobile-footer-panel .footer-social-proof .footer-social-date{font-size:10px;line-height:1.2} .site-footer .footer-social-proof .footer-social-arrow, .mobile-footer-panel .footer-social-proof .footer-social-arrow{font-size:13px;flex:0 0 auto} .site-footer .footer-social-proof .footer-social-compact-embed, .mobile-footer-panel .footer-social-proof .footer-social-compact-embed{width:min(100%,320px);max-width:320px;overflow:hidden;border-radius:8px} .site-footer .footer-social-proof .footer-social-plugin-wrap, .mobile-footer-panel .footer-social-proof .footer-social-plugin-wrap{max-width:100%;width:100%} .site-footer .footer-social-proof .footer-social-plugin, .mobile-footer-panel .footer-social-proof .footer-social-plugin{display:block;width:100%;max-width:260px;min-height:100px;overflow:hidden} .footer-social-proof .footer-social-fallback-link{display:block;color:#d4e5ee;font-size:11px;padding:3px 0 5px;text-decoration:underline} @media(max-width:430px){.site-footer .footer-social-proof,.mobile-footer-panel .footer-social-proof{max-width:100%}} /* BILOCO F106 - Facebook Page Plugin opt-in placeholder and iframe sizing. */ .site-footer .footer-social-plugin-wrap, .mobile-footer-panel .footer-social-plugin-wrap { width: min(100%, 320px); max-width: 320px; min-width: 0; overflow: hidden; border-radius: 10px; } .site-footer .footer-social-plugin, .mobile-footer-panel .footer-social-plugin { display: block; width: 100%; max-width: 320px; min-height: 0; overflow: hidden; } .site-footer .footer-social-plugin iframe, .mobile-footer-panel .footer-social-plugin iframe { display: block; width: 100%; max-width: 320px; height: 140px; background: #fff; border: 0; } .site-footer .footer-social-plugin iframe[hidden], .mobile-footer-panel .footer-social-plugin iframe[hidden] { display: none !important; } .footer-social-embed-consent { display: grid; gap: 9px; padding: 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; background: rgba(255,255,255,.07); color: #e8f2f9; font-size: 12px; line-height: 1.5; } .footer-social-embed-consent p { margin: 0; } .footer-social-load-button { display: inline-flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; min-height: 38px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; background: #1877f2; color: #fff; font: inherit; font-weight: 700; cursor: pointer; } .footer-social-load-button:hover, .footer-social-load-button:focus-visible { background: #0f65d8; } .footer-social-embed-consent[hidden] { display: none !important; } /* BILOCO F104 — service detail hero only (VI/EN), no changes to other heroes. */ .page-hero.service-detail-hero > div { width: 100%; max-width: min(100%, 1180px); min-width: 0; } .page-hero.service-detail-hero .service-hero-heading { width: 100%; max-width: none; min-width: 0; } .page-hero.service-detail-hero .service-hero-heading h1 { min-width: 0; max-width: none; font-size: clamp(34px, 4.5vw, 60px); line-height: 1.11; overflow-wrap: break-word; } @media (max-width: 700px) { .page-hero.service-detail-hero .service-hero-heading h1 { font-size: clamp(27px, 7.5vw, 42px); line-height: 1.13; } } /* BILOCO F105 — Wider, balanced hero titles across public detail/listing pages. * Scope: hero title areas only. Keep content dividers, cards and footer unchanged. */ body > main > .page-hero > div { width: 100%; min-width: 0; max-width: min(100%, 1240px); } body > main > .page-hero > div > h1, body > main > .page-hero .service-hero-heading h1, body > main > .listing-hero > h1, body > main > .search-hero > h1, body > main > .article-hero.article-detail-hero .article-hero-copy h1 { width: 100%; min-width: 0; max-width: 1240px; overflow-wrap: break-word; word-break: normal; text-wrap: pretty; line-height: 1.12; } body > main > .listing-hero > h1, body > main > .search-hero > h1 { font-size: clamp(34px, 4.5vw, 61px); } body > main > .page-hero:not(.service-detail-hero) > div > h1 { font-size: clamp(35px, 4.5vw, 62px); } body > main > .article-hero.article-detail-hero .article-hero-shell { width: 100%; min-width: 0; max-width: min(100%, 1240px); } body > main > .article-hero.article-detail-hero .article-hero-copy, body > main > .article-hero.article-detail-hero.has-slide .article-hero-copy { width: 100%; min-width: 0; max-width: none; } /* Slides are in the article body, not beside the heading. Do not keep an empty hero column. */ body > main > .article-hero.article-detail-hero.has-slide .article-hero-shell { grid-template-columns: minmax(0, 1fr); } body > main > .article-hero.article-detail-hero .article-hero-copy h1 { font-size: clamp(32px, 4vw, 56px); } /* Remove only the decorative horizontal rule under listing hero. */ body > main > .listing-hero { border-bottom: 0; } /* News cards: allow one more line of title, without changing card structure. */ body > main .news-list-copy h2 { -webkit-line-clamp: 3; } @media (max-width: 700px) { body > main > .page-hero:not(.service-detail-hero) > div > h1, body > main > .listing-hero > h1, body > main > .search-hero > h1, body > main > .article-hero.article-detail-hero .article-hero-copy h1 { font-size: clamp(27px, 7.5vw, 42px); line-height: 1.14; } body > main > .page-hero.service-detail-hero .service-hero-heading h1 { font-size: clamp(27px, 7.5vw, 42px); line-height: 1.14; } }