/* ========================================================= GreenSun JP — CSS gốc Màu, chữ, khoảng cách lấy từ theme.json (biến --wp--preset--*). ========================================================= */ :root { --c-brand: var(--wp--preset--color--brand, #79a52a); --c-brand-strong: var(--wp--preset--color--brand-strong, #567a1a); --c-deep: var(--wp--preset--color--deep, #4f7317); --c-pale: var(--wp--preset--color--brand-pale, #f4f9ec); --c-surface: var(--wp--preset--color--surface, #f6f7f4); --c-accent: var(--wp--preset--color--accent, #b85b09); --c-text: var(--wp--preset--color--text, #333); --c-muted: var(--wp--preset--color--muted, #5f6368); --c-line: var(--wp--preset--color--line, #dcdcdc); --f-en: var(--wp--preset--font-family--en, Arial, sans-serif); --w-content: 1080px; --w-wide: 1240px; --gutter: 16px; --header-h: 72px; --radius: 8px; --shadow: 0 2px 12px rgba(0, 0, 0, .06); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; } body { margin: 0; letter-spacing: .02em; overflow-wrap: anywhere; word-break: normal; line-break: strict; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-feature-settings: "palt" 1; letter-spacing: .03em; margin-top: 0; word-break: auto-phrase; text-wrap: balance; } .btn, .wp-block-button__link, .global-nav__list a, .eyebrow + h2 { font-feature-settings: "palt" 1; } img, svg, video { max-width: 100%; height: auto; vertical-align: middle; } a { text-underline-offset: .2em; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; } .icon { width: 1.2em; height: 1.2em; flex: none; } .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: #fff; padding: 8px 16px; } .skip-link:focus { left: 8px; } .eyebrow { font-family: var(--f-en); font-weight: 700; font-size: .8125rem; letter-spacing: .16em; color: var(--c-brand-strong); margin: 0 0 .5rem; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .75em 1.5em; border-radius: 4px; font-weight: 700; line-height: 1.4; text-decoration: none; white-space: nowrap; transition: background-color .2s, transform .2s; } .btn--accent { background: var(--c-accent); color: #fff; } .btn--accent:hover { background: #9e4e07; } .wp-block-button__link { transition: background-color .2s; } .wp-block-button__link:hover { filter: brightness(.9); } .wp-block-button.is-style-outline > .wp-block-button__link { background: #fff; color: var(--c-deep); border: 2px solid var(--c-deep); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: #fff; transition: box-shadow .2s; } .site-header.is-scrolled { box-shadow: 0 2px 10px rgba(0, 0, 0, .08); } .admin-bar .site-header { top: 32px; } @media (max-width: 782px) { .admin-bar .site-header { top: 0; } } .site-header__inner { max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 24px; } .site-header__bar { background: var(--c-pale); font-size: .75rem; } .site-header__bar .site-header__inner { justify-content: space-between; min-height: 32px; } .site-header__tagline { margin: 0; color: var(--c-muted); } .lang-switch { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; } .lang-switch a, .lang-switch span { display: block; padding: 2px 8px; font-family: var(--f-en); font-weight: 600; text-decoration: none; color: var(--c-muted); } .lang-switch span { color: var(--c-brand-strong); border-bottom: 2px solid var(--c-brand); } .lang-switch a:hover { color: var(--c-brand-strong); } .site-header__main .site-header__inner { min-height: var(--header-h); } .site-logo { flex: none; display: block; } .site-logo img { width: 180px; height: auto; } .global-nav { flex: 1; } .global-nav__list { display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; } .global-nav__list a { color: var(--c-text); text-decoration: none; } .global-nav__list > li { position: relative; } .global-nav__list > li > a { display: block; padding: 24px 12px; font-size: .9375rem; font-weight: 500; white-space: nowrap; position: relative; } .global-nav__list > li > a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 16px; height: 2px; background: var(--c-brand); transform: scaleX(0); transition: transform .2s; } .global-nav__list > li:hover > a::after, .global-nav__list > li:focus-within > a::after, .global-nav__list > .current-menu-item > a::after, .global-nav__list > .current-menu-ancestor > a::after { transform: scaleX(1); } /* Dropdown (cấp 2) + nhóm khu vực (cấp 3, ví dụ 対応言語一覧 → 東南アジア → ベトナム語) */ .global-nav .sub-menu { list-style: none; margin: 0; padding: 0; } .global-nav__list > li > .sub-menu { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px); min-width: 340px; padding: 12px; background: #fff; border-top: 3px solid var(--c-brand); box-shadow: 0 10px 30px rgba(0, 0, 0, .12); border-radius: 0 0 var(--radius) var(--radius); opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s, visibility .15s; } /* Chỉ PC: trên mobile, :focus-within (sau khi chạm) làm menu con bị dịch -50% ra ngoài màn hình */ @media (min-width: 1024px) { .global-nav__list > li:hover > .sub-menu, .global-nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); } } .global-nav__list > li > .sub-menu a { display: block; padding: 8px 12px; font-size: .875rem; border-radius: 4px; } .global-nav__list > li > .sub-menu a:hover { background: var(--c-pale); color: var(--c-brand-strong); } /* Menu có nhóm cấp 3 → hiển thị dạng mega menu nhiều cột */ .global-nav__list > li > .sub-menu:has(.sub-menu) { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 8px 16px; min-width: 820px; padding: 20px; } .global-nav .sub-menu .sub-menu a { padding: 6px 12px; } .global-nav .sub-menu > .menu-item-has-children > a { font-weight: 700; color: var(--c-brand-strong); pointer-events: none; border-bottom: 1px solid var(--c-line); border-radius: 0; margin-bottom: 4px; } .global-nav .sub-menu > .menu-item-has-children > a[href]:not([href="#"]) { pointer-events: auto; } .global-nav__contact { display: none; } .site-header__actions { display: flex; align-items: center; gap: 16px; flex: none; } .header-tel { display: flex; flex-direction: column; align-items: flex-end; color: var(--c-text); text-decoration: none; line-height: 1.3; } .header-tel__num { display: flex; align-items: center; gap: 4px; font-family: var(--f-en); font-size: 1.25rem; font-weight: 700; color: var(--c-brand-strong); letter-spacing: .02em; } .header-tel__hours { font-size: .6875rem; color: var(--c-muted); } .header-cta { padding: .7em 1.2em; } .nav-toggle { display: none; } @media (max-width: 1180px) { .header-tel--pc { display: none; } } @media (max-width: 1023px) { :root { --header-h: 60px; } .site-header__tagline { display: none; } .site-header__bar .site-header__inner { justify-content: flex-end; min-height: 28px; } .site-logo img { width: 140px; } .site-header__main .site-header__inner { justify-content: space-between; } .header-cta span { display: none; } .header-cta { padding: .55em .7em; } .nav-toggle { display: flex; flex-direction: column; align-items: center; gap: 0; background: none; border: 0; padding: 4px; color: var(--c-text); cursor: pointer; font: inherit; } .nav-toggle .icon { width: 28px; height: 28px; } .nav-toggle .icon-close { display: none; } .nav-toggle[aria-expanded="true"] .icon-menu { display: none; } .nav-toggle[aria-expanded="true"] .icon-close { display: block; } .nav-toggle__label { font-size: .625rem; } .global-nav { position: fixed; inset: calc(var(--header-h) + 28px) 0 0 0; z-index: 99; background: #fff; overflow-y: auto; padding: 8px var(--gutter) 120px; transform: translateX(100%); visibility: hidden; transition: transform .25s, visibility .25s; } .global-nav.is-open { transform: none; visibility: visible; } .global-nav__list { flex-direction: column; } .global-nav__list > li { border-bottom: 1px solid var(--c-line); } .global-nav__list > li > a { padding: 16px 48px 16px 4px; } .global-nav__list > li > a::after { display: none; } .global-nav__list > li > .sub-menu, .global-nav__list > li > .sub-menu:has(.sub-menu) { position: static; transform: none; opacity: 1; visibility: visible; display: none; min-width: 0; box-shadow: none; border: 0; padding: 0 0 12px 12px; } .global-nav__list > li.is-open > .sub-menu { display: block; } .global-nav__list > li.is-open > .sub-menu:has(.sub-menu) { display: grid; grid-template-columns: 1fr 1fr; } .submenu-toggle { position: absolute; right: 0; top: 8px; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; color: var(--c-brand-strong); } .submenu-toggle::before, .submenu-toggle::after { content: ""; position: absolute; left: 12px; top: 19px; width: 16px; height: 2px; background: currentColor; transition: transform .2s; } .submenu-toggle::after { transform: rotate(90deg); } li.is-open > .submenu-toggle::after { transform: rotate(0); } .global-nav__contact { display: grid; gap: 12px; margin-top: 24px; } .global-nav__contact .header-tel { align-items: center; padding: 12px; border: 1px solid var(--c-line); border-radius: var(--radius); } .global-nav__contact .btn { padding: 1em; } body.nav-open { overflow: hidden; } } @media (min-width: 1024px) { .submenu-toggle { display: none; } } /* ---------- Page head / breadcrumb ---------- */ .page-head { background: var(--c-pale); padding: 24px var(--gutter) 40px; } .page-head__inner { max-width: var(--w-content); margin: 0 auto; } .page-head__title { margin: 16px 0 0; font-size: var(--wp--preset--font-size--xx-large); } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; font-size: .75rem; color: var(--c-muted); } .breadcrumb li + li::before { content: "›"; margin-right: 4px; } .breadcrumb a { color: var(--c-muted); } .entry-content > *:first-child { margin-top: 0; } /* ---------- Footer CTA ---------- */ .footer-cta { background: var(--c-deep); color: #fff; padding: var(--wp--preset--spacing--60, 64px) var(--gutter); text-align: center; } .footer-cta__inner { max-width: var(--w-content); margin: 0 auto; } .footer-cta .eyebrow { color: #cfe6b0; } .footer-cta__title { color: #fff; font-size: var(--wp--preset--font-size--xx-large); margin-bottom: .5rem; } .footer-cta__lead { margin: 0 0 32px; opacity: .9; } .footer-cta__panel { display: grid; grid-template-columns: 1fr 1.2fr; max-width: 900px; margin: 0 auto; background: #fff; color: var(--c-text); border-radius: 10px; overflow: hidden; text-align: center; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); } .footer-cta__col { padding: 32px 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .footer-cta__col > * { margin: 0; } .footer-cta__col--tel { background: var(--c-pale); } .footer-cta__label { font-size: .9375rem; font-weight: 700; } .footer-cta__label span { font-weight: 500; color: var(--c-muted); font-size: .8125rem; } .footer-cta__tel { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px !important; min-height: 44px; font-family: var(--f-en); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); font-weight: 700; letter-spacing: .02em; color: var(--c-brand-strong); text-decoration: none; } .footer-cta__tel .icon { width: .9em; height: .9em; } .footer-cta__note { margin-top: 4px !important; font-size: .8125rem; color: var(--c-muted); } .footer-cta__main { margin-top: 12px !important; width: 100%; max-width: 360px; padding: 1.05em 1.5em; font-size: 1.0625rem; } .footer-cta__subs { margin-top: 12px !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; font-size: .875rem; } .footer-cta__subs a { display: inline-flex; align-items: center; min-height: 40px; color: var(--c-brand-strong); } .footer-cta__subs a::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); flex: none; } .footer-cta__points { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; list-style: none; margin: 28px 0 0; padding: 0; font-size: .875rem; } .footer-cta__points li { display: flex; align-items: center; gap: 6px; } .footer-cta__points li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none; background: #ffe08a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234f7317' d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L21.1 7.4 19.7 6z'/%3E%3C/svg%3E") center / 12px no-repeat; } @media (max-width: 767px) { .footer-cta__panel { grid-template-columns: 1fr; } .footer-cta__col { padding: 24px 16px; } .footer-cta__col--web { order: -1; } .footer-cta__points { flex-direction: column; align-items: center; gap: 8px; } } /* ---------- Footer ---------- */ .site-footer { background: #f2f2ef; font-size: .8125rem; color: var(--c-text); } .site-footer a { color: var(--c-text); text-decoration: none; } .site-footer a:hover { color: var(--c-brand-strong); text-decoration: underline; } .site-footer__inner { max-width: var(--w-wide); margin: 0 auto; padding: 56px var(--gutter) 40px; display: grid; grid-template-columns: 320px 1fr; gap: 48px; } .site-footer__company p { margin: 0 0 12px; line-height: 1.7; } .site-footer__company img { margin-bottom: 16px; } .site-footer__name { font-weight: 700; font-size: .875rem; } .site-footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .site-footer__nav ul { list-style: none; margin: 0; padding: 0; } .site-footer__nav > ul > li { margin-bottom: 12px; } .site-footer__nav > ul > li > a { font-weight: 700; } .site-footer__nav ul ul { margin-top: 8px; } .site-footer__nav ul ul li { margin-bottom: 6px; } .site-footer__nav ul ul a::before { content: "- "; color: var(--c-muted); } .site-footer__copy { margin: 0; padding: 16px var(--gutter); text-align: center; border-top: 1px solid var(--c-line); color: var(--c-muted); } @media (max-width: 1023px) { .site-footer__inner { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 599px) { .site-footer__nav { grid-template-columns: 1fr 1fr; } } /* ---------- Sticky CTA (mobile) ---------- */ .sticky-cta { display: none; } @media (max-width: 767px) { body { padding-bottom: 64px; } /* 3 ô giống theme cũ: メール (xanh dương) / 30分で回答 (xanh lá) / 電話 (cam) */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1fr 1.15fr; box-shadow: 0 -2px 10px rgba(0, 0, 0, .12); } .sticky-cta a { display: flex; align-items: center; justify-content: center; gap: 6px; height: 60px; padding: 0 6px; font-size: .75rem; font-weight: 700; line-height: 1.3; text-decoration: none; color: #fff; } .sticky-cta svg { width: 22px; height: 22px; flex: none; } .sticky-cta__mail { background: #4a6f9c; } .sticky-cta__quote { background: #a5c96a; } .sticky-cta__tel { background: #a5582f; justify-content: flex-start; } .sticky-cta__badge { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: #fff; color: #7a9b3c; font-size: .5625rem; line-height: 1.1; text-align: center; } .sticky-cta__badge b { display: block; font-size: .8125rem; } .sticky-cta__tel span { display: flex; flex-direction: column; font-weight: 400; font-size: .6875rem; } .sticky-cta__tel b { font-family: var(--f-en); font-size: .8125rem; } .sticky-cta a > span { white-space: nowrap; } @media (max-width: 400px) { .sticky-cta__mail svg { display: none; } .sticky-cta a { font-size: .6875rem; } } } /* ========================================================= Sections (block pattern) ========================================================= */ .entry-content > .alignfull { margin-top: 0; margin-bottom: 0; } .gsjp-section { padding-top: var(--wp--preset--spacing--60, 80px); padding-bottom: var(--wp--preset--spacing--60, 80px); } .gsjp-section.is-pale { background: var(--c-pale); } .gsjp-head { text-align: center; margin-bottom: var(--wp--preset--spacing--50, 48px); } .gsjp-head h2 { margin: 0; font-size: var(--wp--preset--font-size--xx-large); } .gsjp-head h2::after { content: ""; display: block; width: 40px; height: 3px; margin: 16px auto 0; background: var(--c-brand); } .gsjp-head__lead { color: var(--c-muted); margin: 16px 0 0; } .gsjp-center { justify-content: center; margin-top: var(--wp--preset--spacing--50, 40px); } .gsjp-subhead { text-align: center; margin: var(--wp--preset--spacing--60, 64px) 0 24px; } /* Lưới thẻ: flex-wrap để hàng cuối thiếu thẻ tự căn giữa (không bị hụt bên phải) */ .gsjp-grid { --cols: 1; --gap: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); } .gsjp-grid > * { margin: 0 !important; flex: 0 0 calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols)); min-width: 0; } .gsjp-grid--2 { --cols: 2; } .gsjp-grid--3 { --cols: 3; } .gsjp-grid--4 { --cols: 4; } @media (max-width: 1023px) { .gsjp-grid--3, .gsjp-grid--4 { --cols: 2; } } @media (max-width: 599px) { .gsjp-grid--2, .gsjp-grid--3, .gsjp-grid--4 { --cols: 1; } } /* ---------- Hero ---------- */ .gsjp-hero { position: relative; overflow: hidden; background: linear-gradient(100deg, #fff 0 45%, var(--c-pale) 45% 100%); padding: 56px var(--gutter) 0; } .gsjp-hero__inner { max-width: var(--w-wide); margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; grid-template-areas: "text photo"; gap: 0 48px; align-items: center; } .gsjp-hero__text { grid-area: text; padding-bottom: 48px; } .gsjp-hero__text > * { margin-top: 0; margin-bottom: 0; } .gsjp-hero__en { font-family: var(--f-en); font-weight: 700; color: var(--c-brand); font-size: clamp(2.75rem, 1.5rem + 5vw, 5.5rem); line-height: 1; letter-spacing: -.01em; } .gsjp-hero .gsjp-hero__badges { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin-top: 24px; } .gsjp-hero__badges li { padding: 4px 12px; font-size: .875rem; font-weight: 700; border: 1px solid var(--c-brand); color: var(--c-brand-strong); background: #fff; } .gsjp-hero__badges li:first-child { background: var(--c-brand-strong); border-color: var(--c-brand-strong); color: #fff; } .gsjp-hero .gsjp-hero__title { margin-top: 20px; font-size: clamp(1.875rem, 1.2rem + 2.8vw, 3.25rem); line-height: 1.35; } .gsjp-hero .gsjp-hero__lead { margin-top: 20px; max-width: 34em; color: var(--c-muted); } .gsjp-hero .gsjp-hero__cta { margin-top: 32px; gap: 12px; } .gsjp-hero__photo { grid-area: photo; margin: 0; align-self: end; } .gsjp-hero__photo img { width: 100%; aspect-ratio: 820 / 936; object-fit: cover; border-radius: 120px 8px 0 0; } /* Băng số liệu tràn ngang (giống LP) */ .gsjp-hero > .gsjp-stats { margin: 0 calc(-1 * var(--gutter)) !important; background: var(--c-deep); color: #fff; padding: 32px var(--gutter); } .gsjp-stats__grid { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; } .gsjp-stats__grid > * { margin: 0 !important; } .gsjp-stat > * { margin: 0 !important; } .gsjp-stat__num { font-weight: 700; color: #ffe08a; font-size: 1rem; line-height: 1.1; } .gsjp-stat__num strong { font-family: var(--f-en); font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); color: #fff; margin-right: 2px; font-variant-numeric: tabular-nums; } .gsjp-stat__label { margin-top: 6px !important; font-size: .8125rem; opacity: .9; } @media (max-width: 899px) { .gsjp-hero { background: linear-gradient(180deg, #fff 0 55%, var(--c-pale) 55% 100%); padding-top: 32px; } .gsjp-hero__inner { grid-template-columns: 1fr; grid-template-areas: "text" "photo"; } .gsjp-hero__text { padding-bottom: 32px; } .gsjp-hero__photo { max-width: 420px; justify-self: center; } .gsjp-hero__photo img { border-radius: 80px 8px 0 0; } .gsjp-stats__grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } .gsjp-stat__label { font-size: .75rem; } } @media (max-width: 599px) { .gsjp-hero .gsjp-hero__cta { flex-direction: column; align-items: stretch; } .gsjp-hero .gsjp-hero__cta .wp-block-button__link { width: 100%; } } /* ---------- Clients ---------- */ .gsjp-clients { } .gsjp-logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .gsjp-logos > * { margin: 0 !important; } .gsjp-logos img { width: 100%; height: 72px; object-fit: contain; padding: 8px 16px; background: #fff; border: 1px solid #ececec; border-radius: 4px; } @media (max-width: 767px) { .gsjp-logos { grid-template-columns: repeat(3, 1fr); } .gsjp-logos img { height: 56px; padding: 6px; } } /* ---------- Reasons ---------- */ .gsjp-reason { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .gsjp-reason > * { margin: 0; } .gsjp-reason > :not(figure) { padding: 0 24px; } .gsjp-reason__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .gsjp-reason .gsjp-reason__no { margin-top: 20px; font-family: var(--f-en); font-weight: 700; font-size: .8125rem; letter-spacing: .12em; color: var(--c-brand-strong); } .gsjp-reason h3 { margin-top: 4px; } .gsjp-reason p:last-child { margin: 12px 0 28px; font-size: .9375rem; } /* ---------- Services ---------- */ .gsjp-service { position: relative; display: flex; flex-direction: column; padding: 28px 24px 20px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); transition: border-color .2s, box-shadow .2s, transform .2s; } .gsjp-service > * { margin: 0 !important; } .gsjp-service:hover { border-color: var(--c-brand); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); transform: translateY(-2px); } .gsjp-service__icon img { width: 56px; height: 56px; object-fit: contain; } .gsjp-service h3 { margin-top: 16px !important; } .gsjp-service h3 a { color: var(--c-text); text-decoration: none; } .gsjp-service h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* cả thẻ bấm được */ .gsjp-service h3 a:focus-visible { outline: none; } .gsjp-service:has(h3 a:focus-visible) { outline: 3px solid var(--c-brand); outline-offset: 2px; } .gsjp-service:hover h3 a { color: var(--c-brand-strong); } .gsjp-service p { margin-top: 8px !important; font-size: .875rem; color: var(--c-muted); line-height: 1.8; } /* Dòng "詳しく見る →" luôn nằm ở đáy thẻ (chữ trang trí — tên link là tiêu đề h3) */ .gsjp-service::after { content: "詳しく見る"; margin-top: auto; padding-top: 16px; align-self: flex-end; display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 700; color: var(--c-brand-strong); line-height: 1.5; padding-right: 22px; background: no-repeat right 0 bottom 2px / 16px 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23567a1a'%3E%3Cpath d='M13.2 5.3 19.9 12l-6.7 6.7-1.4-1.4 4.3-4.3H4v-2h12.1l-4.3-4.3 1.4-1.4Z'/%3E%3C/svg%3E"); transition: padding-right .2s; } .gsjp-service:hover::after { padding-right: 28px; } .gsjp-service > p:last-of-type { margin-bottom: 4px !important; } /* ---------- Languages ---------- */ /* Bản đồ chìm làm nền phía sau các thẻ (vẫn là block ảnh, đổi ảnh được trong admin) */ .gsjp-languages { position: relative; overflow: hidden; isolation: isolate; } .gsjp-languages > * { position: relative; z-index: 1; } .gsjp-languages > .gsjp-map { position: absolute; z-index: 0; left: 50%; top: 96px; translate: -50% 0; width: min(1500px, 115vw); max-width: none !important; margin: 0 !important; opacity: .55; pointer-events: none; } .gsjp-languages > .gsjp-map img { width: 100%; } .gsjp-languages > .gsjp-map::after { /* mờ dần xuống dưới để thẻ dễ đọc */ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--c-pale) 92%); } /* Thẻ khu vực: một màu thương hiệu xuyên suốt để bốn nhóm được đọc như một hệ thống. */ .gsjp-regions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .gsjp-regions > * { margin: 0 !important; } .gsjp-region { --tone: var(--c-deep); display: flex; flex-direction: column; background: #fff; border: 2px solid var(--tone); border-radius: 6px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, .05); } .gsjp-region.is-sea, .gsjp-region.is-east, .gsjp-region.is-south, .gsjp-region.is-west { --tone: var(--c-brand-strong); } .gsjp-region > * { margin: 0 !important; } /* gỡ khoảng cách mặc định của WP giữa các block */ .gsjp-region .gsjp-region__name { padding: 14px 12px; background: var(--tone); color: #fff; text-align: center; font-size: 1.25rem; letter-spacing: .06em; } .gsjp-region .gsjp-region__langs { flex: 1; list-style: none; padding: 20px 24px; display: grid; gap: 4px; align-content: start; } .gsjp-region__langs li { position: relative; padding-left: 16px; font-size: .9375rem; line-height: 1.7; } .gsjp-region__langs li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; background: var(--tone); } .gsjp-region__langs a { color: var(--c-text); text-decoration: none; } .gsjp-region__langs a:hover { color: var(--tone); text-decoration: underline; } .gsjp-region .gsjp-region__teams { margin: 0 24px; padding: 16px 0 20px; border-top: 1px solid var(--c-line); text-align: center; font-weight: 700; color: var(--tone); } .gsjp-region__teams strong { font-family: var(--f-en); font-size: 2.75rem; line-height: 1; margin-right: 2px; font-variant-numeric: tabular-nums; } @media (max-width: 1023px) { .gsjp-regions { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 599px) { .gsjp-languages > .gsjp-map { display: none; } .gsjp-regions { grid-template-columns: 1fr; } .gsjp-region .gsjp-region__langs { grid-template-columns: 1fr 1fr; } .gsjp-region__teams strong { font-size: 2.25rem; } } /* ---------- Offer ---------- */ .gsjp-offer { display: grid; grid-template-columns: 1fr 1fr; background: var(--c-pale); border-radius: 12px; overflow: hidden; } .gsjp-offer__media { position: relative; margin: 0; } .gsjp-offer__media > * { margin: 0; } .gsjp-offer__img, .gsjp-offer__img img { height: 100%; } .gsjp-offer__img img { width: 100%; object-fit: cover; } .gsjp-offer .gsjp-offer__badge { position: absolute; right: 24px; bottom: 24px; width: 132px; height: 132px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--c-accent); color: #fff; font-weight: 700; line-height: 1.2; text-align: center; font-size: .875rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); } .gsjp-offer__badge strong { font-family: var(--f-en); font-size: 2.5rem; } .gsjp-offer__body { padding: 48px; align-self: center; } .gsjp-offer__body > * { margin-top: 0; } .gsjp-offer__body h2 { font-size: var(--wp--preset--font-size--x-large); } .gsjp-offer__num { font-family: var(--f-en); font-size: 1.6em; color: var(--c-deep); } .gsjp-offer__tel { display: flex; flex-direction: column; } .gsjp-offer__tel a { font-family: var(--f-en); font-size: 1.75rem; font-weight: 700; color: var(--c-brand-strong); text-decoration: none; } .gsjp-offer__tel span { font-size: .8125rem; color: var(--c-muted); } @media (max-width: 899px) { .gsjp-offer { grid-template-columns: 1fr; } .gsjp-offer__img img { aspect-ratio: 16 / 10; } .gsjp-offer__body { padding: 32px 24px; } .gsjp-offer .gsjp-offer__badge { width: 104px; height: 104px; right: 16px; bottom: 16px; font-size: .75rem; } .gsjp-offer__badge strong { font-size: 1.875rem; } } /* ---------- Testimonials ---------- */ .gsjp-voice { position: relative; padding: 32px 24px 24px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); } .gsjp-voice::before { content: "“"; position: absolute; top: 4px; right: 20px; font-family: Georgia, serif; font-size: 4rem; line-height: 1; color: var(--c-pale); } .gsjp-voice > * { margin: 0; } .gsjp-voice .gsjp-voice__tag { display: inline-block; padding: 0 10px; font-size: .75rem; font-weight: 700; color: #fff; background: var(--c-brand-strong); border-radius: 2px; } .gsjp-voice h3 { margin: 8px 0 12px; font-size: 1rem; } .gsjp-voice p:last-child { font-size: .9375rem; color: var(--c-muted); } /* ---------- News (Latest Posts) ---------- */ .gsjp-posts.wp-block-latest-posts { padding: 0; gap: 24px; } .gsjp-posts.wp-block-latest-posts.is-grid li { margin: 0; width: auto; } .gsjp-posts.wp-block-latest-posts.columns-3 { display: grid; grid-template-columns: repeat(3, 1fr); } .gsjp-posts .wp-block-latest-posts__featured-image { margin-bottom: 12px; } .gsjp-posts .wp-block-latest-posts__featured-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); } .gsjp-posts .wp-block-latest-posts__post-title { display: block; font-weight: 700; line-height: 1.6; color: var(--c-text); text-decoration: none; } .gsjp-posts .wp-block-latest-posts__post-title:hover { color: var(--c-brand-strong); } .gsjp-posts .wp-block-latest-posts__post-date { font-family: var(--f-en); font-size: .75rem; color: var(--c-muted); } @media (max-width: 1023px) { .gsjp-posts.wp-block-latest-posts.columns-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 599px) { .gsjp-posts.wp-block-latest-posts.columns-3 { grid-template-columns: 1fr; } } /* ---------- Award ---------- */ .gsjp-award { display: grid; grid-template-columns: minmax(240px, 360px) 1fr; max-width: 980px; margin: 0 auto !important; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .06); } .gsjp-award > * { margin: 0 !important; } .gsjp-award__img, .gsjp-award__img img { height: 100%; } .gsjp-award__img img { width: 100%; object-fit: cover; object-position: 60% 50%; } .gsjp-award__body { padding: 48px; align-self: center; } .gsjp-award__body > * { margin: 0 !important; } .gsjp-award__body h2 { margin-top: 8px !important; font-size: var(--wp--preset--font-size--x-large); line-height: 1.5; } .gsjp-award__body .gsjp-award__en { margin-top: 8px !important; font-family: var(--f-en); font-size: .75rem; font-weight: 700; letter-spacing: .14em; color: #8a7020; display: flex; align-items: center; gap: 10px; } .gsjp-award__en::before { content: ""; width: 24px; height: 2px; background: #d4af37; } .gsjp-award__body > p:not([class]) { margin-top: 20px !important; color: var(--c-muted); font-size: .9375rem; } .gsjp-award__fact { margin-top: 28px !important; padding: 16px 20px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; background: var(--c-pale); border-left: 4px solid var(--c-brand); border-radius: 0 6px 6px 0; } .gsjp-award__fact > * { margin: 0 !important; } .gsjp-award__num { font-weight: 700; color: var(--c-deep); } .gsjp-award__num strong { font-family: var(--f-en); font-size: 2.5rem; line-height: 1; margin-right: 2px; } .gsjp-award__label { font-size: .875rem; font-weight: 500; } @media (max-width: 767px) { .gsjp-award { grid-template-columns: 1fr; } .gsjp-award__img img { aspect-ratio: 4 / 3; height: auto; object-position: 60% 40%; } .gsjp-award__body { padding: 28px 24px 32px; } } /* ========================================================= Blog ========================================================= */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .btn--outline { background: #fff; color: var(--c-brand-strong); border: 2px solid var(--c-brand-strong); } .btn--outline:hover { background: var(--c-brand-strong); color: #fff; } .page-head__lead { margin: 12px 0 0; color: var(--c-muted); font-size: .9375rem; } .blog-head .page-head__lead { max-width: 720px; line-height: 1.8; } .page-head__lead p { margin: 0; } /* Editorial B2B blog landing: one compact priority story, then a consistent latest-post grid. */ .blog-head { background: #fff; padding-top: 24px; padding-bottom: 32px; } .blog-head .page-head__title { margin-top: 20px; font-size: clamp(1.8rem, 1.45rem + 1.4vw, 2.5rem); line-height: 1.35; } .blog-list { max-width: var(--w-wide); margin: 0 auto; padding: 20px var(--gutter) 88px; } .blog-tabs { margin-bottom: 32px; border-bottom: 1px solid var(--c-line); } .blog-tabs ul { display: flex; flex-wrap: wrap; gap: 4px 28px; list-style: none; margin: 0; padding: 0; } .blog-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border-bottom: 2px solid transparent; color: var(--c-muted); text-decoration: none; font-size: .9375rem; font-weight: 600; transition: border-color .2s, color .2s; } .blog-tabs a:hover { border-color: var(--c-brand); color: var(--c-brand-strong); } .blog-tabs a[aria-current] { border-color: var(--c-brand-strong); color: var(--c-brand-strong); } .blog-featured { margin: 0 0 48px; padding: 20px; border: 1px solid var(--c-line); border-top: 3px solid var(--c-brand); background: var(--c-pale); } .blog-featured__label { margin: 0 0 14px; color: var(--c-brand-strong); font-size: .8125rem; font-weight: 700; letter-spacing: .04em; } .blog-list__heading { margin: 0 0 24px; padding-bottom: 12px; border-bottom: 1px solid var(--c-line); color: var(--c-text); font-size: 1.25rem; line-height: 1.5; } .post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; } @media (max-width: 1023px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; } } @media (max-width: 599px) { .post-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; } } .post-card { position: relative; display: flex; min-width: 0; flex-direction: column; } .post-card__thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--c-pale); } .post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .post-card:hover .post-card__thumb img { transform: scale(1.025); } .post-card__noimg { display: grid; place-items: center; height: 100%; font-family: var(--f-en); font-weight: 700; color: var(--c-brand-strong); } .post-card__body { min-width: 0; padding-top: 14px; } .post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 8px; font-size: .75rem; color: var(--c-muted); } .post-card__cat { color: var(--c-brand-strong); font-weight: 700; } .post-card__meta time { font-family: var(--f-en); } .post-card__title { margin: 0; font-size: 1.0625rem; line-height: 1.65; } .post-card__title a { color: var(--c-text); text-decoration: none; } .post-card__title a::after { content: ""; position: absolute; inset: 0; } /* cả thẻ bấm được */ .post-card:hover .post-card__title a { color: var(--c-brand-strong); } .post-card__excerpt { display: -webkit-box; overflow: hidden; margin: 8px 0 0; color: var(--c-muted); font-size: .875rem; line-height: 1.8; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .blog-featured .post-card--featured { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(20px, 3vw, 36px); } .blog-featured .post-card--featured .post-card__thumb { aspect-ratio: 4 / 3; } .blog-featured .post-card--featured .post-card__body { padding-top: 0; } .blog-featured .post-card--featured .post-card__title { font-size: clamp(1.25rem, 1.05rem + .65vw, 1.65rem); line-height: 1.55; } .blog-featured .post-card--featured .post-card__excerpt { -webkit-line-clamp: 4; } @media (max-width: 1023px) { .blog-featured { margin-bottom: 40px; padding: 18px; } .blog-featured .post-card--featured { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } } @media (max-width: 767px) { .post-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; } .blog-featured .post-card--featured { grid-template-columns: minmax(0, 1fr); gap: 0; } .blog-featured .post-card--featured .post-card__thumb { aspect-ratio: 16 / 9; } .blog-featured .post-card--featured .post-card__body { padding-top: 14px; } } @media (max-width: 599px) { .blog-head { padding-top: 20px; padding-bottom: 24px; } .blog-head .page-head__title { font-size: 1.75rem; } .blog-list { padding-top: 8px; padding-bottom: 56px; } .blog-featured { margin-bottom: 32px; padding: 14px; } .blog-list__heading { margin-bottom: 20px; font-size: 1.125rem; } .post-body .gsjppage-answer-summary { margin: 1.5rem 0; } .post-body .gsjppage-answer-summary__answer, .post-body .gsjppage-answer-summary__points { padding: 1rem 0; } } .pagination { margin-top: 48px; } .pagination ul.page-numbers { border: 0; height: auto; min-width: 0; padding: 0; background: none; } .pagination ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 8px; border: 1px solid var(--c-line); border-radius: 4px; background: #fff; color: var(--c-text); text-decoration: none; font-family: var(--f-en); } .pagination a.page-numbers:hover { border-color: var(--c-brand); color: var(--c-brand-strong); } .pagination .current { background: var(--c-brand-strong); border-color: var(--c-brand-strong); color: #fff; } .pagination .dots { border: 0; background: none; } /* Article: category/date row, fixed cover ratio, and focused two-column reading view. */ .post-head { background: #fff; padding-top: 24px; padding-bottom: 24px; } .post-head__inner { max-width: 1280px; } .post-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 22px; } .post-head__cat { color: var(--c-brand-strong); font-size: .8125rem; font-weight: 700; text-decoration: none; } .post-head__cat:hover { text-decoration: underline; } .post-head__dates { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: .75rem; color: var(--c-muted); } .post-head__dates time { margin-left: 4px; font-family: var(--f-en); } .post-head .post-head__title { max-width: 900px; margin-top: 12px; font-size: clamp(1.65rem, 1.3rem + 1.2vw, 2.25rem); line-height: 1.45; } .post-reading-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; max-width: 1280px; margin: 0 auto; padding: 40px var(--gutter) 0; } .post-reading-layout__main { min-width: 0; max-width: none; } .post-body { --wp--style--global--content-size: 100%; max-width: 100%; margin: 0; padding: 0 0 24px; font-size: 1.0625rem; line-height: 1.95; } .post-body > * { margin-top: 0; margin-bottom: 1.5em; } body.single-post .post-body mark { background-color: transparent !important; } .post-body h2 { margin: 2.6em 0 1em; padding: 0 0 12px; font-size: 1.375rem; line-height: 1.55; border-bottom: 1px solid var(--c-line); scroll-margin-top: calc(var(--header-h) + 24px); } .post-body h3 { margin: 2em 0 .8em; padding-bottom: 8px; font-size: 1.1875rem; border-bottom: 2px solid var(--c-line); position: relative; } .post-body h3::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 64px; height: 2px; background: var(--c-brand); } .post-body h4 { margin: 1.6em 0 .6em; font-size: 1.0625rem; padding-left: 12px; border-left: 3px solid var(--c-brand); } .post-body ul.wp-block-list, .post-body ol.wp-block-list, .post-body > ul, .post-body > ol { padding-left: 1.5em; } .post-body li { margin-bottom: .4em; } .post-body li::marker { color: var(--c-brand-strong); } .post-body a:not(.wp-block-button__link):not([class*="cta"]) { color: var(--c-brand-strong); text-decoration: underline; } .post-body img { height: auto; border-radius: 4px; } .post-body .wp-block-image figcaption { font-size: .8125rem; color: var(--c-muted); text-align: center; } .post-body .wp-block-spacer { max-height: 32px; } .post-body .wp-block-separator { border: 0; height: 1px; background: var(--c-line) !important; margin: 2.5em auto; opacity: 1; } .post-body blockquote { margin-left: 0; padding: 12px 20px; border-left: 4px solid var(--c-line); background: var(--c-surface); color: var(--c-muted); } .post-body table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.7; } .post-body th, .post-body td { padding: 10px 12px; border: 1px solid var(--c-line); vertical-align: top; text-align: left; } .post-body th, .post-body thead td { background: var(--c-pale); font-weight: 700; } .post-body .wp-block-table, .post-body .ninja_table_wrapper, .post-body .footable { overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 599px) { .post-body { font-size: 1rem; line-height: 1.95; } .post-body h2 { font-size: 1.1875rem; padding: 12px 14px; } .post-body h3 { font-size: 1.0625rem; } } /* Mục lục AIOSEO */ .post-body .wp-block-aioseo-table-of-contents { padding: 20px 24px; background: #fff; border: 1px solid var(--c-line); border-top: 4px solid var(--c-brand); border-radius: 0 0 6px 6px; font-size: .9375rem; } /* Bài cũ bọc mục lục trong khung màu (vàng…) → đồng bộ thành 1 kiểu */ .post-body .wp-block-group:has(> .wp-block-aioseo-table-of-contents) { padding: 20px 24px !important; background: #fff !important; border: 1px solid var(--c-line); border-top: 4px solid var(--c-brand); border-radius: 0 0 6px 6px; } .post-body .wp-block-group:has(> .wp-block-aioseo-table-of-contents) > * { margin: 0 0 8px; } .post-body .wp-block-group:has(> .wp-block-aioseo-table-of-contents) .wp-block-aioseo-table-of-contents { padding: 0; border: 0; } .post-body h2 + .wp-block-separator, .post-body h2 + .wp-block-spacer + .wp-block-separator { display: none; } .post-body .wp-block-aioseo-table-of-contents ul { margin: 0; padding-left: 1.4em; } .post-body .wp-block-aioseo-table-of-contents li { margin-bottom: .25em; line-height: 1.7; } .post-body .wp-block-aioseo-table-of-contents a { text-decoration: none !important; color: var(--c-text) !important; } .post-body .wp-block-aioseo-table-of-contents a:hover { color: var(--c-brand-strong) !important; text-decoration: underline !important; } /* The desktop sidebar holds navigation and related reading; mobile moves TOC into the article flow. */ .post-sidebar { display: grid; gap: 32px; min-width: 0; } .post-toc--desktop { position: static; margin: 0; padding: 20px; border: 1px solid var(--c-line); border-top: 3px solid var(--c-brand); background: #fff; } .post-toc__title { margin: 0 0 12px; color: var(--c-text); font-size: .875rem; font-weight: 700; } .post-toc ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; } .post-toc nav li + li { margin-top: 0; } .post-toc nav a { display: block; padding: 4px 0; color: var(--c-muted); font-size: .8125rem; line-height: 1.6; text-decoration: none; overflow-wrap: anywhere; } .post-toc nav a:hover { color: var(--c-brand-strong); text-decoration: underline; text-underline-offset: 3px; } .post-toc--mobile { display: none; } .post-reading-layout.has-post-toc .post-body .wp-block-aioseo-table-of-contents, .post-reading-layout.has-post-toc .post-body .wp-block-group:has(> .wp-block-aioseo-table-of-contents) { display: none; } .post-sidebar__related { padding-top: 24px; border-top: 1px solid var(--c-line); } .post-sidebar__related h2 { margin: 0 0 18px; font-size: 1.125rem; } .post-sidebar__list { display: grid; gap: 20px; } .post-sidebar__card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; } .post-sidebar__thumb { display: grid; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; background: var(--c-pale); color: var(--c-brand-strong); font: 700 .65rem/1.2 var(--f-en); text-decoration: none; } .post-sidebar__thumb img { width: 100%; height: 100%; object-fit: cover; } .post-sidebar__card h3 { margin: 0; font-size: .875rem; line-height: 1.55; } .post-sidebar__card h3 a { color: var(--c-text); text-decoration: none; } .post-sidebar__card h3 a:hover { color: var(--c-brand-strong); text-decoration: underline; text-underline-offset: 3px; } .post-sidebar__card time { display: block; margin-top: 5px; color: var(--c-muted); font: .6875rem/1.4 var(--f-en); } /* Existing key-takeaway content stays intact, but reads as an editorial summary, not a card. */ .post-body .gsjppage-answer-summary { margin: 2rem 0; overflow: visible; border: 0; border-top: 2px solid var(--c-brand); border-bottom: 1px solid var(--c-line); border-radius: 0; background: transparent; box-shadow: none; color: var(--c-text); } .post-body .gsjppage-answer-summary__answer, .post-body .gsjppage-answer-summary__points { padding: 1.2rem 0; background: transparent; } .post-body .gsjppage-answer-summary__points { border-top: 1px solid var(--c-line); } .post-body .gsjppage-answer-summary__label { color: var(--c-brand-strong); font-weight: 700; } .post-body .gsjppage-answer-summary__label::before { display: none; } /* CTA chung cuối bài */ .post-cta { max-width: 880px; margin: 32px auto 64px; padding: 24px; border: 0; border-top: 2px solid var(--c-brand); border-radius: 0; background: var(--c-pale); text-align: left; } .post-cta > * { margin: 0; } .post-cta__title { font-size: 1.25rem; font-weight: 700; } .post-cta__text { margin-top: 8px; color: var(--c-muted); font-size: .9375rem; } .post-cta__actions { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; } .post-cta__tel { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-family: var(--f-en); font-size: 1.375rem; font-weight: 700; color: var(--c-brand-strong); text-decoration: none; } /* Legacy post promotion CTA: shared site styles; copy remains in article content. */ .cta-banner { max-width: 1040px !important; margin: 40px auto 48px !important; padding: 24px 28px !important; border: 1px solid #cbd9b7 !important; border-top: 4px solid var(--c-brand) !important; border-radius: 0 !important; background: var(--c-pale) !important; text-align: left !important; font-family: var(--f-jp) !important; box-shadow: 0 8px 24px rgba(49, 92, 22, .08) !important; } .cta-banner .title-cta-dis { display: flex !important; justify-content: center !important; flex-wrap: wrap !important; gap: 0 8px !important; margin: 0 0 20px !important; color: var(--c-text) !important; font-size: 1.375rem !important; font-weight: 700 !important; line-height: 1.5 !important; } .cta-banner .highlight-cta { margin: 0 !important; color: var(--c-brand-strong) !important; font-size: inherit !important; } .cta-banner .dis-text { color: #a62e24 !important; font-size: inherit !important; } .cta-banner .container-cta-dis { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center !important; justify-content: initial !important; gap: 12px !important; border: 0 !important; box-shadow: none !important; } .cta-banner .button-ctadis { min-width: 0 !important; max-width: none !important; min-height: 56px !important; height: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 8px 14px !important; border: 1px solid var(--c-brand-strong) !important; border-radius: 4px !important; background: #fff !important; color: var(--c-brand-strong) !important; font-size: .9375rem !important; font-weight: 700 !important; text-align: center !important; text-decoration: none !important; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease !important; } .cta-banner .button-ctadis:hover { box-shadow: 0 3px 10px rgba(49, 92, 22, .16) !important; } .cta-banner .button-ctadis:focus-visible { outline: 3px solid var(--c-brand-strong) !important; outline-offset: 3px !important; } .cta-banner .button-ctadis.green { padding-left: 14px !important; border-color: var(--c-brand-strong) !important; background: var(--c-brand-strong) !important; color: #fff !important; } .cta-banner .button-ctadis.green:hover { background: #3f5e12 !important; } .cta-banner .circle-badge-ctadis { width: 42px !important; height: 42px !important; flex: 0 0 42px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: #fff !important; color: #bd3429 !important; line-height: 1.05 !important; } .cta-banner .big-text-cta { font-size: .875rem !important; } .cta-banner .small-text-cta { font-size: .625rem !important; } .cta-banner .phone-container-cta-dis { min-width: 0 !important; text-align: center !important; } .cta-banner .phone-icon-ctadis { display: none !important; } .cta-banner .phone-number-ctadis { color: #456315 !important; font-family: var(--f-en) !important; font-size: 1.625rem !important; font-weight: 700 !important; text-decoration: none !important; white-space: nowrap !important; } .cta-banner .phone-container-cta-dis p { margin: 2px 0 0 !important; color: var(--c-muted) !important; font-size: .8125rem !important; } .post-body .cta-container { max-width: 900px; margin: 32px auto; padding: 24px; border: 1px solid #cbd9b7; border-top: 3px solid var(--c-brand); background: var(--c-pale); color: var(--c-text); } .post-body .cta-container .cta-image { display: none; } .post-body .cta-container .cta-content { padding: 0; background: transparent; color: inherit; } .post-body .cta-container .cta-content p { margin: 0 0 12px; font-size: inherit; line-height: 1.7; } .post-body .cta-container .cta-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 8px; padding: 10px 18px; border-radius: 6px; background: var(--c-brand-strong); color: #fff; font-weight: 700; text-align: center; text-decoration: none; } .post-body .cta-container .cta-button:hover { background: #3f5e12; } @media (max-width: 767px) { .post-body .cta-container { margin: 28px var(--gutter); padding: 20px 16px; } .post-body .cta-container .cta-content { text-align: left; } } @media (max-width: 1023px) { .cta-banner .container-cta-dis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cta-banner .phone-container-cta-dis { grid-column: 1 / -1; } } @media (max-width: 767px) { .post-cta { margin: 28px var(--gutter) 48px; padding: 20px 0 0; } .post-cta__actions { flex-direction: column; align-items: stretch; gap: 10px; } .post-cta__actions .btn { width: 100%; min-height: 48px; justify-content: center; } .post-cta__tel { justify-content: flex-start; font-size: 1.25rem; } .cta-banner { margin: 28px var(--gutter) 48px !important; padding: 20px 16px !important; } .cta-banner .title-cta-dis { justify-content: flex-start !important; text-align: left !important; font-size: 1.0625rem !important; } .cta-banner .container-cta-dis { display: flex !important; flex-direction: column !important; align-items: stretch !important; } .cta-banner .button-ctadis { width: 100% !important; min-height: 52px !important; } .cta-banner .phone-container-cta-dis { width: 100%; text-align: left !important; } } @media (max-width: 1199px) { .post-reading-layout { display: block; } .post-sidebar { max-width: 840px; margin: 40px auto 0; } .post-sidebar .post-toc--desktop { display: none; } .post-sidebar__related .post-sidebar__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .post-sidebar__card { grid-template-columns: 112px minmax(0, 1fr); } .post-toc--mobile { display: block; margin: 0 0 28px; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); } .post-toc--mobile summary { position: relative; display: flex; align-items: center; min-height: 52px; padding: 0 36px 0 0; color: var(--c-text); font-size: .9375rem; font-weight: 700; cursor: pointer; list-style: none; } .post-toc--mobile summary::-webkit-details-marker { display: none; } .post-toc--mobile summary::after { content: "+"; position: absolute; right: 4px; color: var(--c-brand-strong); font: 700 1.25rem/1 Arial, sans-serif; } .post-toc--mobile[open] summary::after { content: "−"; } .post-toc--mobile nav { padding: 0 0 14px; } .post-toc--mobile nav a { min-height: 40px; } .post-body { --wp--style--global--content-size: 100%; max-width: 100%; font-size: 1rem; line-height: 1.95; } .post-body h2 { margin-top: 2.2em; padding: 0 0 10px; font-size: 1.2rem; } .post-body h3 { font-size: 1.0625rem; } } @media (max-width: 767px) { .post-sidebar__related .post-sidebar__list { grid-template-columns: minmax(0, 1fr); } .post-sidebar { margin-top: 28px; } } @media (max-width: 1023px) { .post-head { padding-top: 18px; padding-bottom: 20px; } .post-head__inner { padding-left: var(--gutter); padding-right: var(--gutter); } .post-head__meta { margin-top: 18px; gap: 6px 12px; } .post-head__dates { gap: 4px 12px; } .post-head .post-head__title { margin-top: 12px; font-size: clamp(1.4rem, 1.15rem + 1.5vw, 1.75rem); line-height: 1.55; } } .related-posts { background: var(--c-surface); padding: 64px var(--gutter); } .related-posts__inner { max-width: var(--w-wide); margin: 0 auto; text-align: center; } .related-posts__title { margin: 0 0 32px; font-size: var(--wp--preset--font-size--x-large); } .related-posts .post-grid { text-align: left; } .related-posts__more { margin: 40px 0 0; } /* Màu cũ (bảng màu của theme cũ) — bài viết cũ vẫn dùng các class này */ .has-dark-gray-color { color: #1a1a1a; } .has-dark-gray-background-color { background-color: #1a1a1a; } .has-medium-gray-color { color: #686868; } .has-medium-gray-background-color { background-color: #686868; } .has-light-gray-color { color: #e5e5e5; } .has-light-gray-background-color { background-color: #e5e5e5; } .has-white-color { color: #fff; } .has-white-background-color { background-color: #fff; } .has-blue-gray-color { color: #4d545c; } .has-blue-gray-background-color { background-color: #4d545c; } .has-bright-blue-color { color: #007acc; } .has-bright-blue-background-color { background-color: #007acc; } .has-light-blue-color { color: #9adffd; } .has-light-blue-background-color { background-color: #9adffd; } .has-dark-brown-color { color: #402b30; } .has-dark-brown-background-color { background-color: #402b30; } .has-medium-brown-color { color: #774e24; } .has-medium-brown-background-color { background-color: #774e24; } .has-dark-red-color { color: #640c1f; } .has-dark-red-background-color { background-color: #640c1f; } .has-bright-red-color { color: #ff675f; } .has-bright-red-background-color { background-color: #ff675f; } .has-yellow-color { color: #ffef8e; } .has-yellow-background-color { background-color: #ffef8e; } /* ========================================================= Trang dịch vụ (nội dung cũ trong .legacy-content) ========================================================= */ /* Banner trang dịch vụ (下層ページMV) */ .svc-hero { position: relative; overflow: hidden; padding: 24px var(--gutter) 56px; background: linear-gradient(110deg, var(--c-pale) 0 62%, #e8f1d8 62% 100%); } .svc-hero::after { /* họa tiết chấm nhẹ góc phải */ content: ""; position: absolute; right: -40px; bottom: -40px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(121, 165, 42, .18) 2px, transparent 2.5px) 0 0 / 16px 16px; } .svc-hero__inner { position: relative; z-index: 1; max-width: var(--w-content); margin: 0 auto; display: grid; grid-template-columns: 1fr 260px; gap: 40px; align-items: center; } .svc-hero__inner > * { min-width: 0; } /* chữ dài không đẩy lưới tràn ra ngoài */ .svc-hero__text > * { margin: 0; } .svc-hero .breadcrumb { margin-bottom: 28px; } .svc-hero .eyebrow { margin-bottom: 6px; } .svc-hero__title { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; } .svc-hero .svc-hero__catch { margin-top: 12px; font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); font-weight: 700; color: var(--c-brand-strong); line-height: 1.6; } .svc-hero .svc-hero__lead { margin-top: 8px; max-width: 40em; color: var(--c-muted); font-size: .9375rem; } .svc-hero .svc-hero__points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding: 0; list-style: none; } .svc-hero__points li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: #fff; border: 1px solid #d7e5c1; border-radius: 999px; font-size: .8125rem; font-weight: 700; color: var(--c-brand-strong); } .svc-hero__points li::before { content: ""; width: 14px; height: 14px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23567a1a' d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L21.1 7.4 19.7 6z'/%3E%3C/svg%3E") center / contain no-repeat; } .svc-hero .svc-hero__cta { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .svc-hero__cta .btn { padding: 1em 1.5em; font-size: 1rem; } .svc-hero .svc-hero__note { margin-top: 12px; font-size: .75rem; color: var(--c-muted); } .svc-hero__cta .btn--outline { background: rgba(255, 255, 255, .7); } .svc-hero__cta .btn--outline:hover { background: var(--c-brand-strong); color: #fff; } .svc-hero__tel { display: inline-flex; align-items: center; gap: 8px; color: var(--c-brand-strong); text-decoration: none; min-height: 44px; } .svc-hero__tel .icon { width: 28px; height: 28px; } .svc-hero__tel span { display: flex; flex-direction: column; font-family: var(--f-en); font-size: 1.5rem; font-weight: 700; line-height: 1.2; } .svc-hero__tel small { font-family: var(--wp--preset--font-family--sans); font-size: .6875rem; font-weight: 400; color: var(--c-muted); } .svc-hero__visual { width: 240px; height: 240px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 16px 40px rgba(79, 115, 23, .15); border: 8px solid rgba(255, 255, 255, .6); justify-self: center; } .svc-hero__visual img { width: 112px; height: 112px; object-fit: contain; } .about-hero .svc-hero__visual { width: 220px; height: 220px; border: 1px solid #dce8c9; background: rgba(255,255,255,.72); } .about-hero .svc-hero__visual img { width: 128px; height: 128px; } .gsjp-svc-features .gsjp-point__img { width: 100%; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #e1e9d4; border-radius: 18px; background: #f5f8ef; } .gsjp-svc-features .gsjp-point__img img { width: 104px; height: 104px; aspect-ratio: auto; object-fit: contain; border-radius: 0; } .gsjp-svc-features .gsjp-point__img::after { display: none; } .gsjp-svc-features .gsjp-point:nth-child(even) .gsjp-point__img::after { display: none; } @media (max-width: 767px) { .svc-hero { padding-bottom: 40px; background: var(--c-pale); } .svc-hero__inner { grid-template-columns: 1fr; } .svc-hero__visual { display: none; } .svc-hero__cta .btn { width: 100%; } .svc-hero__cta { gap: 10px !important; } } /* Banner dịch vụ: ảnh thật làm nền + lớp phủ xanh đậm, chữ trắng */ .svc-hero.has-photo { background: var(--svc-bg) center 30% / cover no-repeat; padding-top: 28px; padding-bottom: 72px; } .svc-hero.has-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(38, 60, 10, .92) 0%, rgba(58, 88, 18, .82) 45%, rgba(58, 88, 18, .35) 100%); } .svc-hero.has-photo::after { display: none; } .svc-hero.has-photo .svc-hero__inner { position: relative; z-index: 1; } .svc-hero.has-photo, .svc-hero.has-photo .svc-hero__title { color: #fff; } .svc-hero.has-photo .breadcrumb ol, .svc-hero.has-photo .breadcrumb a { color: rgba(255, 255, 255, .8); } .svc-hero.has-photo .eyebrow { color: #cfe6a8; } .svc-hero.has-photo .svc-hero__catch { color: #ffe08a; } .svc-hero.has-photo .svc-hero__lead, .svc-hero.has-photo .svc-hero__note { color: rgba(255, 255, 255, .88); } .svc-hero.has-photo .btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .85); } .svc-hero.has-photo .btn--outline:hover { background: #fff; color: var(--c-brand-strong); } .svc-hero.has-photo .svc-badge { box-shadow: 0 12px 30px rgba(0, 0, 0, .28); } @media (max-width: 767px) { .svc-hero.has-photo::before { background: linear-gradient(180deg, rgba(38, 60, 10, .9), rgba(58, 88, 18, .8)); } } /* Huy hiệu thành tích trên banner trang dịch vụ (chữ theo bản gốc) */ .svc-hero__inner { grid-template-columns: 1fr 480px; } .svc-hero__inner > * { min-width: 0; } .svc-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; list-style: none; margin: 0; padding: 0; } .svc-badge { position: relative; aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, #fff 0 60%, #f4f7ef 100%); box-shadow: 0 10px 24px rgba(79, 115, 23, .14); text-align: center; } .svc-badge.has-laurel::before, .svc-badge.has-laurel::after { content: ""; position: absolute; inset: 10px; background: url("../img/laurel.svg") center / contain no-repeat; opacity: .55; pointer-events: none; } .svc-badge.has-laurel::after { transform: scaleX(-1); } .svc-badge__ribbon { position: absolute; top: -10px; left: 50%; translate: -50% 0; z-index: 1; white-space: nowrap; padding: 4px 14px; border-radius: 999px; background: linear-gradient(90deg, #6aa84f, var(--c-brand)); color: #fff; font-size: .8125rem; font-weight: 700; box-shadow: 0 3px 8px rgba(79, 115, 23, .25); } .svc-badge__ribbon::after { content: ""; position: absolute; left: 50%; bottom: -6px; translate: -50% 0; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--c-brand); } .svc-badge__text { position: relative; z-index: 1; margin-top: 10px; font-size: 1rem; font-weight: 700; line-height: 1.45; color: var(--c-text); } .svc-badge__text small { display: block; font-size: .75rem; } .svc-badge__text em { font-style: normal; color: var(--c-accent); } .svc-badge__text em { font-size: 1.25rem; } .svc-badge.has-laurel .svc-badge__text em { font-size: 1.25rem; line-height: 1.3; } .svc-badge__text { font-size: .875rem; line-height: 1.4; } .svc-badge.has-laurel:nth-child(2) .svc-badge__text { font-size: .875rem; } .svc-badge.has-laurel:nth-child(2) .svc-badge__text em { font-size: 1.25rem; } .svc-badge.has-laurel:nth-child(2)::before, .svc-badge.has-laurel:nth-child(2)::after { inset: 4px; } @media (max-width: 1023px) { .svc-hero__inner { grid-template-columns: 1fr; } .svc-badges { max-width: 480px; margin: 18px auto 0; gap: 10px; } } @media (max-width: 479px) { .svc-badge__ribbon { font-size: .625rem; padding: 3px 8px; } .svc-badge__text { font-size: .75rem; } .svc-badge.has-laurel .svc-badge__text em { font-size: 1rem; } .svc-badge.has-laurel:nth-child(2) .svc-badge__text { font-size: .6875rem; } .svc-badge.has-laurel:nth-child(2) .svc-badge__text em { font-size: .9375rem; } } /* 関連サービス */ .svc-related { padding: 64px var(--gutter); background: var(--c-surface); } .svc-related__inner { max-width: var(--w-content); margin: 0 auto; text-align: center; } .svc-related__title { margin: 0 0 32px; font-size: var(--wp--preset--font-size--x-large); } .svc-related__list { --cols: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; list-style: none; margin: 0; padding: 0; text-align: left; } .svc-related__list > li { flex: 0 0 calc((100% - 12px * (var(--cols) - 1)) / var(--cols)); min-width: 0; } .svc-related__list a { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px; background: #fff; border: 1px solid var(--c-line); border-radius: 6px; color: var(--c-text); font-size: .875rem; font-weight: 700; text-decoration: none; transition: border-color .2s, color .2s; } .svc-related__list a:hover { border-color: var(--c-brand); color: var(--c-brand-strong); } .svc-related__list img { width: 36px; height: 36px; object-fit: contain; flex: none; } @media (max-width: 1023px) { .svc-related__list { --cols: 3; } } @media (max-width: 599px) { .svc-related__list { --cols: 2; } .svc-related__list a { font-size: .8125rem; padding: 8px 10px; } } /* Làm mới nội dung cũ cho đồng bộ (chữ, tiêu đề, màu viết thẳng trong nội dung) */ .legacy-content.legacy-content .page-full-content { color: var(--c-text); font-size: 1rem; } .legacy-content.legacy-content .page-full-content p, .legacy-content.legacy-content .page-full-content li { font-size: 1rem; line-height: 1.9; color: var(--c-text); } .legacy-content.legacy-content .page-full-content td, .legacy-content.legacy-content .page-full-content th { line-height: 1.7; } .legacy-content.legacy-content .section-box-header { margin-bottom: 40px; } .legacy-content.legacy-content .section-description { text-decoration: none !important; } /* CSS cũ gạch chân ở khối bọc, độ ưu tiên cao */ .legacy-content.legacy-content h2.section-description, .legacy-content.legacy-content .section-description h2 { text-decoration: none; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 700; line-height: 1.5; letter-spacing: .04em; } .legacy-content.legacy-content h2.section-description::after, .legacy-content.legacy-content .section-description h2::after { content: ""; display: block; width: 40px; height: 3px; margin: 16px auto 0; background: var(--c-brand); } .legacy-content.legacy-content h3 { font-size: 1.25rem; line-height: 1.5; } /* Màu viết thẳng trong nội dung (style="...") → bảng màu GS */ .legacy-content [style*="e6f8ff"], .legacy-content [style*="def4fb"], .legacy-content [style*="E6F8FF"] { background-color: var(--c-pale) !important; } .legacy-content [style*="8dc642"], .legacy-content [style*="8ac43d"], .legacy-content [style*="8DC642"] { color: var(--c-brand-strong) !important; } .legacy-content [style*="background: #8fc934"], .legacy-content [style*="background:#8fc934"] { background: var(--c-brand-strong) !important; } .legacy-content [style*="2c3e50"] { color: var(--c-text) !important; } .legacy-content [style*="7f8c8d"] { color: var(--c-muted) !important; } /* Link trong nội dung */ .legacy-content.legacy-content .page-full-content a:not([class*="btn"]):not(.wp-block-button__link) { color: var(--c-brand-strong); } /* ---------- Section chuẩn trang dịch vụ ---------- */ .svc-content { padding-left: 0; padding-right: 0; } .svc-content > .alignfull { margin-top: 0 !important; margin-bottom: 0 !important; } .gsjp-note { color: var(--c-muted); font-size: .875rem; margin-top: 24px !important; } .gsjp-center-text { text-align: center; } /* Giới thiệu dịch vụ (翻訳サービスとは？) + chất lượng */ .gsjp-about { display: grid; grid-template-columns: 420px 1fr; gap: 48px; align-items: center; } .gsjp-about > * { margin: 0 !important; } .gsjp-about__img img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 12px; box-shadow: 0 16px 40px rgba(79, 115, 23, .14); } .gsjp-about__body > * { margin: 0 !important; } .gsjp-about__body .gsjp-about__title { margin-top: 4px !important; margin-bottom: 18px !important; font-size: var(--wp--preset--font-size--xx-large); } .gsjp-about__body p:not(.eyebrow) + p { margin-top: 14px !important; } .gsjp-about__body p:not(.eyebrow) { line-height: 2; } .gsjp-quality { margin-top: 48px !important; padding: 28px 32px; background: #fff; border: 1px solid var(--c-line); border-radius: 4px; } .gsjp-quality > * { margin: 0 !important; } .gsjp-quality .gsjp-about__subtitle { font-size: 1.25rem; margin-bottom: 12px !important; } .gsjp-quality p + p { margin-top: 10px !important; } .gsjp-quality p { font-size: .9375rem; line-height: 2; color: var(--c-muted); word-break: auto-phrase; } @media (max-width: 899px) { .gsjp-about { grid-template-columns: 1fr; gap: 24px; } .gsjp-quality { padding: 22px 18px; } } /* Mục lục trong trang: khung 「目次」 dạng lưới ô nút ▼ (giống bản cũ, làm gọn lại) */ .page-nav { position: relative; z-index: 2; margin-top: -28px; padding: 0 var(--gutter); background: linear-gradient(to bottom, transparent 0 28px, var(--c-pale) 28px); } .page-nav__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: var(--w-content); margin: 0 auto; padding: 20px; list-style: none; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(79, 115, 23, .12); } .page-nav__list a { position: relative; display: flex; align-items: center; min-height: 48px; padding: 0 36px 0 16px; border-radius: 6px; background: var(--c-pale); border: 1px solid #e2ecd2; color: var(--c-text); font-size: .875rem; font-weight: 700; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; } .page-nav__list a::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 2px solid var(--c-brand-strong); border-bottom: 2px solid var(--c-brand-strong); transform: rotate(45deg); } .page-nav__list a:hover { background: var(--c-brand-strong); border-color: var(--c-brand-strong); color: #fff; } .page-nav__list a:hover::after { border-color: #fff; } .svc-content [id] { scroll-margin-top: calc(var(--header-total, 104px) + 16px); } @media (max-width: 767px) { .page-nav { margin-top: -20px; background: linear-gradient(to bottom, transparent 0 20px, var(--c-pale) 20px); } .page-nav__list { grid-template-columns: 1fr 1fr; padding: 12px; gap: 6px; } .page-nav__list a { min-height: 44px; padding: 0 28px 0 12px; font-size: .8125rem; } .page-nav__list a::after { right: 12px; } } /* Giới thiệu dịch vụ (翻訳サービスとは？) + chất lượng */ .gsjp-about { display: grid; grid-template-columns: 420px 1fr; gap: 48px; align-items: center; } .gsjp-about > * { margin: 0 !important; } .gsjp-about__img img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 12px; box-shadow: 0 16px 40px rgba(79, 115, 23, .14); } .gsjp-about__body > * { margin: 0 !important; } .gsjp-about__body .gsjp-about__title { margin-top: 4px !important; margin-bottom: 18px !important; font-size: var(--wp--preset--font-size--xx-large); } .gsjp-about__body p:not(.eyebrow) + p { margin-top: 14px !important; } .gsjp-about__body p:not(.eyebrow) { line-height: 2; } .gsjp-quality { margin-top: 48px !important; padding: 28px 32px; background: #fff; border: 1px solid var(--c-line); border-radius: 4px; } .gsjp-quality > * { margin: 0 !important; } .gsjp-quality .gsjp-about__subtitle { font-size: 1.25rem; margin-bottom: 12px !important; } .gsjp-quality p + p { margin-top: 10px !important; } .gsjp-quality p { font-size: .9375rem; line-height: 2; color: var(--c-muted); word-break: auto-phrase; } @media (max-width: 899px) { .gsjp-about { grid-template-columns: 1fr; gap: 24px; } .gsjp-quality { padding: 22px 18px; } } /* POINT 01/02/03 so le (zigzag) */ .gsjp-points { display: grid; gap: 64px; } .gsjp-points > * { margin: 0 !important; } .gsjp-point { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; } .gsjp-point > * { margin: 0 !important; } .gsjp-point:nth-child(even) .gsjp-point__img { order: 2; } .gsjp-point__img { position: relative; } .gsjp-point__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; } .gsjp-point__img::after { /* khối màu lệch phía sau ảnh */ content: ''; position: absolute; z-index: -1; inset: 18px -18px -18px 18px; border-radius: 12px; background: var(--c-pale); } .gsjp-point:nth-child(even) .gsjp-point__img::after { inset: 18px 18px -18px -18px; } .gsjp-point__body > * { margin: 0 !important; } .gsjp-point .gsjp-point__no { display: flex; align-items: baseline; gap: 8px; font-family: var(--f-en); font-size: .875rem; font-weight: 700; letter-spacing: .14em; color: var(--c-brand-strong); } .gsjp-point__no strong { font-size: 3.5rem; line-height: 1; letter-spacing: 0; color: var(--c-brand); } .gsjp-point__no::after { content: ''; flex: 1; height: 1px; background: #d7e5c1; align-self: center; } .gsjp-point h3 { margin-top: 14px !important; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height: 1.5; } .gsjp-point__body p:last-child { margin-top: 14px !important; line-height: 2; color: var(--c-muted); } @media (max-width: 899px) { .gsjp-points { gap: 48px; } .gsjp-point { grid-template-columns: 1fr; gap: 28px; } .gsjp-point:nth-child(even) .gsjp-point__img { order: 0; } .gsjp-point__img::after, .gsjp-point:nth-child(even) .gsjp-point__img::after { inset: 12px -10px -12px 10px; } .gsjp-point__no strong { font-size: 2.75rem; } } /* Bản gọn của POINT so le (ảnh nhỏ hơn) */ .gsjp-points--compact .gsjp-points { gap: 40px; max-width: 960px; margin: 0 auto; } .gsjp-points--compact .gsjp-point { grid-template-columns: 250px minmax(0, 1fr); gap: 32px; } .gsjp-points--compact .gsjp-point:nth-child(even) { grid-template-columns: minmax(0, 1fr) 250px; } .gsjp-points--compact .gsjp-point__img img { aspect-ratio: 1; } .gsjp-points--compact .gsjp-point__no strong { font-size: 2.5rem; } .gsjp-points--compact .gsjp-point h3 { font-size: 1.25rem; } .gsjp-points--compact .gsjp-point__body p:last-child { font-size: .9375rem; } @media (max-width: 899px) { .gsjp-points--compact .gsjp-points { gap: 28px; } .gsjp-points--compact .gsjp-point { grid-template-columns: 176px minmax(0, 1fr); gap: 24px; align-items: start; } .gsjp-points--compact .gsjp-point:nth-child(even) { grid-template-columns: minmax(0, 1fr) 176px; } .gsjp-points--compact .gsjp-point:nth-child(even) .gsjp-point__img { order: 2; } .gsjp-points--compact .gsjp-point__img { max-width: none; } } @media (max-width: 599px) { .gsjp-points--compact .gsjp-point { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; } .gsjp-points--compact .gsjp-point:nth-child(even) { grid-template-columns: minmax(0, 1fr) 96px; } .gsjp-points--compact .gsjp-point__img img { border-radius: 8px; } .gsjp-points--compact .gsjp-point__img::after, .gsjp-points--compact .gsjp-point:nth-child(even) .gsjp-point__img::after { inset: 6px -4px -6px 4px; } .gsjp-points--compact .gsjp-point:nth-child(even) .gsjp-point__img::after { inset: 6px 4px -6px -4px; } .gsjp-points--compact .gsjp-point__no { gap: 5px; font-size: .75rem; } .gsjp-points--compact .gsjp-point__no strong { font-size: 1.75rem; } .gsjp-points--compact .gsjp-point h3 { margin-top: 8px !important; font-size: 1.0625rem; line-height: 1.5; } .gsjp-points--compact .gsjp-point__body p:last-child { margin-top: 8px !important; font-size: .875rem; line-height: 1.7; } } /* Sơ đồ quy trình chất lượng (3 bước ngang) */ .gsjp-process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin: 8px 0 24px !important; } .gsjp-process > * { margin: 0 !important; } .gsjp-process__step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 12px 18px; background: var(--c-pale); border-radius: 4px; } .gsjp-process__step > * { margin: 0 !important; } .gsjp-process__step:not(:last-child)::after { content: ''; position: absolute; right: -28px; top: 50%; translate: 0 -50%; border: 9px solid transparent; border-left: 12px solid var(--c-brand); } .gsjp-process .gsjp-process__icon { width: 40px; height: 40px; border: 1px solid #e2ecd2; border-radius: 4px; background: #fff; display: grid; place-items: center; } .gsjp-process__icon img { width: 24px; height: 24px; } .gsjp-process .gsjp-process__label { margin-top: 10px !important; font-family: var(--f-en); font-size: .6875rem; font-weight: 700; letter-spacing: .12em; color: var(--c-brand-strong); } .gsjp-process .gsjp-process__title { margin-top: 2px !important; font-size: 1rem; font-weight: 700; color: var(--c-text); line-height: 1.5; } @media (max-width: 767px) { .gsjp-process { grid-template-columns: 1fr; gap: 22px; } .gsjp-process__step:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -22px; translate: -50% 0; border: 9px solid transparent; border-top: 12px solid var(--c-brand); } } /* Khối chữ, điều kiện, bảng Ninja, ảnh lớn */ .gsjp-textblock { max-width: 900px; margin: 0 auto !important; } .gsjp-textblock p { line-height: 2; } .gsjp-term { padding: 22px 24px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); } .gsjp-term > * { margin: 0 !important; } .gsjp-term h3 { display: flex; align-items: center; gap: 10px; font-size: 1rem; } .gsjp-term h3 span { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--c-brand-strong); color: #fff; font-family: var(--f-en); font-size: .8125rem; } .gsjp-term ul, .gsjp-term p { margin-top: 10px !important; font-size: .875rem; line-height: 1.85; color: var(--c-muted); } .gsjp-term ul { padding-left: 1.2em; } .is-pale .gsjp-term { border-color: transparent; } .gsjp-ninja + .gsjp-ninja { margin-top: 36px !important; } .gsjp-ninja > * { margin: 0 !important; } .gsjp-ninja .gsjp-tablehead { margin-bottom: 6px !important; font-size: 1.125rem; padding-left: 12px; border-left: 4px solid var(--c-brand); } .gsjp-ninja .gsjp-tablenote { margin-bottom: 12px !important; font-size: .8125rem; color: var(--c-muted); } .gsjp-ninja table { width: 100%; border-collapse: collapse; font-size: .9375rem; background: #fff; } .gsjp-ninja th, .gsjp-ninja td { padding: 12px 14px !important; border: 1px solid var(--c-line) !important; } .gsjp-ninja thead th { background: var(--c-brand-strong) !important; color: #fff !important; } .gsjp-ninja .footable_parent { overflow-x: auto; } .gsjp-figure { max-width: 1000px; margin: 0 auto !important; } .gsjp-figure img { width: 100%; border-radius: 8px; } /* Lưới ảnh dự án (事例) */ .gsjp-case { margin: 0 !important; } .gsjp-case > * { margin: 0 !important; } .gsjp-case__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid var(--c-line); } .gsjp-case .gsjp-case__url { margin-top: 8px !important; font-family: var(--f-en); font-size: .75rem; color: var(--c-muted); word-break: break-all; } /* Quy trình 4 bước */ .gsjp-process:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); gap: 28px; } @media (max-width: 767px) { .gsjp-process:has(> :nth-child(4)) { grid-template-columns: 1fr 1fr; } .gsjp-process:has(> :nth-child(4)) .gsjp-process__step::after { display: none; } } /* Thẻ có ảnh/icon */ .gsjp-imgcard { padding: 24px 22px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); text-align: center; } .gsjp-imgcard > * { margin: 0 !important; } .gsjp-imgcard__img img { width: 88px; height: 88px; object-fit: contain; } .gsjp-imgcard__img.is-photo img, .gsjp-imgcards--photo .gsjp-imgcard__img img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; } .gsjp-imgcard h3 { margin-top: 14px !important; font-size: 1.0625rem; } .gsjp-imgcard p { margin-top: 10px !important; font-size: .875rem; line-height: 1.85; color: var(--c-muted); text-align: left; } .is-pale .gsjp-imgcard { border-color: transparent; } /* Đặc trưng 01/02/03 */ .gsjp-feature { position: relative; padding: 32px 28px 28px; background: #fff; border: 1px solid var(--c-line); border-top: 4px solid var(--c-brand); border-radius: 0 0 var(--radius) var(--radius); } .gsjp-feature > * { margin: 0 !important; } .gsjp-feature .gsjp-feature__no { font-family: var(--f-en); font-size: 2.5rem; font-weight: 700; line-height: 1; color: var(--c-brand); opacity: .9; } .gsjp-feature h3 { margin-top: 12px !important; font-size: 1.125rem; line-height: 1.6; } .gsjp-feature p:last-child { margin-top: 10px !important; font-size: .9375rem; color: var(--c-muted); } /* Chip ngôn ngữ theo khu vực */ .gsjp-chipgroups { display: grid; gap: 0; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); } .gsjp-chipgroups > * { margin: 0 !important; } .gsjp-chipgroup { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 16px; padding: 18px 24px; } .gsjp-chipgroup + .gsjp-chipgroup { border-top: 1px solid var(--c-line); } .gsjp-chipgroup > * { margin: 0 !important; } .gsjp-chipgroup .gsjp-chipgroup__name { font-size: 1rem; color: var(--c-brand-strong); } .gsjp-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .gsjp-chips a, .gsjp-chips li:not(:has(a)) { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--c-pale); color: var(--c-text); text-decoration: none; font-size: .9375rem; transition: background-color .2s, color .2s; } .gsjp-chips a:hover { background: var(--c-brand-strong); color: #fff; } @media (max-width: 599px) { .gsjp-chipgroup { grid-template-columns: 1fr; gap: 8px; padding: 16px; } } /* Thẻ thông tin (lĩnh vực / ngành) */ .gsjp-infocard { padding: 20px 22px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); } .gsjp-infocard > * { margin: 0 !important; } .gsjp-infocard h3 { display: flex; align-items: center; gap: 8px; font-size: 1rem; line-height: 1.5; } .gsjp-infocard h3::before { content: ""; width: 4px; height: 1.1em; background: var(--c-brand); border-radius: 2px; flex: none; } .gsjp-infocard p { margin-top: 8px !important; font-size: .875rem; line-height: 1.8; color: var(--c-muted); } .is-pale .gsjp-infocard { border-color: transparent; } /* Bảng giá Ninja Tables + bảng thời gian giao */ .gsjp-svc-price .footable_parent, .gsjp-svc-price .ninja_table_wrapper { background: #fff; border-radius: var(--radius); overflow: hidden; } .gsjp-svc-price table, .gsjp-leadtime table { width: 100%; border-collapse: collapse; font-size: .9375rem; background: #fff; } .gsjp-svc-price th, .gsjp-svc-price td, .gsjp-leadtime th, .gsjp-leadtime td { padding: 12px 14px !important; border: 1px solid var(--c-line) !important; text-align: center; } .gsjp-svc-price thead th, .gsjp-leadtime thead th { background: var(--c-brand-strong) !important; color: #fff !important; font-weight: 700; } .gsjp-svc-price tbody tr:nth-child(even) td, .gsjp-leadtime tbody tr:nth-child(even) td { background: #fafcf6; } .gsjp-svc-price td:first-child, .gsjp-leadtime td:first-child { font-weight: 700; } .gsjp-leadtime { margin-top: 32px !important; overflow-x: auto; } .gsjp-leadtime thead, .gsjp-leadtime tfoot, .post-body .wp-block-table thead { border: 0; } /* bỏ viền 3px mặc định của WP */ .gsjp-notes { margin-top: 20px !important; padding-left: 1.2em; font-size: .8125rem; color: var(--c-muted); } .gsjp-notes li { margin-bottom: 4px; } /* Gói dịch vụ */ .gsjp-plan { position: relative; padding: 28px 24px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); text-align: center; } .gsjp-plan > * { margin: 0 !important; } .gsjp-plan h3 { font-size: 1.25rem; } .gsjp-plan .gsjp-plan__for { margin-top: 6px !important; font-size: .875rem; color: var(--c-muted); } .gsjp-plan .gsjp-plan__points { list-style: none; padding: 16px 0 0; margin-top: 16px !important; border-top: 1px dashed var(--c-line); display: grid; gap: 6px; font-size: .9375rem; } .gsjp-plan__points li::before { content: "✓"; display: inline-block; width: 1.4em; color: var(--c-brand-strong); font-weight: 700; } /* Canh trái + cùng bộ hạng mục ở 3 thẻ → dấu ✓ thẳng hàng, so ngang được (gsjp_plans: 「★」 đặc điểm, 「－」 không có) */ .gsjp-plan .gsjp-plan__feature { margin-top: 14px !important; padding: 8px 12px; border-radius: var(--radius); background: var(--c-pale); color: var(--c-deep); font-size: .9375rem; font-weight: 700; } .gsjp-plan .gsjp-plan__points { width: fit-content; margin-inline: auto !important; text-align: left; } .gsjp-plan__points li.is-no { color: #b5b5b5; } .gsjp-plan__points li.is-no::before { content: "—"; color: #c8c8c8; font-weight: 400; } .gsjp-plan.is-recommended { border: 2px solid var(--c-brand-strong); box-shadow: 0 10px 28px rgba(79, 115, 23, .14); } .gsjp-plan .gsjp-plan__badge { position: absolute; top: -14px; left: 50%; translate: -50% 0; padding: 2px 14px; border-radius: 999px; background: var(--c-accent); color: #fff; font-size: .75rem; font-weight: 700; white-space: nowrap; } /* Băng CTA giữa trang */ .gsjp-ctaband { margin-top: 48px !important; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 28px 32px; background: var(--c-pale); border: 2px solid var(--c-brand); border-radius: 10px; } .gsjp-ctaband > * { margin: 0 !important; } .gsjp-ctaband__body > * { margin: 0 !important; } .gsjp-ctaband .gsjp-ctaband__title { font-size: 1.25rem; font-weight: 700; } .gsjp-ctaband .gsjp-ctaband__text { margin-top: 4px !important; font-size: .875rem; color: var(--c-muted); } @media (max-width: 767px) { .gsjp-ctaband { padding: 24px 20px; } .gsjp-ctaband__btn, .gsjp-ctaband__btn .wp-block-button, .gsjp-ctaband__btn .wp-block-button__link { width: 100%; } } /* Thành tích */ .gsjp-works__img { max-width: 760px; margin: 0 auto 8px !important; } .gsjp-works__img img { width: 100%; border-radius: var(--radius); } /* Quy trình — PC: dòng thời gian ngang (vòng tròn icon nối bằng đường kẻ); mobile: dòng thời gian dọc */ .gsjp-flow { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; max-width: 1080px; margin: 0 auto !important; } .gsjp-svc-flow > .gsjp-head { margin-bottom: 72px; } .gsjp-svc-flow > .gsjp-head h2 { max-width: 1120px; margin-inline: auto; } .svc-content .gsjp-head h2 { word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; } .gsjp-flow::before { /* đường nối qua tâm các vòng tròn */ content: ""; position: absolute; top: 40px; left: 6%; right: 6%; height: 2px; background: repeating-linear-gradient(90deg, var(--c-brand) 0 8px, transparent 8px 14px); } .gsjp-flow > * { margin: 0 !important; } .gsjp-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; } .gsjp-step > * { margin: 0 !important; } .gsjp-step .gsjp-step__icon { order: -1; position: relative; z-index: 1; width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--c-brand); box-shadow: 0 0 0 6px var(--c-pale); } .gsjp-step__icon img { width: 36px; height: 36px; } .gsjp-step .gsjp-step__no { margin-top: 16px !important; font-family: var(--f-en); font-size: .6875rem; font-weight: 700; letter-spacing: .12em; color: var(--c-brand-strong); } .gsjp-step__no strong { margin-left: 3px; font-size: .9375rem; } .gsjp-step h3 { margin-top: 4px !important; font-size: .9375rem; line-height: 1.5; letter-spacing: .02em; } .gsjp-step .gsjp-step__note { margin-top: 8px !important; font-size: .75rem; line-height: 1.7; color: var(--c-muted); text-align: center; } .gsjp-step:last-child .gsjp-step__icon { background: var(--c-brand-strong); } .gsjp-step:last-child .gsjp-step__icon img { filter: brightness(0) invert(1); } @media (max-width: 1023px) { .gsjp-flow { grid-auto-flow: row; grid-template-columns: 1fr; gap: 0; max-width: 560px; } .gsjp-flow::before { top: 30px; bottom: 30px; left: 29px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--c-brand) 0 8px, transparent 8px 14px); } .gsjp-step { display: grid; grid-template-columns: 60px 1fr; column-gap: 16px; align-items: start; padding-bottom: 22px; text-align: left; } .gsjp-step .gsjp-step__icon { grid-row: 1 / span 3; width: 60px; height: 60px; box-shadow: 0 0 0 4px var(--c-pale); } .gsjp-step__icon img { width: 28px; height: 28px; } .gsjp-step .gsjp-step__no { grid-column: 2; margin-top: 6px !important; } .gsjp-step h3 { grid-column: 2; font-size: 1rem; } .gsjp-step .gsjp-step__note { grid-column: 2; font-size: .8125rem; text-align: left; } } @media (max-width: 767px) { .gsjp-svc-flow > .gsjp-head { margin-bottom: 40px; } } /* Lời nhắn người phụ trách */ .gsjp-message { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center; max-width: 900px; margin: 0 auto !important; } .gsjp-message > * { margin: 0 !important; } .gsjp-message__photo img { width: 220px; height: 220px; object-fit: cover; border-radius: 50%; border: 6px solid var(--c-pale); } .gsjp-message__body > * { margin: 0 !important; } .gsjp-message .gsjp-message__role { font-size: .8125rem; color: var(--c-brand-strong); font-weight: 700; } .gsjp-message h3 { margin-top: 4px !important; font-family: var(--f-en); font-size: 1.375rem; letter-spacing: .06em; } .gsjp-message .gsjp-message__text { margin-top: 12px !important; line-height: 2; word-break: auto-phrase; } .gsjp-message .gsjp-message__text:first-of-type { margin-top: 16px !important; } @media (max-width: 767px) { .gsjp-message { grid-template-columns: 1fr; gap: 20px; text-align: center; } .gsjp-message__photo { justify-self: center; } .gsjp-message .gsjp-message__text { text-align: left; } } /* FAQ mở/đóng */ .gsjp-faq { display: grid; gap: 12px; max-width: 900px; margin: 0 auto !important; } .gsjp-faq > * { margin: 0 !important; } .gsjp-svc-faq > .gsjp-head { margin-bottom: 32px !important; } .gsjp-faq__item { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); } .gsjp-faq__item summary { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 18px 56px 18px 20px; cursor: pointer; list-style: none; font-weight: 700; line-height: 1.6; } .gsjp-faq__item summary::-webkit-details-marker { display: none; } .gsjp-faq__item summary::before { content: "Q"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-brand-strong); color: #fff; font-family: var(--f-en); font-size: .875rem; } .gsjp-faq__item summary::after { content: ""; position: absolute; right: 22px; top: 26px; width: 9px; height: 9px; border-right: 2px solid var(--c-brand-strong); border-bottom: 2px solid var(--c-brand-strong); transform: rotate(45deg); transition: transform .2s; } .gsjp-faq__item[open] summary::after { transform: rotate(-135deg); top: 30px; } .gsjp-faq__item > p { position: relative; margin: 0 !important; padding: 0 20px 20px 60px; color: var(--c-muted); line-height: 1.9; } .gsjp-faq__item > p::before { content: "A"; position: absolute; left: 20px; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-accent); color: #fff; font-family: var(--f-en); font-size: .875rem; } /* Icon cho thẻ đặc trưng / lĩnh vực / số liệu */ .gsjp-feature { display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; align-items: center; align-content: start; } .gsjp-feature > :not(.gsjp-feature__icon):not(.gsjp-feature__no) { grid-column: 1 / -1; } .gsjp-feature .gsjp-feature__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--c-pale); display: grid; place-items: center; } .gsjp-feature__icon img { width: 38px; height: 38px; } .gsjp-feature:has(.gsjp-feature__icon) .gsjp-feature__no { justify-self: end; align-self: start; font-size: 2rem; color: #d7e5c1; } .gsjp-feature:has(.gsjp-feature__icon) h3 { margin-top: 18px !important; } .gsjp-infocard.has-icon { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: center; align-content: start; } .gsjp-infocard.has-icon > p { grid-column: 1 / -1; } .gsjp-infocard .gsjp-infocard__icon { width: 44px; height: 44px; border-radius: 10px; background: var(--c-pale); display: grid; place-items: center; } .gsjp-infocard__icon img { width: 26px; height: 26px; } .gsjp-infocard.has-icon h3::before { display: none; } .gsjp-infocard.has-icon p { margin-top: 12px !important; } .is-pale .gsjp-infocard__icon { background: #fff; border: 1px solid #e2ecd2; } /* Thẻ có trang riêng: cả thẻ bấm được + "詳しく見る" */ .gsjp-infocard.has-link { position: relative; padding-bottom: 44px; transition: border-color .2s, box-shadow .2s, transform .2s; } .gsjp-infocard.has-link h3 a { color: var(--c-text); text-decoration: none; } .gsjp-infocard.has-link h3 a::after { content: ""; position: absolute; inset: 0; } .gsjp-infocard.has-link::after { content: "詳しく見る"; position: absolute; right: 18px; bottom: 14px; padding-right: 18px; font-size: .75rem; font-weight: 700; color: var(--c-brand-strong); background: no-repeat right center / 12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23567a1a'%3E%3Cpath d='M13.2 5.3 19.9 12l-6.7 6.7-1.4-1.4 4.3-4.3H4v-2h12.1l-4.3-4.3 1.4-1.4Z'/%3E%3C/svg%3E"); } .gsjp-infocard.has-link:hover { border-color: var(--c-brand); box-shadow: 0 8px 20px rgba(0, 0, 0, .07); transform: translateY(-2px); } .gsjp-infocard.has-link:hover h3 a { color: var(--c-brand-strong); } .gsjp-statcard { padding: 28px 22px 24px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); text-align: center; } .gsjp-statcard > * { margin: 0 !important; } .gsjp-statcard .gsjp-statcard__icon { width: 72px; height: 72px; margin: 0 auto !important; border-radius: 50%; background: var(--c-pale); display: grid; place-items: center; } .gsjp-statcard__icon img { width: 38px; height: 38px; } .gsjp-statcard h3 { margin-top: 14px !important; font-size: 1.0625rem; } .gsjp-statcard .gsjp-statcard__rows { list-style: none; padding: 14px 0 0; margin-top: 14px !important; border-top: 1px dashed var(--c-line); display: grid; gap: 10px; } .gsjp-statcard__rows li { font-size: .8125rem; color: var(--c-muted); line-height: 1.4; } .gsjp-statcard__rows strong { font-family: var(--f-en); font-size: 1.625rem; color: var(--c-brand-strong); letter-spacing: .01em; font-variant-numeric: tabular-nums; } .gsjp-statcard__label { display: block; font-size: .75rem; } .gsjp-statcard__rows strong { margin-right: 2px; } .gsjp-statcards { margin-bottom: 32px !important; } /* Cờ trong chip ngôn ngữ (assets/img/flags/{mã}.webp, gắn qua class flag-{mã}) */ .gsjp-chips li[class*="flag-"] > a, .gsjp-chips li[class*="flag-"]:not(:has(a)) { gap: 8px; padding-left: 6px; } .gsjp-chips li[class*="flag-"] > a::before, .gsjp-chips li[class*="flag-"]:not(:has(a))::before { content: ""; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--flag) center / cover no-repeat; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); } .gsjp-chips .flag-vi { --flag: url("../img/flags/vi.webp"); } .gsjp-chips .flag-jp { --flag: url("../img/flags/jp.svg"); } .gsjp-chips .flag-en { --flag: url("../img/flags/en.webp"); } .gsjp-chips .flag-th { --flag: url("../img/flags/th.webp"); } .gsjp-chips .flag-id { --flag: url("../img/flags/id.webp"); } .gsjp-chips .flag-ms { --flag: url("../img/flags/ms.webp"); } .gsjp-chips .flag-lo { --flag: url("../img/flags/lo.webp"); } .gsjp-chips .flag-tl { --flag: url("../img/flags/tl.webp"); } .gsjp-chips .flag-km { --flag: url("../img/flags/km.webp"); } .gsjp-chips .flag-ne { --flag: url("../img/flags/ne.webp"); } .gsjp-chips .flag-my { --flag: url("../img/flags/my.webp"); } .gsjp-chips .flag-ko { --flag: url("../img/flags/ko.webp"); } .gsjp-chips .flag-zh { --flag: url("../img/flags/zh.webp"); } .gsjp-chips .flag-hi { --flag: url("../img/flags/hi.webp"); } .gsjp-chips .flag-ta { --flag: url("../img/flags/ta.webp"); } .gsjp-chips .flag-ur { --flag: url("../img/flags/ur.webp"); } .gsjp-chips .flag-kk { --flag: url("../img/flags/kk.webp"); } .gsjp-chips .flag-ky { --flag: url("../img/flags/ky.webp"); } .gsjp-chips .flag-ru { --flag: url("../img/flags/ru.webp"); } .gsjp-chips .flag-tg { --flag: url("../img/flags/tg.webp"); } .gsjp-chips .flag-tk { --flag: url("../img/flags/tk.webp"); } .gsjp-chips .flag-uk { --flag: url("../img/flags/uk.webp"); } .gsjp-chips .flag-uz { --flag: url("../img/flags/uz.webp"); } /* Thẻ ngành (よくご依頼いただく業種): icon trắng trong vòng tròn xanh đậm, viền trái màu */ .gsjp-infocards--industry .gsjp-infocard { border: 0; border-left: 4px solid var(--c-brand); box-shadow: 0 4px 16px rgba(79, 115, 23, .07); padding: 22px 22px 22px 20px; transition: transform .2s, box-shadow .2s; } .gsjp-infocards--industry .gsjp-infocard:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(79, 115, 23, .12); } .gsjp-infocards--industry .gsjp-infocard.has-icon { grid-template-columns: 52px 1fr; column-gap: 14px; } .gsjp-infocards--industry .gsjp-infocard__icon { width: 52px; height: 52px; border-radius: 50%; border: 0; background: linear-gradient(135deg, var(--c-brand), var(--c-brand-strong)); } .gsjp-infocards--industry .gsjp-infocard__icon img { width: 28px; height: 28px; filter: brightness(0) invert(1); } .gsjp-infocards--industry .gsjp-infocard h3 { font-size: 1.0625rem; } .gsjp-infocards--industry .gsjp-infocard p { margin-top: 14px !important; } /* サービスの業種紹介は小さな角丸とフラットな線で整える */ .gsjp-infocards--industry .gsjp-infocard { padding: 20px; background: #fff; border: 1px solid var(--c-line); border-radius: 4px; box-shadow: none; transition: none; } .gsjp-infocards--industry .gsjp-infocard:hover { transform: none; box-shadow: none; } .gsjp-infocards--industry .gsjp-infocard.has-icon { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; } .gsjp-infocards--industry .gsjp-infocard__icon { width: 40px; height: 40px; border: 1px solid #e2ecd2; border-radius: 4px; background: var(--c-pale); } .gsjp-infocards--industry .gsjp-infocard__icon img { width: 24px; height: 24px; filter: none; } .gsjp-infocards--industry .gsjp-infocard h3 { display: block; font-size: 1rem; line-height: 1.7; } .gsjp-infocards--industry .gsjp-infocard h3::before { display: none; } .gsjp-infocards--industry .gsjp-infocard p { margin-top: 12px !important; font-size: .9375rem; line-height: 1.9; } html { scroll-behavior: smooth; } .legacy-content { overflow-x: clip; } .anchor-nav { max-width: 1000px; margin: 32px auto; padding: 0 var(--gutter); } .anchor-nav ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; list-style: none; margin: 0; padding: 0; } nav.anchor-nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 8px 16px; background: var(--c-pale); border: 1px solid #dfe9cf; border-radius: 4px; color: var(--c-text); font-size: .875rem; font-weight: 500; text-decoration: none; transition: background-color .2s, color .2s; } nav.anchor-nav a::after { content: ""; flex: none; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid var(--c-brand-strong); border-bottom: 2px solid var(--c-brand-strong); transform: rotate(45deg); } nav.anchor-nav a:hover { background: var(--c-brand-strong); color: #fff; } nav.anchor-nav a:hover::after { border-color: #fff; } @media (max-width: 767px) { .anchor-nav ul { grid-template-columns: 1fr 1fr; } .anchor-nav a { font-size: .8125rem; } } .legacy-content .gsjp-logos { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); } /* ---------- Vùng bấm tối thiểu ~44px trên màn hình cảm ứng ---------- */ @media (max-width: 1023px) { .lang-switch a, .lang-switch span { min-height: 40px; display: flex; align-items: center; padding: 0 12px; } .site-header__bar .site-header__inner { min-height: 40px; } .header-cta { min-height: 44px; min-width: 44px; } .gsjp-region__langs a { display: flex; align-items: center; min-height: 40px; } .gsjp-region .gsjp-region__langs { gap: 0 12px; } .gsjp-region__langs li::before { top: 50%; translate: 0 -50%; } .site-footer__nav a, .site-footer__company a { display: inline-flex; align-items: center; min-height: 40px; } .site-footer__nav ul ul li { margin-bottom: 0; } } /* ---------- Motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* ---------- 翻訳実績: 数字で見る ---------- */ .gsjp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 8px 0 48px !important; } .gsjp-kpis > * { margin: 0 !important; } .gsjp-kpi { padding: 24px 28px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow); } .gsjp-kpi > * { margin: 0 !important; } .gsjp-kpi__num { font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: var(--c-brand-strong); } .gsjp-kpi__num strong { font-family: var(--f-en); font-size: 2.5rem; letter-spacing: .01em; } .gsjp-kpi__label { margin-top: 10px !important; font-size: 1rem; font-weight: 700; } .gsjp-kpi__note { margin-top: 2px !important; font-size: .8125rem; color: var(--c-muted); } .gsjp-fieldstats { margin-bottom: 48px !important; } .gsjp-fieldstat { padding: 22px 20px; background: #fff; border: 1px solid var(--c-line); border-top: 4px solid var(--c-brand); border-radius: var(--radius); box-shadow: var(--shadow); } .gsjp-fieldstat > * { margin: 0 !important; } .gsjp-fieldstat__head { display: flex; align-items: center; gap: 10px; } .gsjp-fieldstat__head > * { margin: 0 !important; } .gsjp-fieldstat .gsjp-fieldstat__icon { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--c-pale); display: grid; place-items: center; } .gsjp-fieldstat__icon img { width: 24px; height: 24px; } .gsjp-fieldstat h3 { font-size: 1rem; } .gsjp-fieldstat__total { white-space: nowrap; margin-top: 16px !important; font-size: .875rem; font-weight: 700; color: var(--c-muted); } .gsjp-fieldstat__total strong { display: inline-block; margin: 2px 4px 0 0; font-family: var(--f-en); font-size: 2rem; line-height: 1.15; color: var(--c-brand-strong); font-variant-numeric: tabular-nums; } .gsjp-fieldstat__bar { height: 8px; margin-top: 12px !important; border-radius: 4px; background: #d9e6c4; overflow: hidden; } .gsjp-fieldstat__bar span { display: block; height: 100%; background: var(--c-brand); } .gsjp-fieldstat .gsjp-fieldstat__rows { list-style: none; padding: 0; margin-top: 10px !important; display: grid; gap: 4px; font-size: .8125rem; color: var(--c-muted); } .gsjp-fieldstat__rows li { display: flex; align-items: baseline; gap: 4px; font-size: .75rem; white-space: nowrap; } .gsjp-fieldstat__rows li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: #d9e6c4; flex: none; align-self: center; } .gsjp-fieldstat__rows li.is-vi::before { background: var(--c-brand); } .gsjp-fieldstat__rows span { flex: 1; } .gsjp-fieldstat__rows b { font-family: var(--f-en); color: var(--c-text); } .gsjp-cases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 32px !important; } .gsjp-cases > * { margin: 0 !important; } .gsjp-case { display: flex; flex-direction: column; padding: 16px 18px; background: var(--c-pale); border-radius: var(--radius); } .gsjp-case > * { margin: 0 !important; } .gsjp-case__tag { align-self: flex-start; padding: 2px 10px; border-radius: 99px; background: #fff; color: var(--c-brand-strong); font-size: .75rem; font-weight: 700; } .gsjp-case h4 { margin-top: 10px !important; font-size: .9375rem; line-height: 1.5; flex: 1; } .gsjp-case__meta { margin-top: 10px !important; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .75rem; color: var(--c-muted); border-top: 1px solid #d9e6c4; padding-top: 8px; } .gsjp-case__meta strong { font-family: var(--f-en); font-size: 1.0625rem; color: var(--c-brand-strong); white-space: nowrap; } @media (max-width: 960px) { .gsjp-cases { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .gsjp-kpis { grid-template-columns: 1fr; gap: 12px; } .gsjp-kpi { padding: 18px 20px; } .gsjp-cases { grid-template-columns: 1fr; } } /* Danh sách đánh số trong mô tả POINT: tách ý rõ, giữ độ thoáng trên mobile. */ .gsjp-point__body .gsjp-point__list { margin: 12px 0 0 !important; padding-left: 1.6em; color: var(--c-muted); line-height: 1.85; } .gsjp-point__list li + li { margin-top: 8px; } @media (max-width: 599px) { .gsjp-point__body .gsjp-point__list { margin-top: 8px !important; font-size: .875rem; line-height: 1.7; } .gsjp-point__list li + li { margin-top: 6px; } } /* Trang chủ — 10 dịch vụ chính: 2 cột × 5 hàng, thẻ ngang (icon trái, chữ phải) → chẵn hàng, dòng dài dễ đọc */ .gsjp-services--main { max-width: 1080px; margin-inline: auto !important; --gap: 16px; } .gsjp-services--main .gsjp-service { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; align-content: start; padding: 22px 24px 18px; } .gsjp-services--main .gsjp-service > * { grid-column: 2; } .gsjp-services--main .gsjp-service > .gsjp-service__icon { grid-column: 1; grid-row: 1 / span 3; } .gsjp-services--main .gsjp-service__icon img { width: 52px; height: 52px; } .gsjp-services--main .gsjp-service h3 { margin-top: 2px !important; font-size: 1.0625rem; line-height: 1.5; } .gsjp-services--main .gsjp-service p { font-size: .8125rem; line-height: 1.75; } @media (max-width: 767px) { .gsjp-services--main { --cols: 1; } } /* Mobile service pages: keep proof badges visible, tables readable, and long copy full-width. */ @media (max-width: 599px) { .svc-hero__inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; } .svc-hero__text { display: contents; } .svc-hero .breadcrumb { order: 0; } .svc-hero .eyebrow { order: 1; } .svc-hero .svc-hero__title { order: 2; } .svc-hero .svc-hero__catch { order: 3; } .svc-hero .svc-hero__lead { order: 4; } .svc-badges { order: 5; width: 100%; max-width: 360px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .svc-hero .svc-hero__cta { order: 6; margin-top: 18px; gap: 8px !important; } .svc-hero .svc-hero__cta .btn { padding: .85em 1.2em; } .svc-hero .svc-hero__note { order: 7; margin-top: 8px; } .svc-badge { min-width: 0; } .svc-badge__text { max-width: calc(100% - 12px); font-size: .6875rem; line-height: 1.25; overflow-wrap: anywhere; } .svc-badge__text em, .svc-badge.has-laurel .svc-badge__text em { font-size: .875rem; } .gsjp-points--compact .gsjp-point, .gsjp-points--compact .gsjp-point:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 16px; } .gsjp-points--compact .gsjp-point:nth-child(even) .gsjp-point__img { order: 0; } .gsjp-points--compact .gsjp-point__img { width: min(100%, 180px); margin-inline: auto !important; } .gsjp-points--compact .gsjp-point__img::after, .gsjp-points--compact .gsjp-point:nth-child(even) .gsjp-point__img::after { inset: 6px -6px -6px 6px; } .gsjp-points--compact .gsjp-point:nth-child(even) .gsjp-point__img::after { inset: 6px 6px -6px -6px; } .gsjp-svc-price .footable_parent, .gsjp-svc-price .ninja_table_wrapper, .gsjp-svc-price .wp-block-table { overflow-x: auto; overflow-y: hidden; max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; } .gsjp-svc-price table { width: 100%; table-layout: auto; } .gsjp-svc-price th, .gsjp-svc-price td { padding: 8px !important; } .gsjp-svc-price thead th { white-space: nowrap; } .gsjp-svc-price table:has(th:nth-child(3)):not(:has(th:nth-child(5))) td:nth-child(2) { text-align: left; } .gsjp-pricetable__table { overflow: visible !important; } .gsjp-svc-price .wp-block-table:has(table.is-mobile-card-table) { overflow: visible; } .gsjp-pricetable__table table, .gsjp-svc-price table.is-mobile-card-table { display: block; width: 100%; min-width: 0; table-layout: auto; border-collapse: separate !important; } .gsjp-pricetable__table thead, .gsjp-svc-price table.is-mobile-card-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .gsjp-pricetable__table tbody, .gsjp-svc-price table.is-mobile-card-table tbody { display: grid; gap: 10px; } .gsjp-pricetable__table tbody tr, .gsjp-svc-price table.is-mobile-card-table tbody tr { display: block; min-width: 0; border: 1px solid var(--tbl-line); border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgb(31 41 22 / 6%); } .gsjp-pricetable__table tbody td, .gsjp-svc-price table.is-mobile-card-table tbody td { display: grid; grid-template-columns: minmax(6.5rem, 40%) minmax(0, 1fr); align-items: start; gap: 10px; width: 100%; min-width: 0; padding: 10px 12px !important; border: 0 !important; border-bottom: 1px solid var(--tbl-line) !important; text-align: left; white-space: normal !important; overflow-wrap: anywhere; } .gsjp-pricetable__table tbody td:first-child, .gsjp-svc-price table.is-mobile-card-table tbody td:first-child { background: var(--tbl-first-col) !important; } .gsjp-pricetable__table tbody td:last-child, .gsjp-svc-price table.is-mobile-card-table tbody td:last-child { border-bottom: 0 !important; } .gsjp-pricetable__table tbody td::before, .gsjp-svc-price table.is-mobile-card-table tbody td::before { content: attr(data-label); min-width: 0; font-size: .8125rem; font-weight: 700; line-height: 1.5; color: var(--c-brand-strong); } } @media (max-width: 359px) { .sticky-cta__tel { gap: 0; } .sticky-cta__tel svg { display: none; } .sticky-cta a.sticky-cta__tel > span { white-space: normal; min-width: 0; font-size: .625rem; } .sticky-cta__tel b { white-space: nowrap; font-size: .6875rem; } } /* 地域と対応言語: cờ thay ô vuông đầu dòng */ .gsjp-region__langs li { padding-left: 0; } .gsjp-region__langs li::before { display: none; } .gsjp-region__langs li a, .gsjp-region__langs li:not(:has(a)) { display: inline-flex; align-items: center; gap: 10px; } .gsjp-region__langs .gsjp-flag { flex: none; width: 22px; height: 16px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); } /* Dropdown PC: tên dịch vụ 1 dòng */ @media (min-width: 1024px) { .global-nav__list > li > .sub-menu:not(:has(.sub-menu)) a { white-space: nowrap; } } /* Thẻ dịch vụ ngang: "詳しく見る →" sát chữ, nằm dưới mô tả (không dàn hết chiều ngang) */ .gsjp-services--main .gsjp-service::after { grid-column: 2; justify-self: end; align-self: end; width: max-content; } .gsjp-services--main .gsjp-service { grid-template-rows: auto 1fr auto; } .gsjp-services--main .gsjp-service::after { grid-row: 3; } /* ===== 資料ダウンロード (templates/brochure-template.php) ===== */ .page-head__lead { max-width: 720px; margin: 12px auto 0; color: var(--c-muted); font-size: .9375rem; text-align: center; } .bro { max-width: var(--w-content); margin: 0 auto; padding: 56px var(--gutter) 80px; } .bro-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .bro-grid.is-main { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; } .bro-card__link { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; color: var(--c-text); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; } .bro-card__link:hover { border-color: var(--c-brand); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); transform: translateY(-2px); } .bro-card__thumb { display: block; aspect-ratio: 4 / 3; background: var(--c-pale); overflow: hidden; } .bro-card__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; } .bro-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px 18px 18px; } .bro-card__type { font-family: var(--f-en); font-size: .75rem; font-weight: 700; color: #b0362a; letter-spacing: .04em; } .bro-card__title { font-weight: 700; line-height: 1.5; flex: 1; } .bro-card__btn { align-self: flex-start; margin-top: 8px; padding: 8px 14px 8px 34px; border-radius: 6px; background: var(--c-accent) no-repeat 12px center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-5-5m5 5 5-5M4 19h16'/%3E%3C/svg%3E"); color: #fff; font-size: .8125rem; font-weight: 700; } .bro-card.is-company .bro-card__link { flex-direction: row; } .bro-card.is-company .bro-card__thumb { flex: 0 0 46%; aspect-ratio: 4 / 3; } .bro-card.is-company .bro-card__body { justify-content: center; padding: 28px; } .bro-card.is-company .bro-card__title { flex: 0; font-size: 1.375rem; } .bro-subhead { margin: 64px 0 28px; text-align: center; font-size: 1.5rem; } .bro-subhead span { display: block; font-family: var(--f-en); font-size: .75rem; letter-spacing: .2em; color: var(--c-brand); } .bro-cta { margin-top: 64px; padding: 32px; background: var(--c-pale); border-radius: 12px; text-align: center; } .bro-cta__title { margin: 0; font-size: 1.25rem; font-weight: 700; } .bro-cta__text { margin: 8px 0 20px; color: var(--c-muted); } @media (max-width: 1023px) { .bro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { .bro-grid { gap: 16px; } .bro-card.is-company .bro-card__link { flex-direction: column; } .bro-card__body { padding: 12px 14px 14px; } .bro-card__btn { padding: 7px 10px 7px 30px; font-size: .75rem; background-position: 9px center; } } .bro ~ * .page-head__lead, .page-head__lead { margin-left: 0; text-align: left; } .bro-card__btn { white-space: nowrap; } @media (max-width: 599px) { .bro-card__btn { align-self: stretch; text-align: center; padding-left: 28px; } .bro-card__title { font-size: .9375rem; } } .bro-head { margin: 72px 0 48px; } .site-footer__dmca { margin: 0; padding: 16px var(--gutter) 0; text-align: center; } .site-footer__dmca img { display: inline-block; vertical-align: middle; } /* ===== お問い合わせ (templates/contact-*.php) ===== */ .ct { max-width: var(--w-content); margin: 0 auto; padding: 48px var(--gutter) 80px; display: grid; gap: 64px; } .ct .gsjp-head { margin-bottom: 32px; } .ct-intro { display: grid; gap: 24px; padding: 32px; background: #fff; border: 1px solid #dfe6d3; border-radius: 12px; } .ct-intro__lead { margin: 0; font-size: 1rem; line-height: 1.9; text-align: center; } .ct-intro__badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .ct-badge { margin: 0; padding: 16px; background: var(--c-pale); border-radius: 10px; text-align: center; } .ct-badge b { display: block; font-family: var(--f-en); font-size: 1.75rem; color: var(--c-brand-strong); line-height: 1.2; } .ct-badge span { font-size: .875rem; font-weight: 700; } .ct-intro__tel { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 24px; } .ct-intro__tel > a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-en); font-size: 1.75rem; font-weight: 700; color: var(--c-brand-strong); text-decoration: none; } .ct-intro__tel > a .icon { width: 26px; height: 26px; } .ct-intro__tel p { margin: 0; font-size: .8125rem; color: var(--c-muted); line-height: 1.8; } .ct-choose__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .ct-choose__list a { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; row-gap: 6px; align-items: center; padding: 28px; background: #fff; border: 1px solid #dfe6d3; border-radius: 12px; color: var(--c-text); text-decoration: none; transition: border-color .2s, box-shadow .2s; } .ct-choose__list a:hover { border-color: var(--c-brand); box-shadow: 0 8px 24px rgba(0, 0, 0, .07); } .ct-choose__list img { grid-row: 1 / span 3; width: 56px; height: 56px; padding: 10px; border-radius: 50%; background: var(--c-pale); } .ct-choose__title { font-size: 1.25rem; font-weight: 700; } .ct-choose__text { font-size: .875rem; color: var(--c-muted); } .ct-choose__btn { justify-self: start; margin-top: 8px; padding: 10px 20px; border-radius: 6px; background: var(--c-accent); color: #fff; font-size: .875rem; font-weight: 700; } .ct-form__box { max-width: 820px; margin: 0 auto; padding: 32px 36px; background: #fff; border: 1px solid #dfe6d3; border-radius: 12px; } .ct-form__box input[type="text"], .ct-form__box input[type="email"], .ct-form__box input[type="tel"], .ct-form__box input[type="url"], .ct-form__box input[type="number"], .ct-form__box input[type="date"], .ct-form__box select, .ct-form__box textarea { width: 100%; max-width: 100%; padding: 12px 14px; border: 1px solid #cfd8c2; border-radius: 6px; background: #fff; font: inherit; font-size: 16px; } .ct-form__box input:focus, .ct-form__box select:focus, .ct-form__box textarea:focus { outline: 2px solid var(--c-brand); outline-offset: 1px; border-color: var(--c-brand); } .ct-form__box label, .ct-form__box p { line-height: 1.8; } .ct-form__box input[type="submit"], .ct-form__box button[type="submit"] { display: block; min-width: 280px; margin: 16px auto 0; padding: 16px 28px; border: 0; border-radius: 8px; background: var(--c-accent); color: #fff; font: inherit; font-size: 1.0625rem; font-weight: 700; cursor: pointer; } .ct-form__box input[type="submit"]:hover { background: #9e4e07; } .ct-promise__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .ct-promise__list li { padding: 24px 18px; background: #fff; border: 1px solid #dfe6d3; border-radius: 12px; text-align: center; } .ct-promise__list img { width: 56px; height: 56px; object-fit: contain; } .ct-promise__list h3 { margin: 10px 0 6px; font-size: 1.0625rem; } .ct-promise__list p { margin: 0; font-size: .8125rem; line-height: 1.75; color: var(--c-muted); } @media (max-width: 767px) { .ct { gap: 48px; padding-top: 32px; } .ct-intro { padding: 20px; } .ct-intro__badges, .ct-choose__list { grid-template-columns: 1fr; } .ct-promise__list { grid-template-columns: 1fr 1fr; } .ct-form__box { padding: 20px 16px; } .ct-form__box input[type="submit"] { width: 100%; min-width: 0; } } /* Form お問い合わせ: điều khoản 個人情報 trong khung cuộn */ .ct-form__box .policy-desc { margin: 24px 0 10px; font-size: 1.125rem; } .ct-form__box .privacy-policy-content { max-height: 260px; overflow-y: auto; padding: 16px 18px; border: 1px solid #dfe6d3; border-radius: 8px; background: #fafbf7; font-size: .8125rem; line-height: 1.8; } .ct-form__box .privacy-policy-content p { margin: 0 0 .7em; } /* Form CF7 v2: gọn, nhãn trái – ô phải, huy hiệu 必須 / 任意 */ .ct-form__box { padding: 8px 32px 28px; } .ct-form__box .form-group.row { display: grid; grid-template-columns: 220px 1fr; gap: 6px 20px; align-items: start; padding: 16px 0; border-bottom: 1px solid #edf1e6; margin: 0; } .ct-form__box .form-group.row > p, .ct-form__box .form-group.row p { margin: 0; } .ct-form__box .form-group.row > [class*="col-"] { width: auto; max-width: none; padding: 0; flex: none; } .ct-form__box .col-form-label { display: flex; align-items: center; gap: 8px; padding-top: 9px; font-size: .9375rem; font-weight: 700; color: var(--c-text); } .ct-form__box .col-form-label .required { display: inline-block; padding: 1px 8px; border-radius: 4px; background: #c8372d; color: #fff; font-size: 0; line-height: 1.6; } .ct-form__box .col-form-label .required::before { content: "必須"; font-size: .6875rem; font-weight: 700; } .ct-form__box .col-form-label:not(:has(.required))::after { content: "任意"; display: inline-block; padding: 1px 8px; border-radius: 4px; background: #e6e9e1; color: #6b7066; font-size: .6875rem; font-weight: 700; line-height: 1.6; } .ct-form__box .frm-note { order: 2; margin-top: 4px !important; font-size: .75rem; color: #8a8f85; } .ct-form__box .col-sm-9 { display: flex; flex-direction: column; } .ct-form__box .col-sm-9 > p:not(.frm-note) { order: 1; } .ct-form__box input[type="text"], .ct-form__box input[type="email"], .ct-form__box input[type="tel"], .ct-form__box input[type="url"], .ct-form__box input[type="number"], .ct-form__box input[type="date"], .ct-form__box select { height: 44px; padding: 8px 12px; font-size: 15px; } .ct-form__box textarea { min-height: 120px; height: 140px; padding: 10px 12px; font-size: 15px; } .ct-form__box input[aria-required="true"], .ct-form__box textarea[aria-required="true"] { background: #fffdf6; } .ct-form__box .wpcf7-list-item { margin: 0 14px 4px 0; font-size: .875rem; } .ct-form__box h2.policy-desc { grid-column: 1 / -1; } @media (max-width: 767px) { .ct-form__box { padding: 4px 16px 20px; } .ct-form__box .form-group.row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; } .ct-form__box .col-form-label { padding-top: 0; } } .ct-form__box .form-group.row:has(.policy-desc), .ct-form__box .form-group.row:has(.privacy-policy-content), .ct-form__box .form-group.row:has(.col-sm-12) { grid-template-columns: 1fr; } .ct-form__box .col-sm-9 .col-form-label::after, .ct-form__box .col-sm-12 .col-form-label::after { display: none; } .ct-form__box .col-sm-9 .col-form-label { padding-top: 0; font-weight: 400; font-size: .8125rem; color: var(--c-muted); } .ct-form__box .wpcf7-list-item-label { font-weight: 400; color: var(--c-text); } /* Hàng chỉ hiển thị chữ (không có ô nhập): không gắn 任意; bỏ hàng kẻ rỗng */ .ct-form__box .form-group.row:not(:has(input, select, textarea)) .col-form-label::after { display: none; } .ct-form__box label.col-sm-9 { padding-top: 9px; font-weight: 700; color: var(--c-text); } .ct-form__box .form-group.row > p:has(label.col-sm-9) { display: contents; } .ct-form__box .form-group.row-line { display: none; } /* Form gọn hơn: tiêu đề khối, hàng chữ tĩnh, 2 ô ngôn ngữ cạnh nhau, lỗi nhỏ */ .ct-form__box .form-group.row { padding: 12px 0; } .ct-form__box .form-group.row:has(.block-contact-title) { display: block; padding: 20px 0 8px; border-bottom: 2px solid var(--c-brand); } .ct-form__box .block-contact-title p { font-size: 1.0625rem; font-weight: 700; color: var(--c-brand-strong); } .ct-form__box .form-group.row > p:has(label.col-sm-9) { display: contents; } .ct-form__box label.col-sm-9 { padding-top: 9px; font-weight: 400; } .ct-form__box .form-group.row:has(.col-sm-4) { grid-template-columns: 220px 1fr 24px 1fr; } .ct-form__box .col-sm-1 { padding-top: 34px !important; text-align: center; color: #8a8f85; } .ct-form__box .col-sm-1 .fa::before { content: "→"; font-style: normal; } .ct-form__box .col-sm-4 .frm-note { margin: 0 0 4px !important; } .ct-form__box .form-group.row:has(.info-note-text) { display: block; padding-top: 0; } .ct-form__box .info-note-text { margin-left: 240px; font-size: .75rem; color: #8a8f85; } .ct-form__box .info-note-text p { line-height: 1.6; } .ct-form__box .wpcf7-not-valid-tip { margin-top: 4px; font-size: .75rem; } @media (max-width: 767px) { .ct-form__box .form-group.row:has(.col-sm-4) { grid-template-columns: 1fr; } .ct-form__box .col-sm-1 { display: none; } .ct-form__box .info-note-text { margin-left: 0; } } .ct-form__box .form-group.row > p:has(label.col-sm-9) br { display: none; } .ct-form__box .col-sm-1 { padding-top: 40px !important; } /* Hàng 「お問合わせサービス：翻訳/通訳」 thừa (trang đã ghi rõ dịch vụ) → ẩn */ .ct-form__box .form-group.row:has(label.col-sm-9) { display: none; } /* Blog: ảnh đại diện 3:2 hiện đủ (không cắt), bố cục thoáng hơn */ .post-card__thumb, .blog-featured .post-card--featured .post-card__thumb { aspect-ratio: 3 / 2; } .post-card__thumb img { object-fit: contain; } .post-grid { gap: 56px 36px; } .post-card__body { padding-top: 18px; } .post-card__meta { margin-bottom: 10px; } .post-card__title { font-size: 1rem; line-height: 1.7; } .post-card__excerpt { margin-top: 10px; -webkit-line-clamp: 2; } .blog-featured .post-card--featured { gap: clamp(28px, 4vw, 56px); } .blog-featured .post-card--featured .post-card__title { font-size: clamp(1.2rem, 1rem + .5vw, 1.45rem); } .blog-featured .post-card--featured .post-card__excerpt { margin-top: 16px; -webkit-line-clamp: 3; } @media (max-width: 599px) { .post-grid { gap: 40px; } } /* Banner dọc cố định bên phải (PC) */ .side-banner { position: fixed; right: 0; top: 50%; z-index: 90; transform: translateY(-50%); line-height: 0; } .side-banner img { width: 70px; height: auto; } @media (max-width: 1023px) { .side-banner { display: none; } } /* Blog: lưới bài bớt rối — bỏ nhãn danh mục lặp và đoạn tóm tắt (bài nổi bật vẫn giữ) */ .post-grid .post-card__cat, .post-grid .post-card__excerpt { display: none; } .post-grid .post-card__meta { margin-bottom: 6px; } /* ===== よくある質問 (templates/faq-template.php) ===== */ .faq-page { max-width: 880px; margin: 0 auto; padding: 48px var(--gutter) 80px; display: grid; gap: 56px; } .faq-page__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .faq-page__nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 16px; border: 1px solid #cfd8c2; border-radius: 999px; background: #fff; color: var(--c-text); font-size: .875rem; font-weight: 700; text-decoration: none; } .faq-page__nav a:hover { border-color: var(--c-brand); color: var(--c-brand-strong); } .faq-page__nav a span { padding: 0 7px; border-radius: 999px; background: #eef3e6; font-size: .75rem; color: var(--c-brand-strong); } .faq-page__group { scroll-margin-top: 120px; } .faq-page__title { margin: 0 0 16px; padding-left: 14px; border-left: 4px solid var(--c-brand); font-size: 1.25rem; line-height: 1.5; } .faq-page__list { display: grid; gap: 10px; } .faq-item { background: #fff; border: 1px solid #dfe6d3; border-radius: 10px; } .faq-item[open] { border-color: #c9d8b2; box-shadow: 0 4px 16px rgba(0, 0, 0, .04); } .faq-item summary { display: grid; grid-template-columns: 32px 1fr 20px; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none; font-weight: 700; line-height: 1.6; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: ""; width: 10px; height: 10px; justify-self: center; border-right: 2px solid var(--c-brand-strong); border-bottom: 2px solid var(--c-brand-strong); transform: rotate(45deg) translateY(-3px); transition: transform .2s; } .faq-item[open] summary::after { transform: rotate(-135deg) translateY(-3px); } .faq-item__q, .faq-item__mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-brand-strong); color: #fff; font-family: var(--f-en); font-weight: 700; } .faq-item__a { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 0 20px 18px; } .faq-item__mark { background: var(--c-accent); } .faq-item__body { padding-top: 4px; font-size: .9375rem; line-height: 1.9; } .faq-item__body > :first-child { margin-top: 0; } .faq-item__body > :last-child { margin-bottom: 0; } .faq-item__body a { color: var(--c-brand-strong); } .faq-item__body img { height: auto; } @media (max-width: 767px) { .faq-page { padding-top: 32px; gap: 40px; } .faq-page__nav { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; } .faq-page__nav a { flex: none; } .faq-item summary { padding: 14px 16px; gap: 10px; grid-template-columns: 28px 1fr 16px; } .faq-item__q, .faq-item__mark { width: 28px; height: 28px; font-size: .875rem; } .faq-item__a { grid-template-columns: 28px 1fr; gap: 10px; padding: 0 16px 16px; } } /* ===== Trang chữ 情報の取扱い (templates/blank page-template.php) ===== */ .legal-page { max-width: 820px; margin: 0 auto; padding: 48px var(--gutter) 80px; font-size: .9375rem; line-height: 2; } .legal-page > p:first-child { font-weight: 700; } .legal-page h2 { margin: 48px 0 12px; padding-bottom: 8px; border-bottom: 1px solid #dfe6d3; font-size: 1.125rem; line-height: 1.6; } .legal-page ul { margin: 8px 0 16px; padding-left: 1.4em; } .legal-page li { margin: 4px 0; } .legal-page li::marker { color: var(--c-brand); } .legal-page p { margin: 0 0 12px; } .legal-page .has-text-align-right { text-align: right; } @media (max-width: 767px) { .legal-page { padding-top: 32px; } .legal-page h2 { margin-top: 36px; } } /* よくある質問 v2: 1 khung / nhóm, đường kẻ mảnh, chữ Q/A màu (bớt khối nặng) */ .faq-page__list { gap: 0; background: #fff; border: 1px solid #dfe6d3; border-radius: 12px; overflow: hidden; } .faq-item, .faq-item[open] { border: 0; border-top: 1px solid #edf1e6; border-radius: 0; box-shadow: none; } .faq-item:first-child { border-top: 0; } .faq-item summary { grid-template-columns: 24px 1fr 16px; padding: 18px 24px 8px; } .faq-item:not([open]) summary { padding-bottom: 18px; } .faq-item__q, .faq-item__mark { width: auto; height: auto; border-radius: 0; background: none; font-size: 1.125rem; line-height: 1.6; } .faq-item__q { color: var(--c-brand-strong); } .faq-item__mark { color: var(--c-accent); background: none; } .faq-item__a { grid-template-columns: 24px 1fr; padding: 0 24px 20px; } .faq-item__body { padding-top: 0; color: #4a4f45; } .faq-item summary::after { width: 8px; height: 8px; border-width: 0 1.5px 1.5px 0; } .faq-item__a { align-items: start; } /* ===== Thanh CTA dính đáy (inc/sticky-cta.php; bật từng bài bằng ô 「下部CTAバー」) ===== */ .cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: flex; align-items: center; justify-content: center; gap: 24px; padding: 12px 56px 12px var(--gutter); background: #fff; border-top: 3px solid var(--c-brand); box-shadow: 0 -4px 16px rgba(0, 0, 0, .08); } .cta-bar[hidden] { display: none; } .cta-bar__text { margin: 0; color: var(--c-text); font-size: 14px; line-height: 1.5; } .cta-bar__text strong { display: block; color: var(--c-deep); font-size: 16px; } .cta-bar__actions { display: flex; align-items: center; gap: 16px; } .cta-bar__link { color: var(--c-brand-strong); font-weight: 700; font-size: 14px; } .cta-bar__close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: none; color: var(--c-muted); font-size: 22px; cursor: pointer; } @media (max-width: 1023px) { .cta-bar { display: none; } } /* ===== [gs_related_service] — thẻ dịch vụ liên quan (internal link) trong bài (inc/post-service.php) ===== */ .post-body .post-services { margin: 32px 0; } .post-body .post-services__label { margin: 0 0 10px; color: var(--c-muted); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; } .post-body .post-services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .post-body a.post-service { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; color: var(--c-text); text-decoration: none; transition: border-color .2s, box-shadow .2s; } .post-body a.post-service:hover { border-color: var(--c-brand); box-shadow: var(--shadow); } .post-service__name { color: var(--c-deep); font-size: 1.0625rem; font-weight: 700; line-height: 1.5; } .post-service__more { flex-shrink: 0; color: var(--c-brand-strong); font-size: .875rem; font-weight: 700; } .post-service__more::after { content: " →"; } .post-body a.post-service, .post-body a.post-service * { text-decoration: none; } /* ===== 「この記事のポイント」 — Key Takeaways từ brief (GS123 mẫu GSJ JP Post 新テーマ): cùng kiểu .gsjppage-answer-summary của bài cũ ===== */ .post-body .post-points { margin: 2rem 0; padding: 1.2rem 0; border-top: 2px solid var(--c-brand); border-bottom: 1px solid var(--c-line); background: transparent; } .post-body .post-points > * { margin: 0; } .post-body .post-points__title { color: var(--c-brand-strong); font-weight: 700; } .post-body .post-points ul { margin-top: .6rem; padding-left: 1.35rem; } .post-body .post-points li { margin: .35rem 0; } .post-body .post-points li::marker { color: var(--c-brand); } /* ===== シリーズ (inc/post-series.php): 前の章 / 次の章 + danh sách chương ===== */ .post-body .post-series { margin: 48px 0 0; padding: 20px 0 0; border-top: 2px solid var(--c-brand); } .post-body .post-series__title { margin: 0 0 12px; color: var(--c-brand-strong); font-weight: 700; } .post-body .post-series__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .post-body .post-series__nav a { display: block; padding: 14px 16px; border: 1px solid var(--c-line); border-radius: var(--radius); color: var(--c-text); font-size: .9375rem; line-height: 1.6; text-decoration: none; } .post-body .post-series__nav a:hover { border-color: var(--c-brand); color: var(--c-brand-strong); } .post-body .post-series__nav span { display: block; margin-bottom: 2px; color: var(--c-brand-strong); font-size: .75rem; font-weight: 700; } .post-body .post-series__prev span::before { content: "← "; } .post-body .post-series__next { grid-column: 2; text-align: right; } .post-body .post-series__next span::after { content: " →"; } .post-body .post-series__all { margin-top: 12px; font-size: .9375rem; } .post-body .post-series__all summary { cursor: pointer; color: var(--c-brand-strong); font-weight: 700; } .post-body .post-series__all ol { margin: 8px 0 0; padding-left: 1.5em; line-height: 1.8; } .post-body .post-series__all [aria-current] { font-weight: 700; } @media (max-width: 599px) { .post-body .post-series__nav { grid-template-columns: 1fr; } .post-body .post-series__next { grid-column: 1; } } /* Khối CTA riêng của bài (GS123: mục 「CTA：」 của brief) + thẻ [gs_related_service] */ .post-body .post-related { margin: 48px 0 0; padding-top: 20px; border-top: 2px solid var(--c-brand); } .post-body .post-related > p { margin: 0 0 .8em; } .post-body .post-related__lead { font-size: 1.125rem; color: var(--c-deep); } .post-body .post-related .post-services { margin: 20px 0 0; } /* Form trên điện thoại: đang gõ (main.js → html.is-typing) ẩn thanh cố định; trang có form thì không cần thanh liên hệ đáy */ .is-typing .sticky-cta, .is-typing .cta-bar, .is-typing .side-banner { display: none !important; } body:has(.wpcf7) .sticky-cta { display: none !important; } @media (max-width: 1023px) { body:has(.wpcf7) { padding-bottom: 0 !important; } } /* ===== Bảng giá đa ngôn ngữ kiểu LP corporate — [gs_rate_table] (inc/rate-table.php) ===== */ .gs-rate { margin: 24px 0; text-align: left; } .gs-rate .rate-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; } .gs-rate .rate-head p { margin: 0; } .gs-rate .rate-head__title { font-size: 1.1875rem; font-weight: 700; color: var(--c-text); } .gs-rate .rate-head__unit { font-size: .8125rem; color: var(--c-muted); } .gs-rate .rate-badge { display: inline-block; padding: 2px 9px; border-radius: 5px; background: var(--c-pale); color: var(--c-deep); font-size: .75rem; font-weight: 700; } .gs-rate .rate-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .gs-rate .rate-tab { padding: 8px 18px; border: 1px solid var(--c-line); border-radius: 100px; background: #fff; color: #555; font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer; transition: all .15s; } .gs-rate .rate-tab:hover { border-color: var(--c-brand); color: var(--c-deep); } .gs-rate .rate-tab.is-active { border-color: var(--c-brand-strong); background: var(--c-brand-strong); color: #fff; } .gs-rate .rate-wrap { overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); } .gs-rate .rate-scroll { max-height: min(520px, 70vh); overflow: auto; -webkit-overflow-scrolling: touch; } .gs-rate table.rate { width: 100%; min-width: 680px; margin: 0; border-collapse: separate; border-spacing: 0; font-size: .875rem; } .gs-rate table.rate thead th { position: sticky; top: 0; z-index: 2; padding: 13px 14px; border: 0; background: var(--c-brand-strong); color: #fff; font-size: .8125rem; font-weight: 700; text-align: center; white-space: nowrap; } .gs-rate table.rate td { padding: 11px 14px; border: 0; border-bottom: 1px solid #ececec; background: transparent; text-align: center; white-space: nowrap; } .gs-rate table.rate td.lang { color: var(--c-text); font-weight: 700; text-align: left; } .gs-rate table.rate td.pair { color: #555; text-align: left; } .gs-rate table.rate td.price { color: var(--c-text); font-weight: 800; font-variant-numeric: tabular-nums; } .gs-rate table.rate td.min { color: #4a4a4a; font-variant-numeric: tabular-nums; } .gs-rate table.rate tbody tr:nth-child(even) { background: #fafcf7; } .gs-rate table.rate tbody tr:hover { background: var(--c-pale); } .gs-rate .rate-foot { padding: 14px 18px; border-top: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-muted); font-size: .78rem; line-height: 1.7; } .gs-rate .rate-foot b { color: var(--c-text); } .gs-rate .rate-hint { display: none; margin: 0 0 8px; color: var(--c-muted); font-size: .75rem; text-align: right; } @media (max-width: 760px) { .gs-rate .rate-hint { display: block; } .gs-rate .rate-scroll { max-height: min(440px, 64vh); } .gs-rate table.rate { min-width: 600px; font-size: .8125rem; } .gs-rate table.rate td, .gs-rate table.rate thead th { padding: 9px 10px; } } .gsjp-plan .gsjp-plan__feature + .gsjp-plan__points { border-top: 0; padding-top: 0; } /* Câu dẫn dưới heading: tối đa ~40 chữ/dòng (dễ đọc khi canh giữa), xuống dòng theo cụm (BudouX + text-wrap) */ .gsjp-head .gsjp-head__lead { max-width: 40em; margin-inline: auto !important; line-height: 1.9; text-wrap: pretty; } .gsjp-head .gsjp-head__more { max-width: 40em; margin: 10px auto 0 !important; color: var(--c-muted); font-size: .8125rem; line-height: 1.8; text-align: center; text-wrap: pretty; } /* ===== Nút về đầu trang (footer.php) ===== */ .to-top { position: fixed; right: 20px; bottom: 24px; z-index: 91; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--c-brand-strong); color: #fff; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s, background-color .2s; } .to-top.is-visible { opacity: 1; visibility: visible; transform: none; } .to-top:hover { background: var(--c-brand); } .to-top:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 3px; } @media (max-width: 767px) { .to-top { right: 12px; bottom: 76px; width: 44px; height: 44px; } } /* trên thanh CTA đáy */ /* ===== Chọn ngôn ngữ dạng thả xuống (điện thoại) — thanh trên cùng ẩn cho gọn ===== */ .lang-drop { display: none; position: relative; } @media (max-width: 1023px) { .site-header__bar { display: none; } .lang-drop { display: block; } .lang-drop summary { display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px; list-style: none; cursor: pointer; font-family: var(--f-en); font-weight: 700; font-size: .875rem; color: var(--c-brand-strong); border: 1px solid var(--c-line); border-radius: 6px; background: #fff; } .lang-drop summary::-webkit-details-marker { display: none; } .lang-drop[open] summary svg { transform: rotate(180deg); } .lang-drop ul { position: absolute; top: calc(100% + 6px); right: 0; z-index: 120; min-width: 72px; margin: 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid var(--c-line); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); } .lang-drop a { display: flex; align-items: center; min-height: 44px; padding: 0 16px; font-family: var(--f-en); font-weight: 600; color: var(--c-text, #333); text-decoration: none; } .lang-drop a:hover { background: var(--c-pale); color: var(--c-brand-strong); } } /* Hero: chỉ ngắt dòng ở (sau ・、), không cắt giữa từ */ .gsjp-hero .gsjp-hero__lead { word-break: keep-all; overflow-wrap: anywhere; } /* Footer: link ngôn ngữ (cột 4) */ .footer-lang { margin-top: 1.25em; } .footer-lang__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: .875rem; } .footer-lang__links span[aria-current] { font-weight: 700; color: var(--c-brand-strong); } .footer-lang__links span[aria-hidden] { color: var(--c-line); } /* Ảnh trong bài: mặc định canh giữa (trừ khi chọn canh trái/phải trong editor) */ .post-body .wp-block-image:not(.alignleft):not(.alignright) { margin-left: auto; margin-right: auto; text-align: center; } .post-body .wp-block-image:not(.alignleft):not(.alignright) img { display: block; margin-left: auto; margin-right: auto; } .post-body .wp-block-image.aligncenter { display: table; } .post-body .wp-block-image.aligncenter > figcaption { display: table-caption; caption-side: bottom; } .post-body p > img:only-child { display: block; margin-left: auto; margin-right: auto; } /* ===== 選ばれる5つの理由 (why-choose-us): số 01–05, thẻ cao bằng nhau, hàng dưới canh giữa, ngắt dòng theo 文節 ===== */ .gsjp-svc-features .gsjp-infocards { counter-reset: reason; gap: 24px; } .gsjp-svc-features .gsjp-infocard { position: relative; counter-increment: reason; height: 100%; padding: 28px 26px 26px; border-color: #e3ebd8; border-top: 3px solid var(--c-brand); box-shadow: 0 6px 20px rgba(40, 70, 20, .06); } .gsjp-svc-features .gsjp-infocard::after { content: counter(reason, decimal-leading-zero); position: absolute; top: 14px; right: 20px; font-family: var(--f-en); font-size: 2.25rem; font-weight: 800; line-height: 1; color: #e6efd9; } .gsjp-svc-features .gsjp-infocard h3 { position: relative; z-index: 1; font-size: 1.0625rem; line-height: 1.55; padding-right: 44px; } .gsjp-svc-features .gsjp-infocard p { font-size: .9375rem; line-height: 1.95; word-break: auto-phrase; } @media (min-width: 1024px) { .gsjp-svc-features .gsjp-infocards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); } .gsjp-svc-features .gsjp-infocard { grid-column: span 2; } .gsjp-svc-features .gsjp-infocard:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; } .gsjp-svc-features .gsjp-infocard:nth-child(5):last-child { grid-column: 4 / span 2; } } /* Bài blog: đoạn văn/danh sách/bảng ngắt dòng theo 文節 (Chrome/Edge/Android). overflow-wrap ở body là lưới an toàn → không tràn ngang trên điện thoại. Safari/Firefox chưa hỗ trợ auto-phrase → hiển thị như cũ (vẫn có line-break: strict). */ .post-body :is(p, li, td, th, dd, blockquote, figcaption) { word-break: auto-phrase; } /* Tốc độ: phần dưới màn hình đầu chỉ dàn trang khi cuộn tới (giảm Style & Layout trên mobile). */ .entry-content > .gsjp-section:nth-child(n+3) { content-visibility: auto; contain-intrinsic-size: auto 720px; } /* Đầu trang dịch vụ: xuống dòng theo cụm bằng CSS (không dùng BudouX/JS → không nhảy bố cục lúc tải). */ .svc-hero .svc-hero__catch, .svc-hero .svc-hero__lead { word-break: auto-phrase; text-wrap: pretty; } /* Popup Maker (chỉ tải ở trang có nút mở popup, vd. 「文字数・単語数」) — theo giao diện theme mới, gọn */ .pum-overlay { background: rgba(20, 32, 16, .55) !important; } .pum-container.popmake { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); margin: 0 !important; width: min(480px, calc(100% - 32px)) !important; max-width: none !important; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px 24px 20px !important; border: 0 !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 20px 50px rgba(0, 0, 0, .25) !important; } .pum-container .pum-content { display: flex; flex-direction: column; font-size: .875rem; line-height: 1.7; text-align: center; } .pum-container .pum-content > section { display: contents; } .pum-container .pum-content .wpcf7 { order: 9; } /* câu dẫn sau form → lên trên ô email */ .pum-container .pum-content .wp-block-spacer, .pum-container .wpcf7 br { display: none; } .pum-container .pum-content figure { margin: 0 auto 4px !important; } .pum-container .pum-content img { display: block; width: 200px !important; max-width: 100%; height: auto; max-height: 120px; object-fit: contain; margin: 0 auto; } .pum-container .pum-content h3 { margin: 8px 0 0 !important; font-size: 1.0625rem !important; line-height: 1.6; } .pum-container .pum-content h4 { margin: 6px 0 0 !important; font-size: .875rem !important; font-weight: 500 !important; line-height: 1.7; color: #444; } .pum-container .pum-content hr, .pum-container .wp-block-separator { width: 56px; margin: 10px auto 2px !important; border: 0 !important; border-top: 3px solid var(--c-brand, #79a52a) !important; background: none !important; opacity: 1; } .pum-container .pum-content > section > p, .pum-container .pum-content > p { margin: 6px 0 0 !important; line-height: 1.6; font-size: .8125rem; color: #666; } .pum-container .wpcf7 form > div, .pum-container .wpcf7 form > div > div { max-width: none !important; width: 100% !important; } .pum-container .wpcf7 { margin-top: 14px; } .pum-container .wpcf7 p { margin: 0 !important; } .pum-container .wpcf7 form > div { margin-bottom: 0 !important; } .pum-container .wpcf7-form-control-wrap[data-name="email"]::before { content: "メールアドレス（必須）"; display: block; margin-bottom: 4px; font-size: .8125rem; font-weight: 700; text-align: left; } .pum-container .wpcf7 input[type="email"] { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid #c9d5bd; border-radius: 8px; background: #fafcf7; font-size: 1rem; } .pum-container .wpcf7 input[type="email"]:focus { outline: 3px solid rgba(121, 165, 42, .3); border-color: var(--c-brand, #79a52a); } .pum-container .wpcf7 form > div:has(button) { display: block !important; } .pum-container .wpcf7 button[type="submit"] { display: flex; align-items: center; justify-content: center; width: 100% !important; max-width: none !important; min-height: 46px; margin: 12px 0 0; padding: 10px 16px !important; border: 0 !important; border-radius: 8px !important; background: var(--c-accent, #b85b09) !important; color: #fff !important; font-size: 1rem !important; font-weight: 700; line-height: 1.3; cursor: pointer; } .pum-container .wpcf7 button[type="submit"]:hover { filter: brightness(1.08); } .pum-container .gs-recaptcha-note { margin-top: 10px !important; font-size: 11px !important; text-align: center; } .pum-container .pum-close { position: absolute !important; top: 10px !important; right: 10px !important; left: auto !important; bottom: auto !important; width: 34px !important; height: 34px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #f1f4ee !important; color: #333 !important; font: 400 18px/34px Arial, sans-serif !important; box-shadow: none !important; z-index: 2; } @media (max-width: 599px) { .pum-container.popmake { padding: 20px 16px 16px !important; } }