/* ========================================================================= AGRITECH – Hệ giao diện v4 (một tệp duy nhất, thay thế agt.css + agt-skin.css cũ) Token (màu, cỡ chữ, khoảng cách, bo góc, chuyển động) chỉnh tại Giao diện → Tùy biến → "AGRITECH – Hệ thiết kế" và được in thành CSS variables. Font: Roboto (nội dung, menu, nút, form) · Be Vietnam Pro (heading) · Great Vibes (chữ viết tay trang trí). 1 Token 7 Section & nền 13 Form 2 Nền tảng & chữ 8 Hero 14 Máy sấy 3 Nút & liên kết 9 Section trang chủ 15 Blog & bài viết 4 Header 10 Thẻ & danh sách 16 Footer & CTA band 5 Menu, mega menu 11 Tabs, accordion 17 Hiệu ứng 6 Menu mobile 12 Timeline 18 Responsive · 19 Giảm chuyển động ========================================================================= */ /* 1. Token ------------------------------------------------------------------ */ :root { /* Giá trị mặc định – bị thay bằng token in từ Tùy biến. */ --agt-dark: #0B4A1F; --agt-primary: #1B7F33; --agt-accent: #8DD63B; --agt-leaf: #3DAA3C; --agt-bg-soft: #F3F8F1; --agt-bg: #FFFFFF; --agt-ink: #17261B; --agt-muted: #5B6B5F; --agt-line: #E2EBE0; --agt-fs-body: 16px; --agt-h1-max: 46px; --agt-h1-min: 30px; --agt-h2-max: 34px; --agt-h2-min: 25px; --agt-read-width: 740px; --agt-container: 1380px; --agt-sec-lg: 72px; --agt-sec-sm: 44px; --agt-gutter-sm: 20px; --agt-radius: 10px; --agt-shadow-k: .6; --agt-speed: 1; /* Font */ --agt-font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --agt-font-head: "Be Vietnam Pro", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --agt-font-script: "Great Vibes", "Segoe Script", cursive; /* Thang chữ */ --agt-h1: clamp(var(--agt-h1-min), 1.15rem + 2.1vw, var(--agt-h1-max)); --agt-h2: clamp(var(--agt-h2-min), 1rem + 1.25vw, var(--agt-h2-max)); --agt-h3: clamp(18px, .95rem + .4vw, 22px); --agt-h4: clamp(16px, .9rem + .2vw, 18px); --agt-fs-lead: clamp(15.5px, .95rem + .15vw, 17px); --agt-fs-sm: 14.5px; --agt-fs-xs: 13px; --agt-script: clamp(26px, 1.25rem + .7vw, 34px); --agt-lh-head: 1.25; --agt-lh-body: 1.7; /* Màu phái sinh */ --agt-deep: color-mix(in srgb, var(--agt-dark) 70%, #000); --agt-green-1: color-mix(in srgb, var(--agt-primary) 72%, #4CC35A); --agt-grad: linear-gradient(135deg, var(--agt-green-1) 0%, var(--agt-primary) 100%); --agt-grad-hover: linear-gradient(135deg, var(--agt-primary) 0%, var(--agt-dark) 100%); --agt-lime: linear-gradient(90deg, #C6EE6E 0%, var(--agt-accent) 55%, #5FC24B 100%); --agt-tint: color-mix(in srgb, var(--agt-leaf) 9%, #fff); --agt-on-dark: #F1F7EE; --agt-on-dark-muted: rgba(255, 255, 255, .76); --agt-line-dark: rgba(255, 255, 255, .14); --agt-error: #B3261E; /* Khoảng cách, bo góc, bóng */ --agt-gutter: clamp(var(--agt-gutter-sm), 3vw, 30px); --agt-sec: clamp(var(--agt-sec-sm), 5.2vw, var(--agt-sec-lg)); --agt-sec-half: calc(var(--agt-sec) * .6); --agt-measure: 58ch; --agt-radius-sm: calc(var(--agt-radius) * .6); --agt-radius-lg: calc(var(--agt-radius) * 1.4); --agt-pill: 999px; --agt-shadow: 0 2px 6px rgba(11, 74, 31, calc(.05 * var(--agt-shadow-k) / .6)), 0 12px 30px rgba(11, 74, 31, calc(.08 * var(--agt-shadow-k) / .6)); --agt-shadow-hover: 0 4px 10px rgba(11, 74, 31, .07), 0 20px 40px rgba(11, 74, 31, .14); --agt-shadow-btn: 0 6px 16px color-mix(in srgb, var(--agt-primary) 26%, transparent); --agt-focus: 0 0 0 3px #fff, 0 0 0 5px var(--agt-primary); /* Chuyển động */ --agt-ease: cubic-bezier(.2, .7, .2, 1); --agt-ease-out: cubic-bezier(.16, 1, .3, 1); --agt-t-hover: calc(220ms * var(--agt-speed)); --agt-t-ui: calc(280ms * var(--agt-speed)); --agt-t-reveal: calc(620ms * var(--agt-speed)); --agt-header-h: 80px; --agt-header-h-sticky: 68px; /* Họa tiết lá (SVG nội tuyến – không tải ảnh) */ --agt-leaf-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M8 112C8 52 46 12 114 6c-4 66-44 106-106 106z' fill='%2343A847'/%3E%3Cpath d='M10 110 84 36' stroke='%23fff' stroke-opacity='.35' stroke-width='2.5' fill='none'/%3E%3Cpath d='M40 80 38 56M55 65 56 44M70 50 74 32M40 80 62 82M55 65 76 66' stroke='%23fff' stroke-opacity='.2' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); --agt-arrow-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E"); } /* 2. Nền tảng & chữ ---------------------------------------------------------- */ html { scroll-padding-top: calc(var(--agt-header-h-sticky) + 16px); } body { font-family: var(--agt-font); font-size: var(--agt-fs-body); line-height: var(--agt-lh-body); color: var(--agt-ink); background: var(--agt-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body, p, li, td, th, label, input, select, textarea, button, .button, .nav > li > a, .nav-dropdown a, .breadcrumbs, .alt-font { font-family: var(--agt-font); } /* Heading: Be Vietnam Pro – áp cho H1–H6 và các thành phần đóng vai trò tiêu đề */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .heading-font, .agt-display, .agt-hero2__title, .agt-page-intro__title, .agt-single__title, .agt-machine__title, .agt-machine-card__title, .agt-post-card__title, .agt-search-result__title, .agt-mega__title, .agt-mega__name, .agt-footer__title, .agt-form__title, .agt-single__cta-title, .agt-empty__title, .post-title, .widget-title, .accordion-title, .agt-faq__q, .agt-quick__v, .agt-hero2__chip-v, .agt-index { font-family: var(--agt-font-head); color: var(--agt-ink); text-transform: none; letter-spacing: -.005em; } h1, h2, h3, h4, h5, h6 { line-height: var(--agt-lh-head); text-wrap: balance; margin-top: 0; } h1, .h1 { font-size: var(--agt-h1); font-weight: 700; } h2, .h2 { font-size: var(--agt-h2); font-weight: 700; } h3, .h3 { font-size: var(--agt-h3); font-weight: 600; line-height: 1.32; } h4, .h4 { font-size: var(--agt-h4); font-weight: 600; line-height: 1.38; } p { text-wrap: pretty; } strong, b { font-weight: 700; } .dark, .dark h1, .dark h2, .dark h3, .dark h4, .dark p, .dark li, .dark label { color: var(--agt-on-dark); } a { color: var(--agt-primary); transition: color var(--agt-t-hover) var(--agt-ease); } a:hover { color: var(--agt-dark); } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--agt-focus); border-radius: var(--agt-radius-sm); } .dark :where(a, button, summary):focus-visible { box-shadow: 0 0 0 3px var(--agt-dark), 0 0 0 5px var(--agt-accent); } .screen-reader-text:focus { background: #fff; color: var(--agt-ink); z-index: 100000; } img { height: auto; } ::selection { background: var(--agt-accent); color: var(--agt-ink); } .agt-container { width: 100%; max-width: calc(var(--agt-container) + var(--agt-gutter) * 2); margin-inline: auto; padding-inline: var(--agt-gutter); } .agt-container--narrow { max-width: calc(820px + var(--agt-gutter) * 2); } .agt-section-sm { padding-block: var(--agt-sec-half); } /* Nhãn viết tay: Great Vibes, tách khỏi heading; thanh xanh nhận diện phía trên */ .agt-eyebrow, .agt-tag { position: relative; display: block; margin: 0 0 4px; padding-top: 16px; font-family: var(--agt-font-script); font-size: var(--agt-script); font-weight: 400; font-style: normal; line-height: 1.35; letter-spacing: 0; text-transform: none; color: var(--agt-primary); overflow: visible; } .agt-eyebrow::before, .agt-tag::before { content: ""; position: absolute; left: 0; top: 0; width: 40px; height: 4px; border-radius: 4px; background: var(--agt-grad); transform-origin: left center; } .text-center .agt-eyebrow::before { left: 50%; margin-left: -20px; transform-origin: center; } .agt-eyebrow a { color: inherit; } .dark .agt-eyebrow, .agt-hero2 .agt-tag, .agt-page-intro .agt-eyebrow, .agt-footer .agt-eyebrow { color: var(--agt-accent); } .dark .agt-eyebrow::before, .agt-hero2 .agt-tag::before, .agt-footer .agt-eyebrow::before { background: var(--agt-lime); } .agt-hero2--bg-light .agt-tag { color: var(--agt-primary); } .agt-hero2--bg-light .agt-tag::before { background: var(--agt-grad); } .agt-lead { font-size: var(--agt-fs-lead); line-height: 1.72; color: var(--agt-muted); max-width: var(--agt-measure); } .dark .agt-lead { color: var(--agt-on-dark-muted); } .agt-display { font-size: var(--agt-h2); font-weight: 700; line-height: 1.25; max-width: 24ch; } .agt-display em, h2 em { font-style: normal; color: var(--agt-primary); } .dark .agt-display em, .dark h2 em { color: var(--agt-accent); } .agt-section-title { margin-bottom: 20px; } .agt-section-title--sm { font-size: var(--agt-h3); } .agt-index { font-size: var(--agt-fs-xs); font-weight: 600; letter-spacing: .08em; color: var(--agt-leaf); } .agt-caption { font-size: var(--agt-fs-xs); color: var(--agt-muted); margin-top: 10px; line-height: 1.5; } .dark .agt-caption { color: var(--agt-on-dark-muted); } .text-center .agt-lead, .text-center .agt-note { margin-inline: auto; } .text-center .agt-caption, .text-center .agt-lead, .text-center .agt-note { text-align: center; } .text-center h2 { margin-inline: auto; } .agt-icon { flex: none; vertical-align: middle; } /* 3. Nút & liên kết ---------------------------------------------------------- Ba loại: Primary (nền xanh) · Secondary/outline (viền) · Text link có mũi tên. Áp cho .button của Flatsome, nút form, nút liên hệ của plugin. */ html body .button, html body button.button, html body input[type="submit"].button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 24px; margin: 0 10px 10px 0; border: 1.5px solid transparent; border-radius: var(--agt-pill); font-family: var(--agt-font); font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: .01em; text-transform: none; white-space: nowrap; box-shadow: none; background-image: none; transition: background-color var(--agt-t-hover) var(--agt-ease), color var(--agt-t-hover) var(--agt-ease), border-color var(--agt-t-hover) var(--agt-ease), box-shadow var(--agt-t-hover) var(--agt-ease), transform var(--agt-t-hover) var(--agt-ease); } html body .button::before, html body .button::after { pointer-events: none; } .button > span { line-height: inherit; } .button .agt-icon, .button i { transition: transform var(--agt-t-hover) var(--agt-ease); } .button:hover .agt-icon--arrow, .button:hover .icon-angle-right, .agt-btn--arrow:hover .agt-icon { transform: translateX(4px); } .button[disabled], .button.is-disabled, .button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; box-shadow: none !important; transform: none !important; } /* Primary */ html body .button.primary:not(.is-outline), html body .button.secondary:not(.is-outline) { background-color: var(--agt-primary); background-image: var(--agt-grad); border-color: transparent; color: #fff; box-shadow: var(--agt-shadow-btn); } html body .button.primary:not(.is-outline):hover, html body .button.secondary:not(.is-outline):hover { background-color: var(--agt-dark); background-image: var(--agt-grad-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px color-mix(in srgb, var(--agt-primary) 32%, transparent); } html body .button.primary:not(.is-outline):active, html body .button.secondary:not(.is-outline):active { transform: none; } /* Secondary / outline – phủ nền khi hover */ html body .button.is-outline, html body .button.primary.is-outline, html body .button.secondary.is-outline { background-color: transparent; color: var(--agt-primary); border-color: var(--agt-primary); box-shadow: none; } html body .button.is-outline:hover { background-color: var(--agt-primary); border-color: var(--agt-primary); color: #fff; } /* Outline trên nền tối (nút trắng) – sửa lỗi nền trắng che chữ */ html body .button.white, html body .button.white.is-outline, html body .agt-btn--ghost { background-color: transparent !important; background-image: none !important; color: #fff !important; border-color: rgba(255, 255, 255, .7) !important; box-shadow: none !important; } html body .button.white:hover, html body .button.white.is-outline:hover, html body .agt-btn--ghost:hover { background-color: #fff !important; color: var(--agt-dark) !important; border-color: #fff !important; } .agt-hero2--bg-light .agt-btn--ghost { color: var(--agt-primary) !important; border-color: var(--agt-primary) !important; } .agt-hero2--bg-light .agt-btn--ghost:hover { background-color: var(--agt-primary) !important; color: #fff !important; } /* Text link có mũi tên, gạch chân chạy */ .agt-link-arrow, .agt-link { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 2px; font-family: var(--agt-font); font-size: 15px; font-weight: 700; color: var(--agt-primary); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1.5px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--agt-t-ui) var(--agt-ease), color var(--agt-t-hover); } .agt-link-arrow::after { content: ""; width: 16px; height: 10px; background: currentColor; -webkit-mask: var(--agt-arrow-svg) center / contain no-repeat; mask: var(--agt-arrow-svg) center / contain no-repeat; transition: transform var(--agt-t-hover) var(--agt-ease); } .agt-link-arrow .agt-icon { display: none; } .agt-link-arrow:hover, .agt-link:hover { background-size: 100% 1.5px; color: var(--agt-dark); } .agt-link-arrow:hover::after { transform: translateX(4px); } .dark .agt-link-arrow, .dark .agt-link-arrow:hover { color: var(--agt-accent); } /* 4. Header ------------------------------------------------------------------ */ #top-bar { display: none !important; } #header .header-main { background: #fff; border-bottom: 0; box-shadow: 0 1px 0 var(--agt-line); transition: height var(--agt-t-ui) var(--agt-ease), box-shadow var(--agt-t-ui) var(--agt-ease); } #header .header-main .logo img { transition: max-height var(--agt-t-ui) var(--agt-ease); width: auto; } .header-wrapper.stuck .header-main { box-shadow: 0 8px 24px rgba(11, 74, 31, .10); } .header-wrapper.stuck .header-main .logo img { max-height: 50px !important; } @media (min-width: 850px) { #header .header-main .header-inner > .flex-left { flex: 1 1 auto; margin: 0 24px !important; } #header .header-main .flex-left .header-nav-main { justify-content: center; } } #header .header-main .nav > li { margin: 0; } #header .header-main .nav > li > a { position: relative; padding: 10px clamp(8px, .9vw, 14px); font-family: var(--agt-font); font-size: 15px; font-weight: 500; color: var(--agt-ink); text-transform: none; letter-spacing: 0; } #header .header-main .nav > li > a::before { display: none !important; } #header .header-main .nav > li > a::after { content: ""; position: absolute; left: clamp(8px, .9vw, 14px); right: clamp(8px, .9vw, 14px); bottom: 0; height: 3px; border-radius: 3px; background: var(--agt-grad); transform: scaleX(0); transform-origin: left center; transition: transform var(--agt-t-ui) var(--agt-ease-out); } #header .header-main .nav > li > a:hover::after, #header .header-main .nav > li.active > a::after, #header .header-main .nav > li.current-dropdown > a::after { transform: scaleX(1); } #header .header-main .nav > li.active > a, #header .header-main .nav > li > a:hover { color: var(--agt-primary); } #header .header-main .nav > li.active > a { font-weight: 700; } #header .header-main .nav > li.has-dropdown > a .icon-angle-down { margin-left: 4px; font-size: 11px; opacity: .6; transition: transform var(--agt-t-ui) var(--agt-ease); } #header .header-main .nav > li.current-dropdown > a .icon-angle-down, #header .header-main .nav > li:hover > a .icon-angle-down { transform: rotate(180deg); opacity: 1; } #header .html_nav_position_text_top { display: list-item !important; } #header .agt-contact-button { min-height: 44px; padding: 0 20px; margin: 0 !important; font-size: 14.5px; } .agt-header-hotline { display: none; } .agt-topbar { display: flex; align-items: center; gap: 4px 22px; white-space: nowrap; } .agt-topbar__msg { display: inline-flex; align-items: center; gap: 10px; color: var(--agt-on-dark-muted); } .agt-topbar__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--agt-accent); } .agt-topbar__item { display: inline-flex; align-items: center; gap: 7px; color: var(--agt-on-dark) !important; text-decoration: none; font-weight: 500; text-transform: none; letter-spacing: 0; } .agt-topbar__item:hover { color: var(--agt-accent) !important; } .agt-topbar__label { color: var(--agt-on-dark-muted); font-weight: 400; } .agt-header-call { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--agt-grad); color: #fff !important; box-shadow: var(--agt-shadow-btn); } /* 5. Menu & mega menu -------------------------------------------------------- */ #header .header-nav-main > li.has-dropdown > .nav-dropdown { left: -15px; display: block; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity var(--agt-t-ui) var(--agt-ease), transform var(--agt-t-ui) var(--agt-ease-out), visibility 0s linear var(--agt-t-ui); border: 1px solid var(--agt-line) !important; border-radius: var(--agt-radius-lg) !important; box-shadow: var(--agt-shadow-hover); padding: 10px 0; min-width: 270px; background: #fff; } #header .header-nav-main > li.has-dropdown:hover > .nav-dropdown, #header .header-nav-main > li.has-dropdown.current-dropdown > .nav-dropdown, #header .header-nav-main > li.has-dropdown:focus-within > .nav-dropdown { visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition-delay: 0s; } #header .header-nav-main > li.has-dropdown.agt-kb-closed > .nav-dropdown { visibility: hidden; opacity: 0; pointer-events: none; } .nav-dropdown-has-arrow li.has-dropdown::before, .nav-dropdown-has-arrow li.has-dropdown::after { display: none !important; } .nav-dropdown > li > a { font-size: 15px; color: var(--agt-ink); padding: 10px 20px; border-bottom: 0 !important; text-transform: none; } .nav-dropdown > li > a:hover, .nav-dropdown > li.current-menu-item > a { color: var(--agt-primary); background: var(--agt-tint); } #header .header-nav-main > li.menu-item-has-block > .nav-dropdown { padding: 0; width: min(820px, calc(100vw - 64px)); left: -240px; overflow: hidden; } .nav-dropdown .row.agt-mega { margin: 0 !important; max-width: none !important; width: 100%; flex-wrap: nowrap; align-items: stretch; } .nav-dropdown .row.agt-mega > .col { padding: 0 !important; } .nav-dropdown .row.agt-mega > .col > .col-inner { height: 100%; } .agt-mega__list > .col-inner { padding: 26px 28px 22px; } .agt-mega__list > .col-inner > p:last-child { margin: 12px 0 0; } .agt-mega__title { font-size: 17px; font-weight: 700; margin: 0 0 4px; } .agt-mega__desc { font-size: 14px; color: var(--agt-muted); margin: 0 0 14px; line-height: 1.55; } .agt-mega__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .agt-mega__links a { display: grid; grid-template-columns: 28px 1fr; gap: 2px 10px; padding: 10px 12px; margin-inline: -12px; border-radius: var(--agt-radius); text-decoration: none; color: var(--agt-ink); transition: background-color var(--agt-t-hover) var(--agt-ease); } .agt-mega__links a:hover, .agt-mega__links a:focus-visible { background: var(--agt-tint); } .agt-mega__num { grid-row: span 2; font-size: 12px; font-weight: 700; color: var(--agt-leaf); padding-top: 3px; font-variant-numeric: tabular-nums; } .agt-mega__name { font-weight: 600; font-size: 15px; line-height: 1.35; } .agt-mega__sub { font-size: 13px; color: var(--agt-muted); line-height: 1.45; } .agt-mega__feature > .col-inner { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 320px; background: var(--agt-dark); overflow: hidden; } .agt-mega__feature .img { position: absolute !important; inset: 0; margin: 0 !important; width: 100% !important; } .agt-mega__feature .img-inner { height: 100%; padding: 0 !important; } .agt-mega__feature .img-inner img { width: 100%; height: 100%; object-fit: cover; opacity: .55; } .agt-mega__feature-body { position: relative; z-index: 1; padding: 22px 24px; background: linear-gradient(0deg, color-mix(in srgb, var(--agt-dark) 92%, transparent) 30%, transparent); } .agt-mega__feature-body p { color: var(--agt-on-dark); font-size: 14px; margin: 0 0 10px; line-height: 1.5; } .agt-mega__feature-body strong { display: block; font-family: var(--agt-font-head); font-size: 16px; margin-bottom: 4px; color: #fff; } .agt-mega__feature .agt-link-arrow { color: var(--agt-accent); font-size: 14px; } /* 6. Menu mobile ------------------------------------------------------------- */ .mobile-sidebar, .off-canvas .sidebar-menu, .off-canvas-left .mfp-content { background: #fff; } .mfp-bg.main-menu-overlay, .main-menu-overlay { background: var(--agt-dark) !important; opacity: .55 !important; } .off-canvas-left .mfp-content { width: min(92vw, 400px) !important; } .mobile-sidebar .sidebar-menu { padding-top: 64px; } .agt-offcanvas-head { position: absolute; top: 0; left: 0; right: 0; height: 64px; display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid var(--agt-line); background: #fff; z-index: 2; } .agt-offcanvas-head img { max-height: 40px; width: auto; } .off-canvas .mfp-close, .mfp-close.agt-close { width: 44px !important; height: 44px !important; top: 10px !important; right: auto !important; left: calc(min(92vw, 400px) - 56px) !important; opacity: 1 !important; color: var(--agt-ink) !important; background: var(--agt-bg-soft) !important; border-radius: 50% !important; display: grid !important; place-items: center; z-index: 1100 !important; } .mobile-sidebar .nav-sidebar > li { border-bottom: 1px solid var(--agt-line) !important; } .mobile-sidebar .nav-sidebar > li > a { display: flex; align-items: center; min-height: 52px; padding: 12px 20px !important; font-family: var(--agt-font); font-size: 16.5px; font-weight: 500; text-transform: none; color: var(--agt-ink); } .mobile-sidebar .nav-sidebar > li.active > a { color: var(--agt-primary); font-weight: 700; box-shadow: inset 3px 0 0 var(--agt-primary); } .mobile-sidebar .nav-sidebar .sub-menu, .mobile-sidebar .nav-sidebar .children { background: var(--agt-bg-soft); padding: 6px 0 10px; } .mobile-sidebar .nav-sidebar .sub-menu > li > a, .mobile-sidebar .nav-sidebar .children > li > a { min-height: 44px; display: flex; align-items: center; padding: 8px 20px 8px 34px !important; font-size: 15px; text-transform: none; color: var(--agt-ink); opacity: 1; } .mobile-sidebar .toggle { width: 52px !important; height: 52px !important; margin: 0 !important; border-left: 1px solid var(--agt-line); opacity: 1 !important; color: var(--agt-primary); } .mobile-sidebar .toggle i { transition: transform var(--agt-t-ui) var(--agt-ease); } .mobile-sidebar .active > .toggle i { transform: rotate(180deg); } .agt-offcanvas-contact { padding: 22px 20px 32px; } .agt-offcanvas-contact__cta { width: 100%; margin: 0 0 18px !important; } html.agt-menu-open .agt-mobile-bar { transform: translateY(110%); } /* 7. Section & nền ---------------------------------------------------------- */ .agt-sec { position: relative; } .agt-sec > .section-content { position: relative; z-index: 1; } /* Khoảng cách theo token; thêm class agt-sec--custom để dùng padding trong UX Builder */ .agt-sec.section:not(.agt-sec--custom) { padding-top: var(--agt-sec) !important; padding-bottom: var(--agt-sec) !important; } .agt-sec--tight.section:not(.agt-sec--custom) { padding-top: var(--agt-sec-half) !important; padding-bottom: var(--agt-sec-half) !important; } .agt-sec--flush-top.section:not(.agt-sec--custom) { padding-top: 0 !important; } .agt-sec .row + .row { margin-top: clamp(12px, 2vw, 26px); } .agt-section-head > .col-inner { max-width: 760px; } .agt-narrow > .col-inner, .col.agt-narrow:first-child > .col-inner { max-width: 820px; margin-inline: auto; } @media (min-width: 850px) { .agt-pl > .col-inner { padding-left: clamp(16px, 3.5vw, 56px); } } .agt-bg--white { background-color: #fff !important; } .agt-bg--light, .agt-sec--ivory { background-color: var(--agt-bg-soft) !important; } .agt-bg--soft-grad { background: linear-gradient(180deg, #fff 0%, var(--agt-bg-soft) 100%) !important; } .agt-bg--light::after, .agt-bg--graphic::after, .agt-bg--soft-grad::after, .agt-leafy::after { content: ""; position: absolute; right: -30px; top: -20px; width: 200px; height: 200px; background: var(--agt-leaf-svg) center / contain no-repeat; opacity: .13; transform: rotate(18deg); pointer-events: none; z-index: 0; } .agt-bg--graphic { background-color: #fff !important; overflow: hidden; } .agt-leafy::before { content: ""; position: absolute; left: -50px; bottom: -40px; width: 170px; height: 170px; background: var(--agt-leaf-svg) center / contain no-repeat; opacity: .12; transform: scaleX(-1) rotate(-10deg); pointer-events: none; z-index: 0; } .agt-bg--dark, .agt-sec--dark { background: radial-gradient(ellipse 50% 60% at 85% 15%, color-mix(in srgb, var(--agt-leaf) 30%, transparent), transparent 60%), linear-gradient(140deg, var(--agt-deep), var(--agt-dark) 55%, color-mix(in srgb, var(--agt-dark) 70%, var(--agt-primary))) !important; color: var(--agt-on-dark); } .agt-bg--dark::before, .agt-sec--dark::before { content: ""; position: absolute; inset: 0; background: var(--agt-leaf-svg) left -60px bottom -60px / 260px no-repeat; opacity: .12; pointer-events: none; } .agt-bg--dark .section-bg, .agt-sec--dark .section-bg { opacity: 0; } .agt-bg--image .section-bg .section-bg-overlay, .agt-bg--image .overlay { background: linear-gradient(90deg, color-mix(in srgb, var(--agt-deep) 94%, transparent) 0%, color-mix(in srgb, var(--agt-dark) 76%, transparent) 55%, color-mix(in srgb, var(--agt-dark) 38%, transparent) 100%) !important; } /* Họa tiết lá đung đưa (hero) */ .agt-leaf { position: absolute; width: 180px; height: 180px; background: var(--agt-leaf-svg) center / contain no-repeat; pointer-events: none; z-index: 0; transform-origin: 20% 90%; animation: agt-leaf-sway calc(9s / var(--agt-speed)) ease-in-out infinite alternate; } @keyframes agt-leaf-sway { from { transform: rotate(-4deg); } to { transform: rotate(5deg) translateY(-6px); } } /* 8. Hero ------------------------------------------------------------------- */ .agt-hero2 { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; min-height: var(--agt-hero-min, min(640px, calc(100svh - var(--agt-header-h)))); padding-block: clamp(36px, 5vw, 64px) clamp(56px, 6vw, 88px); background: var(--agt-dark); color: #fff; } .agt-hero2--inner { min-height: var(--agt-hero-min, 380px); padding-block: clamp(32px, 4vw, 56px); } .agt-hero2--bg-light { background: var(--agt-bg-soft); color: var(--agt-ink); } .agt-hero2--bg-gradient { background: linear-gradient(130deg, var(--agt-dark) 0%, color-mix(in srgb, var(--agt-dark) 45%, var(--agt-primary)) 100%); } .agt-hero2--bg-brand { background: radial-gradient(ellipse 55% 70% at 78% 45%, color-mix(in srgb, var(--agt-leaf) 55%, transparent) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 10% 100%, color-mix(in srgb, var(--agt-primary) 70%, transparent) 0%, transparent 60%), linear-gradient(120deg, var(--agt-deep) 0%, var(--agt-dark) 45%, color-mix(in srgb, var(--agt-dark) 60%, var(--agt-primary)) 100%); } .agt-hero2__bg { position: absolute; inset: 0; z-index: -2; } .agt-hero2__bg-img { width: 100%; height: 100%; object-fit: cover; } .agt-hero2--bg-image::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 40, 18, var(--agt-hero-overlay, .72)) 0%, rgba(8, 40, 18, calc(var(--agt-hero-overlay, .72) * .7)) 55%, rgba(8, 40, 18, calc(var(--agt-hero-overlay, .72) * .3)) 100%); } .agt-hero2__graphic { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .agt-hero2__graphic svg { position: absolute; width: 100%; height: 100%; } .agt-hero2__arc { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1; vector-effect: non-scaling-stroke; } .agt-hero2__arc--2 { stroke-dasharray: 2 8; } .agt-hero2__disc { fill: color-mix(in srgb, var(--agt-leaf) 20%, transparent); } .agt-hero2__grid line { stroke: rgba(255, 255, 255, .05); stroke-width: 1; vector-effect: non-scaling-stroke; } .agt-hero2--bg-brand .agt-hero2__grid { display: none; } .agt-hero2--bg-light .agt-hero2__arc { stroke: color-mix(in srgb, var(--agt-primary) 22%, transparent); } .agt-hero2--bg-light .agt-hero2__disc { fill: color-mix(in srgb, var(--agt-accent) 30%, transparent); } .agt-hero2--bg-light .agt-hero2__grid line { stroke: var(--agt-line); } .agt-hero2__stripe { position: absolute; right: -6%; top: -20%; width: 44%; height: 150%; background: linear-gradient(180deg, color-mix(in srgb, var(--agt-accent) 85%, transparent), color-mix(in srgb, var(--agt-leaf) 70%, transparent)); transform: skewX(-16deg); opacity: .2; z-index: -1; pointer-events: none; } .agt-hero2--img-left .agt-hero2__stripe { right: auto; left: -6%; transform: skewX(16deg); } .agt-hero2 .agt-leaf--tl { left: -40px; top: -30px; width: 220px; height: 220px; opacity: .5; filter: blur(1px); transform: scaleX(-1); } .agt-hero2 .agt-leaf--bl { left: 36%; bottom: -60px; width: 150px; height: 150px; opacity: .3; filter: blur(2px); } .agt-hero2__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 80px); align-items: center; } .agt-hero2--img-left .agt-hero2__content { order: 2; } .agt-hero2--no-image .agt-hero2__inner { grid-template-columns: minmax(0, 820px); } .agt-hero2--inner.agt-hero2--no-image { min-height: 0; } .agt-hero2__content { min-width: 0; } .agt-hero2__eyebrow { margin: 0 0 10px; } .agt-hero2__title { color: #fff; font-size: var(--agt-h1); font-weight: 700; line-height: 1.2; margin: 0 0 16px; max-width: 18ch; } .agt-hero2--home .agt-hero2__title { font-size: clamp(30px, 1.1rem + 2.2vw, 46px); } .agt-hero2--inner .agt-hero2__title { max-width: 22ch; } .agt-hero2__title em { font-style: normal; background: var(--agt-lime); -webkit-background-clip: text; background-clip: text; color: transparent; } .agt-hero2--bg-light .agt-hero2__title { color: var(--agt-ink); } .agt-hero2--bg-light .agt-hero2__title em { background: var(--agt-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .agt-hero2__title-m { display: none; } .agt-hero2__desc { font-size: var(--agt-fs-lead); line-height: 1.7; color: rgba(255, 255, 255, .86); max-width: 52ch; margin: 0 0 26px; } .agt-hero2--bg-light .agt-hero2__desc { color: var(--agt-muted); } .agt-hero2__actions { display: flex; flex-wrap: wrap; gap: 12px; } .agt-hero2__actions .button { margin: 0 !important; } .agt-hero2__points { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 26px; margin: 30px 0 0; padding: 0; max-width: 600px; } .agt-hero2__points li { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.35; max-width: 170px; color: rgba(255, 255, 255, .92); } .agt-hero2__pt-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .8); color: #fff; transition: background-color var(--agt-t-hover), transform var(--agt-t-ui) var(--agt-ease); } .agt-hero2__points li:hover .agt-hero2__pt-ico { background: rgba(255, 255, 255, .14); transform: rotate(-12deg); } .agt-hero2--bg-light .agt-hero2__pt-ico { border-color: var(--agt-primary); color: var(--agt-primary); } .agt-hero2--bg-light .agt-hero2__points li { color: var(--agt-ink); } .agt-hero2 .agt-breadcrumbs { margin-bottom: 20px; } .agt-hero2__media { position: relative; min-width: 0; padding: 0 0 30px 30px; } .agt-hero2--img-left .agt-hero2__media { padding: 0 30px 30px 0; } .agt-hero2__figure { position: relative; margin: 0 0 0 auto; width: 100%; max-height: min(580px, calc(100svh - 220px)); aspect-ratio: 4 / 4.8; border-radius: 18px; overflow: hidden; border: 5px solid rgba(255, 255, 255, .92); background: #12301b; box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .55); } .agt-hero2--inner .agt-hero2__figure { aspect-ratio: 5 / 4; } .agt-hero2__figure img, .agt-hero2__figure picture { display: block; width: 100%; height: 100%; } .agt-hero2__figure img { object-fit: cover; } .agt-hero2__figure--contain { background: #111; } .agt-hero2__figure--contain img { object-fit: contain; } .agt-hero2__inset { position: absolute; left: 0; bottom: 0; width: min(40%, 220px); margin: 0; aspect-ratio: 1; border-radius: 16px; overflow: hidden; border: 5px solid #fff; box-shadow: var(--agt-shadow-hover); } .agt-hero2--img-left .agt-hero2__inset { left: auto; right: 0; } .agt-hero2__inset img { width: 100%; height: 100%; object-fit: cover; display: block; } .agt-hero2__chip { position: absolute; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; max-width: 230px; border-radius: 12px; border-left: 4px solid var(--agt-leaf); background: #fff; color: var(--agt-ink); box-shadow: var(--agt-shadow-hover); font-size: 13px; line-height: 1.4; } .agt-hero2__chip--1 { top: 9%; left: 0; transform: translateX(-30%); } .agt-hero2__chip--2 { bottom: 16%; right: 16px; } .agt-hero2--img-left .agt-hero2__chip--1 { left: auto; right: 0; transform: translateX(30%); } .agt-hero2--img-left .agt-hero2__chip--2 { right: auto; left: 16px; } .agt-hero2__chip-k { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--agt-leaf); } .agt-hero2__chip-v { font-size: 13px; font-weight: 600; } .agt-hero2__scroll { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .7) !important; text-decoration: none; } .agt-hero2--bg-light .agt-hero2__scroll { color: var(--agt-muted) !important; } .agt-hero2__scroll-line { width: 1px; height: 32px; background: linear-gradient(currentColor, transparent); position: relative; overflow: hidden; } .agt-hero2__scroll-line::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--agt-accent); animation: agt-scroll-cue calc(2.2s * var(--agt-speed)) var(--agt-ease) infinite; } @keyframes agt-scroll-cue { to { top: 100%; } } .agt-anchor { display: block; position: relative; top: -10px; } .agt-picture { display: contents; } /* Hero cũ dạng ux_banner (nếu còn dùng) */ .agt-hero .overlay { background: linear-gradient(90deg, rgba(8, 40, 18, .9) 0%, rgba(8, 40, 18, .7) 40%, rgba(8, 40, 18, .15) 75%, transparent 100%) !important; } .agt-hero h1 { color: #fff; } .agt-hero h1 em { font-style: normal; color: var(--agt-accent); } /* 9. Section trang chủ ---------------------------------------------------------- */ /* Hàng thẻ tính năng nằm đè mép dưới hero */ .agt-overlap.section:not(.agt-sec--custom) { padding-top: 0 !important; } .agt-overlap .agt-overlap-row { position: relative; z-index: 3; margin-top: calc(-1 * clamp(40px, 4.5vw, 64px)); } /* "Về AGRITECH" – ảnh doanh nghiệp/thiết bị làm thành phần chính */ .agt-about-media > .col-inner { position: relative; } .agt-about-media .img-inner { border-radius: var(--agt-radius-lg); overflow: hidden; box-shadow: var(--agt-shadow-hover); aspect-ratio: 4 / 4.4; } .agt-about-media .img-inner img { width: 100%; height: 100%; object-fit: cover; } .agt-about-media > .col-inner::after { content: ""; position: absolute; left: -22px; bottom: -22px; width: 46%; height: 46%; border-radius: var(--agt-radius-lg); background: var(--agt-grad); opacity: .14; z-index: -1; } .agt-about-media > .col-inner::before { content: ""; position: absolute; right: -28px; top: -34px; width: 110px; height: 110px; background: var(--agt-leaf-svg) center / contain no-repeat; opacity: .55; transform: rotate(18deg); z-index: 2; pointer-events: none; } .agt-about-badge { position: absolute; right: 18px; bottom: 18px; z-index: 2; padding: 10px 16px; border-radius: 12px; background: rgba(255, 255, 255, .95); box-shadow: var(--agt-shadow); font-size: 13px; line-height: 1.4; max-width: 240px; } .agt-about-badge strong { display: block; font-family: var(--agt-font-head); font-size: 14px; color: var(--agt-ink); } .agt-checks { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; } .agt-checks li { position: relative; margin: 0; padding-left: 34px; font-size: 15px; line-height: 1.5; } .agt-checks li strong { display: block; font-family: var(--agt-font-head); font-weight: 600; color: var(--agt-ink); } .agt-checks li span { color: var(--agt-muted); font-size: 14px; } .agt-checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--agt-grad); } .agt-checks li::after { content: ""; position: absolute; left: 7px; top: 8px; width: 8px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); } .dark .agt-checks li strong { color: #fff; } .dark .agt-checks li span { color: var(--agt-on-dark-muted); } /* "Giải pháp" – danh sách icon tròn + ảnh máy lớn */ .agt-solution-media > .col-inner { position: relative; text-align: center; } .agt-solution-media > .col-inner::before { content: ""; position: absolute; inset: 8% 2% 4%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--agt-accent) 30%, transparent) 0%, transparent 68%); z-index: 0; } .agt-solution-media .img { position: relative; z-index: 1; } .agt-solution-media .img-inner { border-radius: var(--agt-radius-lg); overflow: hidden; box-shadow: 0 30px 60px -24px rgba(11, 74, 31, .45); } .agt-iconlist { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 18px; } .agt-iconlist li { display: grid; grid-template-columns: 58px 1fr; column-gap: 18px; align-items: start; margin: 0; } .agt-iconlist h3 { font-size: 18px; font-weight: 700; margin: 2px 0 4px; } .agt-iconlist p { margin: 0; color: var(--agt-muted); font-size: 15px; line-height: 1.6; } .agt-iconlist .agt-ico { grid-row: span 2; } /* wpautop chèn
/

rỗng sau icon trong nội dung UX Builder – ẩn để lưới không lệch */ .agt-ico + br, .agt-ico + p:empty, .agt-need__num + br, .agt-need__num + p:empty, .agt-feature > p:empty, .agt-need > p:empty, .agt-flow-step > p:empty, .agt-factor > p:empty { display: none; } .agt-iconlist li > :not(.agt-ico), .agt-feature > :not(.agt-ico), .agt-need > :not(.agt-need__num) { grid-column: 2; } .agt-solution-media .img-inner { aspect-ratio: 4 / 4.2; } .agt-solution-media .img-inner img { width: 100%; height: 100%; object-fit: cover; } .dark .agt-iconlist p { color: var(--agt-on-dark-muted); } .dark .agt-iconlist h3 { color: #fff; } /* Icon tròn (mask SVG) – dùng trong nội dung UX Builder: */ .agt-ico { position: relative; display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--agt-primary); color: var(--agt-primary); transition: transform var(--agt-t-ui) var(--agt-ease-out), background-color var(--agt-t-hover), color var(--agt-t-hover); } .agt-ico::before { content: ""; width: 28px; height: 28px; background: currentColor; -webkit-mask: var(--agt-ico) center / contain no-repeat; mask: var(--agt-ico) center / contain no-repeat; } .agt-ico--fill { border-color: transparent; background: var(--agt-grad); color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--agt-leaf) 14%, transparent), var(--agt-shadow-btn); } li:hover > .agt-ico, .agt-feature:hover .agt-ico, .agt-factor:hover .agt-ico { transform: rotate(-10deg) scale(1.05); } li:hover > .agt-ico:not(.agt-ico--fill) { background: var(--agt-primary); color: #fff; } .dark .agt-ico:not(.agt-ico--fill) { border-color: var(--agt-accent); color: var(--agt-accent); } .agt-ico--snow { --agt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M12 2v20M4.5 6.5l15 11M19.5 6.5l-15 11M9.5 3.5 12 6l2.5-2.5M9.5 20.5 12 18l2.5 2.5'/%3E%3C/svg%3E"); } .agt-ico--spark { --agt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9 7 7M17 17l2.1 2.1M4.9 19.1 7 17M17 7l2.1-2.1'/%3E%3C/svg%3E"); } .agt-ico--leaf { --agt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-8 5-13 14-14-1 9-6 14-14 14z'/%3E%3Cpath d='M5 19 13 11'/%3E%3C/svg%3E"); } .agt-ico--shield { --agt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.6 3 8.4 7 10 4-1.6 7-5.4 7-10V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); } .agt-ico--cabinet { --agt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='1.5'/%3E%3Cpath d='M5 8h14M9 12v5M15 12v5'/%3E%3C/svg%3E"); } .agt-ico--scale { --agt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16M12 4v16M5 8h14M5 8l-2 6h4zM19 8l-2 6h4z'/%3E%3C/svg%3E"); } .agt-ico--target { --agt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='12' r='1' fill='black'/%3E%3C/svg%3E"); } .agt-ico--flask { --agt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6L4.5 18.5A1.7 1.7 0 0 0 6 21h12a1.7 1.7 0 0 0 1.5-2.5L14 9V3M7 15h10'/%3E%3C/svg%3E"); } .agt-ico--air { --agt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3 8h11a3 3 0 1 0-3-3M3 12h15a3 3 0 1 1-3 3M3 16h8'/%3E%3C/svg%3E"); } .agt-ico--drop { --agt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 6.4 6 11a6 6 0 0 1-12 0c0-4.6 6-11 6-11z'/%3E%3C/svg%3E"); } /* 10. Thẻ & danh sách --------------------------------------------------------- */ /* Thẻ tính năng (agt-need): nền trắng, icon/số tròn bên trái */ .agt-need, .agt-feature { display: grid; grid-template-columns: 58px 1fr; column-gap: 16px; align-items: start; height: 100%; padding: 22px 22px 22px 20px; border: 1px solid var(--agt-line); border-radius: var(--agt-radius-lg); background: #fff; box-shadow: var(--agt-shadow); transition: transform var(--agt-t-ui) var(--agt-ease), box-shadow var(--agt-t-ui) var(--agt-ease), border-color var(--agt-t-hover); } .agt-need:hover, .agt-feature:hover { transform: translateY(-4px); box-shadow: var(--agt-shadow-hover); border-color: color-mix(in srgb, var(--agt-leaf) 40%, var(--agt-line)); } .agt-need__num { grid-row: span 2; display: grid; place-items: center; width: 58px; height: 58px; margin: 0; border-radius: 50%; background: var(--agt-grad); box-shadow: 0 0 0 6px color-mix(in srgb, var(--agt-leaf) 14%, transparent); color: #fff; font-family: var(--agt-font-head); font-size: 16px; font-weight: 700; transition: transform calc(450ms * var(--agt-speed)) var(--agt-ease-out); } .agt-need:hover .agt-need__num { transform: rotate(-10deg) scale(1.05); } .agt-need h3, .agt-feature h3 { font-size: 18px; font-weight: 700; margin: 4px 0 6px; line-height: 1.35; } .agt-need p, .agt-feature p { grid-column: 2; margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--agt-muted); } .agt-feature .agt-ico { grid-row: span 2; } .dark .agt-need { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); box-shadow: none; } .dark .agt-need h3 { color: #fff; } .dark .agt-need p { color: var(--agt-on-dark-muted); } /* Danh sách đánh số "cần cung cấp" */ .agt-ask { list-style: none; margin: 0; padding: 0; } .agt-ask-item { position: relative; margin: 0; padding: 18px 0 18px 62px; border-bottom: 1px solid var(--agt-line); } .agt-ask-item:first-child { border-top: 1px solid var(--agt-line); } .agt-ask-item::before { position: absolute; left: 0; top: 17px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--agt-primary); color: var(--agt-primary); font-family: var(--agt-font-head); font-weight: 700; font-size: 14px; content: "0" attr(data-step); transition: background-color var(--agt-t-hover), color var(--agt-t-hover), transform var(--agt-t-ui) var(--agt-ease); } .agt-ask-item:hover::before { background: var(--agt-primary); color: #fff; transform: scale(1.06); } .agt-ask-item h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; } .agt-ask-item p { margin: 0; color: var(--agt-muted); font-size: 15px; } .dark .agt-ask-item { border-color: var(--agt-line-dark); } .dark .agt-ask-item::before { border-color: var(--agt-accent); color: var(--agt-accent); } /* Yếu tố cần đánh giá (trang công nghệ) */ .agt-factor { height: 100%; padding: 26px 24px; border-radius: var(--agt-radius-lg); background: #fff; border: 1px solid var(--agt-line); border-top: 4px solid var(--agt-leaf); box-shadow: var(--agt-shadow); transition: transform var(--agt-t-ui) var(--agt-ease), box-shadow var(--agt-t-ui) var(--agt-ease); } .agt-factor:hover { transform: translateY(-4px); box-shadow: var(--agt-shadow-hover); } .agt-factor .agt-ico { margin-bottom: 14px; } .agt-factor h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; } .agt-factor p { margin: 0; font-size: 14.5px; color: var(--agt-muted); line-height: 1.6; } /* Sơ đồ công đoạn (trang công nghệ) */ .agt-flow { counter-reset: flow; } .agt-flow-step { position: relative; height: 100%; padding: 26px 22px 24px; border-radius: var(--agt-radius-lg); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); } .agt-flow-step .agt-ico { margin-bottom: 14px; } .agt-flow-step__k { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--agt-accent); margin-bottom: 6px; } .agt-flow-step h3 { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 6px; } .agt-flow-step p { margin: 0; font-size: 14.5px; color: var(--agt-on-dark-muted); line-height: 1.6; } .agt-flow-step--plasma { background: color-mix(in srgb, var(--agt-accent) 14%, transparent); border-color: color-mix(in srgb, var(--agt-accent) 45%, transparent); } @media (min-width: 850px) { .agt-flow > .col:not(:last-child) .agt-flow-step::after { content: ""; position: absolute; top: 52px; right: -22px; width: 24px; height: 12px; background: var(--agt-accent); -webkit-mask: var(--agt-arrow-svg) center / contain no-repeat; mask: var(--agt-arrow-svg) center / contain no-repeat; z-index: 2; } } /* Công đoạn dạng icon tròn (trang con dùng lại) */ .agt-stage { position: relative; padding: 0 0 0 72px; min-height: 56px; margin-bottom: 28px; } .agt-stage::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--agt-accent); box-sizing: border-box; } .agt-stage::after { content: ""; position: absolute; left: 14px; top: 14px; width: 28px; height: 28px; background: var(--agt-accent); -webkit-mask: var(--agt-ico, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 2v20M4.5 6.5l15 11M19.5 6.5l-15 11'/%3E%3C/svg%3E")) center / contain no-repeat; mask: var(--agt-ico, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 2v20M4.5 6.5l15 11M19.5 6.5l-15 11'/%3E%3C/svg%3E")) center / contain no-repeat; } .agt-stage__tag { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--agt-accent); margin-bottom: 6px; } .agt-stage h3 { color: #fff; font-size: 17px; margin-bottom: 6px; } .agt-stage p { color: var(--agt-on-dark-muted); margin: 0; font-size: 15px; } .agt-stage--light::before { border-color: var(--agt-primary); } .agt-stage--light::after { background: var(--agt-primary); } .agt-stage--light .agt-stage__tag { color: var(--agt-primary); } .agt-stage--light h3 { color: var(--agt-ink); } .agt-stage--light p { color: var(--agt-muted); } /* Tài liệu tham khảo */ .agt-refs__title { font-size: 16px; margin: 28px 0 10px; } .agt-refs { list-style: none; margin: 0; padding: 0; font-size: 13.5px; line-height: 1.55; color: var(--agt-muted); } .agt-refs li { margin: 0 0 10px; padding-left: 14px; border-left: 2px solid var(--agt-line); overflow-wrap: anywhere; } .agt-refs a { color: var(--agt-primary); } .agt-service { padding: 18px 20px; border-radius: var(--agt-radius-lg); background: #fff; border: 1px solid var(--agt-line); box-shadow: var(--agt-shadow); margin-bottom: 8px; } .agt-service h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; } .agt-service h3::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--agt-leaf); margin-right: 10px; vertical-align: middle; } .agt-service p { color: var(--agt-muted); font-size: 14.5px; margin: 0; } .dark .agt-service { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); box-shadow: none; } .dark .agt-service h3 { color: #fff; } .dark .agt-service p { color: var(--agt-on-dark-muted); } .agt-checklist, ul.agt-ticks, .agt-pill-list, .agt-footer__links { list-style: none; margin-left: 0; padding: 0; } html body :is(.agt-checklist, .agt-ticks, .agt-pill-list, .agt-footer__links, .agt-contact-list, .agt-chips ul, .agt-subnav ul, .agt-ask, .agt-mega__links, .agt-hero2__points, .agt-empty__links, .agt-404__links, .agt-checks, .agt-iconlist) > li { margin-left: 0; } .agt-checklist li { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; } .agt-checklist .agt-icon { color: var(--agt-leaf); margin-top: 4px; } ul.agt-ticks li { position: relative; padding-left: 28px; margin-bottom: 10px; } ul.agt-ticks li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 13px; height: 7px; border-left: 2px solid var(--agt-leaf); border-bottom: 2px solid var(--agt-leaf); transform: rotate(-45deg); } .dark ul.agt-ticks li::before { border-color: var(--agt-accent); } .agt-pill-list { display: flex; flex-wrap: wrap; gap: 8px; } .agt-pill-list li { padding: 7px 14px; border: 1px solid var(--agt-line); border-radius: var(--agt-pill); font-size: 14px; background: #fff; } .agt-card { background: #fff; border: 1px solid var(--agt-line); border-radius: var(--agt-radius-lg); padding: clamp(22px, 3vw, 38px); color: var(--agt-ink); box-shadow: var(--agt-shadow); } .agt-card--form { border-top: 4px solid var(--agt-leaf); box-shadow: var(--agt-shadow-hover); } .dark .agt-card, .dark .agt-card p, .dark .agt-card label, .dark .agt-card h2, .dark .agt-card li { color: var(--agt-ink); } .agt-notice { background: var(--agt-bg-soft); border: 1px solid var(--agt-line); border-left: 3px solid var(--agt-primary); border-radius: var(--agt-radius-sm); padding: 16px 18px; font-size: 15px; } .agt-notice p:last-child { margin-bottom: 0; } .agt-notice--sample { border-left-color: #C9A74B; background: #FBF8EE; } .agt-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--agt-pill); background: var(--agt-ink); color: #fff; } .agt-badge--sample { background: #FBF3DC; color: #5E4710; border: 1px solid #E5CF8C; } .agt-note { font-size: 14px; color: var(--agt-muted); border-top: 1px dashed var(--agt-line); padding-top: 14px; margin-top: 8px; max-width: 70ch; } .dark .agt-note { color: var(--agt-on-dark-muted); border-color: var(--agt-line-dark); } /* Ảnh */ .agt-photo .img-inner, .agt-frame .img-inner, .agt-frame img, .agt-tech-center .img-inner, .agt-app-panel .img-inner { border-radius: var(--agt-radius-lg); overflow: hidden; box-shadow: var(--agt-shadow); } .agt-photo img, .agt-zoom img, .agt-about-media img, .agt-app-panel img { transition: transform calc(800ms * var(--agt-speed)) var(--agt-ease); } .agt-photo:hover img, .agt-zoom:hover img, .agt-about-media:hover img { transform: scale(1.04); } .agt-frame { position: relative; } .agt-frame::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border-radius: var(--agt-radius-lg); background: var(--agt-grad); opacity: .14; z-index: 0; } .agt-frame .img-inner { position: relative; z-index: 1; } /* Bảng */ .agt-spec-table { width: 100%; border-collapse: collapse; margin: 0; font-size: 15px; background: #fff; } .agt-spec-table th, .agt-spec-table td { padding: 12px 16px; border-bottom: 1px solid var(--agt-line); text-align: left; vertical-align: top; } .agt-spec-table thead th { font-family: var(--agt-font); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--agt-dark); border-bottom: 0; } .agt-spec-table tbody th { width: 30%; font-weight: 700; background: var(--agt-bg-soft); } .agt-spec-table tbody tr:hover td { background: var(--agt-tint); } .agt-table-scroll { overflow-x: auto; margin: 1.4em 0; -webkit-overflow-scrolling: touch; border-radius: var(--agt-radius-lg); border: 1px solid var(--agt-line); } .agt-table-scroll table { min-width: 620px; } /* Breadcrumb */ .agt-breadcrumbs { font-size: 13.5px; margin-bottom: 16px; } .agt-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; } .agt-breadcrumbs li { margin: 0; color: var(--agt-muted); display: inline-flex; align-items: center; } .agt-breadcrumbs li + li::before { content: ""; width: 5px; height: 5px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); margin: 0 10px; opacity: .6; } .agt-breadcrumbs a { color: var(--agt-muted); text-decoration: none; } .agt-breadcrumbs a:hover { color: var(--agt-primary); text-decoration: underline; } .agt-breadcrumbs [aria-current] { color: var(--agt-ink); font-weight: 500; } .agt-breadcrumbs--light li, .agt-breadcrumbs--light a, .dark .agt-breadcrumbs li, .dark .agt-breadcrumbs a { color: rgba(255, 255, 255, .72); } .agt-breadcrumbs--light [aria-current], .dark .agt-breadcrumbs [aria-current] { color: #fff; } /* Đầu trang tự sinh (blog, lưu trữ, tìm kiếm) */ .agt-page-intro { position: relative; overflow: hidden; background: linear-gradient(130deg, var(--agt-deep), var(--agt-dark) 60%, color-mix(in srgb, var(--agt-dark) 65%, var(--agt-primary))); color: var(--agt-on-dark); padding-block: clamp(40px, 5vw, 72px) clamp(36px, 4.5vw, 60px); } .agt-page-intro::after { content: ""; position: absolute; width: 240px; height: 240px; right: -40px; top: -40px; background: var(--agt-leaf-svg) center / contain no-repeat; opacity: .2; transform: rotate(20deg); pointer-events: none; } .agt-page-intro .agt-container { position: relative; z-index: 1; } .agt-page-intro .agt-breadcrumbs li, .agt-page-intro .agt-breadcrumbs a { color: rgba(255, 255, 255, .72); } .agt-page-intro .agt-breadcrumbs [aria-current] { color: #fff; } .agt-page-intro__title { color: #fff; margin-bottom: 10px; font-size: var(--agt-h1); } .agt-page-intro__desc { color: var(--agt-on-dark-muted); max-width: 62ch; font-size: var(--agt-fs-lead); } .agt-page-intro__desc p:last-child { margin-bottom: 0; } /* Liên hệ */ .agt-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .agt-contact-list__item { display: flex; gap: 12px; align-items: flex-start; margin: 0; } .agt-contact-list__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--agt-tint); color: var(--agt-primary); flex: none; transition: transform var(--agt-t-ui) var(--agt-ease); } .agt-contact-list__item:hover .agt-contact-list__icon { transform: rotate(-10deg) scale(1.06); } .agt-contact-list__body { display: flex; flex-direction: column; min-width: 0; } .agt-contact-list__label { font-size: 12.5px; color: var(--agt-muted); } .agt-contact-list__value { font-weight: 700; color: var(--agt-ink); text-decoration: none; overflow-wrap: anywhere; } .agt-contact-list__value:hover { color: var(--agt-primary); text-decoration: underline; } .agt-contact-block__title { font-weight: 700; margin-bottom: 12px; } .agt-contact-block--card { background: #fff; border: 1px solid var(--agt-line); border-radius: var(--agt-radius-lg); padding: 24px; color: var(--agt-ink); box-shadow: var(--agt-shadow); } .agt-contact-block--compact .agt-contact-list { gap: 10px; } .agt-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .agt-quick a { display: flex; flex-direction: column; gap: 4px; padding: 22px; border: 1px solid var(--agt-line); border-radius: var(--agt-radius-lg); background: #fff; text-decoration: none; color: var(--agt-ink); box-shadow: var(--agt-shadow); transition: border-color var(--agt-t-hover), box-shadow var(--agt-t-ui), transform var(--agt-t-ui) var(--agt-ease); } .agt-quick a:hover { border-color: var(--agt-leaf); box-shadow: var(--agt-shadow-hover); transform: translateY(-3px); } .agt-quick__k { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--agt-leaf); } .agt-quick__v { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; } .agt-social { display: flex; gap: 10px; flex-wrap: wrap; } .agt-social__link { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); color: inherit; transition: background-color var(--agt-t-hover), border-color var(--agt-t-hover), transform var(--agt-t-ui) var(--agt-ease); } .agt-social__link:hover { background: var(--agt-leaf); border-color: var(--agt-leaf); color: #fff; transform: translateY(-2px); } /* Trên nền sáng: viền và icon màu thương hiệu */ .agt-sec:not(.dark) .agt-social .agt-social__link { border-color: var(--agt-line); color: var(--agt-primary); background: #fff; } .agt-sec:not(.dark) .agt-social .agt-social__link:hover { background: var(--agt-primary); border-color: var(--agt-primary); color: #fff; } .agt-footer .agt-social .agt-social__link { border-color: rgba(255, 255, 255, .35); color: #fff; background: transparent; } .agt-footer .agt-social .agt-social__link:hover { background: var(--agt-leaf); border-color: var(--agt-leaf); } /* 11. Tabs, accordion -------------------------------------------------------- */ .agt-app-tabs .nav { gap: 8px; border: 0 !important; margin-bottom: 24px; flex-wrap: wrap; } .agt-app-tabs .nav > li { margin: 0 !important; } .agt-app-tabs .nav > li > a { position: relative; padding: 10px 20px !important; border: 1.5px solid var(--agt-line) !important; border-radius: var(--agt-pill) !important; font-family: var(--agt-font); font-size: 14.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--agt-ink); background: #fff; transition: background-color var(--agt-t-hover), color var(--agt-t-hover), border-color var(--agt-t-hover); } .agt-app-tabs .nav > li > a::before { display: none !important; } .agt-app-tabs .nav > li > a:hover { border-color: var(--agt-primary) !important; color: var(--agt-primary); } .agt-app-tabs .nav > li.active > a { background: var(--agt-primary); background-image: var(--agt-grad); border-color: transparent !important; color: #fff; font-weight: 700; } .agt-app-tabs .tab-panels { padding: 0 !important; border: 0 !important; } .agt-app-tabs .tab-panels .panel.active { animation: agt-crossfade calc(480ms * var(--agt-speed)) var(--agt-ease) both; } .agt-app-tabs .tab-panels .panel.active .img-inner img { animation: agt-img-in calc(850ms * var(--agt-speed)) var(--agt-ease-out) both; } @keyframes agt-crossfade { from { opacity: 0; } to { opacity: 1; } } @keyframes agt-img-in { from { transform: scale(1.06); opacity: .5; } to { transform: none; opacity: 1; } } .agt-app-panel .img-inner { aspect-ratio: 16 / 11; } .agt-app-panel .img-inner img { width: 100%; height: 100%; object-fit: cover; } .agt-app-panel h3 { font-size: var(--agt-h3); margin-bottom: 10px; } .agt-app-panel p { color: var(--agt-muted); } .agt-app .banner { border-radius: var(--agt-radius-lg); overflow: hidden; margin-bottom: 0; } .agt-app .banner-bg img, .agt-app .banner-bg .bg { transition: transform calc(800ms * var(--agt-speed)) var(--agt-ease); } .agt-app:hover .banner-bg img, .agt-app:hover .banner-bg .bg { transform: scale(1.045); } .agt-app .overlay { background: linear-gradient(0deg, rgba(8, 40, 18, .9) 0%, rgba(8, 40, 18, .35) 55%, rgba(8, 40, 18, .05) 100%) !important; } .agt-app h2, .agt-app h3 { color: #fff; margin-bottom: 6px; font-size: clamp(20px, 1rem + .6vw, 26px); } .agt-app p { color: rgba(255, 255, 255, .88); margin-bottom: 12px; font-size: 15px; } .agt-app .agt-link-arrow { color: var(--agt-accent); } .agt-app .text-box .text-inner { padding: 0 clamp(18px, 3vw, 30px) clamp(18px, 2.5vw, 26px); } .agt-accordion .accordion-item { border: 1px solid var(--agt-line) !important; border-radius: var(--agt-radius-lg); background: #fff; margin-bottom: 12px; padding: 0 20px; box-shadow: 0 2px 8px rgba(11, 74, 31, .04); transition: box-shadow var(--agt-t-ui), border-color var(--agt-t-hover); } .agt-accordion .accordion-item:hover { border-color: color-mix(in srgb, var(--agt-leaf) 45%, var(--agt-line)) !important; } .agt-accordion .accordion-title { position: relative; border-top: 0 !important; padding: 18px 52px 18px 0; font-size: 16px; font-weight: 600; color: var(--agt-ink); background: transparent !important; transition: color var(--agt-t-hover); } .agt-accordion .accordion-title:hover, .agt-accordion .accordion-title.active { color: var(--agt-primary); } .agt-accordion .accordion-title .toggle { left: auto; right: 0; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; border: 1px solid var(--agt-line); display: grid; place-items: center; color: var(--agt-primary); transition: transform var(--agt-t-ui) var(--agt-ease), background-color var(--agt-t-hover), color var(--agt-t-hover); } .agt-accordion .accordion-title.active .toggle { transform: rotate(180deg); background: var(--agt-primary); background-image: var(--agt-grad); border-color: transparent; color: #fff; } .agt-accordion .accordion-inner { padding: 0 0 18px; color: var(--agt-muted); } .agt-accordion .accordion-inner > :last-child { margin-bottom: 0; } .agt-faq__item { border: 1px solid var(--agt-line); border-radius: var(--agt-radius-lg); background: #fff; margin-bottom: 12px; padding: 0 20px; } .agt-faq__q { list-style: none; cursor: pointer; padding: 18px 44px 18px 0; font-size: 16px; font-weight: 600; position: relative; } .agt-faq__q::-webkit-details-marker { display: none; } .agt-faq__q::after { content: ""; position: absolute; right: 8px; top: 24px; width: 10px; height: 10px; border-right: 2px solid var(--agt-primary); border-bottom: 2px solid var(--agt-primary); transform: rotate(45deg); transition: transform var(--agt-t-ui) var(--agt-ease); } .agt-faq__item[open] .agt-faq__q::after { transform: rotate(-135deg); top: 29px; } .agt-faq__item[open] .agt-faq__q { color: var(--agt-primary); } .agt-faq__a { padding: 0 0 18px; color: var(--agt-muted); } /* 12. Timeline -------------------------------------------------------------- */ .agt-steps { position: relative; --agt-progress: 0; } .agt-steps::before, .agt-steps::after { content: ""; position: absolute; left: calc(var(--agt-gutter) / 2 + 22px); right: calc(var(--agt-gutter) / 2 + 22px); top: 22px; height: 2px; background: var(--agt-line); } .agt-steps::after { background: var(--agt-grad); transform-origin: left center; transform: scaleX(var(--agt-progress)); transition: transform calc(900ms * var(--agt-speed)) var(--agt-ease-out); } .dark .agt-steps::before { background: var(--agt-line-dark); } .agt-steps .col { position: relative; z-index: 1; } .agt-step { position: relative; padding-top: 64px; } .agt-step__num { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--agt-line); background: #fff; color: var(--agt-muted); font-family: var(--agt-font-head); font-weight: 700; transition: background-color var(--agt-t-ui), color var(--agt-t-ui), border-color var(--agt-t-ui); } .agt-step.is-done .agt-step__num, .agt-step:hover .agt-step__num { background: var(--agt-primary); background-image: var(--agt-grad); border-color: transparent; color: #fff; box-shadow: var(--agt-shadow-btn); } .agt-bg--light .agt-step__num { background-color: var(--agt-bg-soft); } .agt-step h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; } .agt-step p { color: var(--agt-muted); font-size: 14.5px; margin: 0; } .dark .agt-step__num { background: var(--agt-dark); border-color: var(--agt-line-dark); color: var(--agt-on-dark-muted); } .dark .agt-step p { color: var(--agt-on-dark-muted); } @media (min-width: 850px) { .agt-steps > .col { flex: 1 1 0; max-width: none; } } /* 13. Form ------------------------------------------------------------------- */ .agt-form-wrap { position: relative; } .agt-form .agt-form__title, .agt-card .agt-form__title { font-size: clamp(20px, 1rem + .5vw, 24px); font-weight: 700; margin-bottom: 6px; color: var(--agt-ink); } .agt-form__intro { color: var(--agt-muted); margin-bottom: 20px; font-size: 15px; } .agt-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; } .agt-form-wrap--compact .agt-form__grid { grid-template-columns: 1fr; } .agt-field { display: flex; flex-direction: column; min-width: 0; } .agt-field--full { grid-column: 1 / -1; } .agt-field label { font-family: var(--agt-font); font-size: 14px; font-weight: 500; margin-bottom: 6px; color: var(--agt-ink); } .agt-field abbr { color: var(--agt-error); text-decoration: none; border: 0; } .agt-field__opt { font-weight: 400; color: var(--agt-muted); font-size: 13px; } .agt-form input[type="text"], .agt-form input[type="tel"], .agt-form input[type="email"], .agt-form textarea, .agt-filter select, .agt-search input[type="search"] { width: 100%; min-height: 46px; margin: 0; padding: 11px 15px; font-family: var(--agt-font); font-size: 16px; color: var(--agt-ink); background: #FBFDFA; border: 1px solid #D3DED1; border-radius: var(--agt-radius); box-shadow: none; transition: border-color var(--agt-t-hover), box-shadow var(--agt-t-hover), background-color var(--agt-t-hover); } .agt-form textarea { min-height: 112px; resize: vertical; } .agt-form input::placeholder, .agt-form textarea::placeholder { color: #94A096; } .agt-form input:hover, .agt-form textarea:hover { border-color: var(--agt-leaf); } .agt-form input:focus, .agt-form textarea:focus, .agt-filter select:focus, .agt-search input:focus { border-color: var(--agt-leaf); box-shadow: 0 0 0 4px color-mix(in srgb, var(--agt-leaf) 18%, transparent); outline: none; background: #fff; } .agt-field.has-error input, .agt-field.has-error textarea { border-color: var(--agt-error); background: #FFF8F7; } .agt-field__error { display: flex; align-items: center; gap: 6px; color: var(--agt-error); font-size: 13.5px; margin: 6px 0 0; } .agt-field__error::before { content: "!"; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--agt-error); color: #fff; font-size: 11px; font-weight: 700; flex: none; } .agt-check { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; font-weight: 400 !important; cursor: pointer; line-height: 1.55; } .agt-check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--agt-primary); } .agt-field--consent.has-error .agt-check { color: var(--agt-error); } .agt-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .agt-form__machine { background: var(--agt-tint); padding: 12px 16px; border-radius: var(--agt-radius); font-size: 15px; } .agt-form__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; } .agt-form__submit { margin: 0 !important; min-width: 220px; } .agt-form__alt { margin: 0; font-size: 14.5px; color: var(--agt-muted); } .agt-form__alt a { font-weight: 700; } .agt-form .agt-form__submit .agt-form__spinner { display: none; } .agt-form.is-loading .agt-form__submit .agt-form__spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: agt-spin .8s linear infinite; } .agt-form.is-loading .agt-form__submit { opacity: .85; cursor: progress; } @keyframes agt-spin { to { transform: rotate(360deg); } } .agt-form__status { margin-top: 16px; padding: 14px 16px; border-radius: var(--agt-radius); font-size: 15px; border: 1px solid; animation: agt-crossfade calc(300ms * var(--agt-speed)) var(--agt-ease) both; } .agt-form__status.is-success { background: #EEF6E6; border-color: #B7D79F; color: #1F4D25; } .agt-form__status.is-error { background: #FBEDEB; border-color: #EBB1AB; color: #7A1C15; } .agt-form__status.is-loading { background: var(--agt-bg-soft); border-color: var(--agt-line); color: var(--agt-ink); } /* 14. Máy sấy ----------------------------------------------------------------- */ .agt-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; padding: 20px; background: var(--agt-bg-soft); border: 1px solid var(--agt-line); border-radius: var(--agt-radius-lg); margin-bottom: 14px; } .agt-filter__field { display: flex; flex-direction: column; flex: 1 1 220px; } .agt-filter__field label { font-size: 13.5px; font-weight: 500; margin-bottom: 6px; } .agt-filter__actions { display: flex; align-items: center; gap: 14px; } .agt-filter__submit { margin: 0 !important; } .agt-filter__count { font-size: 14px; color: var(--agt-muted); margin-bottom: 20px; } .agt-machine-grid { display: grid; gap: clamp(18px, 2vw, 26px); grid-template-columns: repeat(var(--agt-cols, 3), minmax(0, 1fr)); } .agt-machine-grid--cols-1 { --agt-cols: 1; } .agt-machine-grid--cols-2 { --agt-cols: 2; } .agt-machine-grid--cols-3 { --agt-cols: 3; } .agt-machine-grid--cols-4 { --agt-cols: 4; } /* Card nhóm máy & card máy: cùng tỉ lệ ảnh, cùng xử lý màu, CTA ở đáy */ .agt-group > .col-inner, .agt-machine-card { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--agt-line); border-radius: var(--agt-radius-lg); overflow: hidden; box-shadow: var(--agt-shadow); transition: transform var(--agt-t-ui) var(--agt-ease), box-shadow var(--agt-t-ui) var(--agt-ease), border-color var(--agt-t-hover); } .agt-group:hover > .col-inner, .agt-machine-card:hover { transform: translateY(-4px); box-shadow: var(--agt-shadow-hover); border-color: color-mix(in srgb, var(--agt-leaf) 40%, var(--agt-line)); } .agt-group .img { margin: 0 !important; } .agt-group .img-inner, .agt-machine-card__media { position: relative; display: block; aspect-ratio: 4 / 3.4; overflow: hidden; padding: 0 !important; background: var(--agt-bg-soft); } .agt-group .img-inner img, .agt-machine-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; filter: saturate(1.04) contrast(1.02); transition: transform calc(800ms * var(--agt-speed)) var(--agt-ease); } .agt-group .img-inner::after, .agt-machine-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(11, 74, 31, .18)); pointer-events: none; } .agt-group:hover .img-inner img, .agt-machine-card:hover .agt-machine-card__media img { transform: scale(1.05); } .agt-group__body, .agt-machine-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; } .agt-group__label, .agt-machine-card__group { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--agt-leaf); margin: 0 0 6px; } .agt-group h3, .agt-machine-card__title { font-size: 18px; font-weight: 700; line-height: 1.35; margin-bottom: 8px; } .agt-machine-card__title a { color: var(--agt-ink); text-decoration: none; } .agt-machine-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .agt-machine-card__title a:hover { color: var(--agt-primary); } .agt-group p, .agt-machine-card__excerpt { color: var(--agt-muted); font-size: 14.5px; line-height: 1.6; } .agt-group__body > :last-child { margin-top: auto; margin-bottom: 0; } .agt-group > .col-inner > div:not(.img) { flex: 1; display: flex; flex-direction: column; } .agt-machine-card__media .agt-badge { position: absolute; left: 14px; top: 14px; z-index: 2; } .agt-machine-card__meta { font-size: 14px; margin-bottom: 4px; padding-top: 8px; border-top: 1px solid var(--agt-line); display: flex; justify-content: space-between; gap: 12px; } .agt-machine-card__meta + .agt-machine-card__meta { border-top: 0; padding-top: 0; } .agt-machine-card__meta span { color: var(--agt-muted); } .agt-machine-card__meta--price { margin-bottom: 16px; } .agt-machine-card .agt-link-arrow { margin-top: auto; position: relative; z-index: 2; align-self: flex-start; } .agt-empty { text-align: center; padding: clamp(32px, 6vw, 64px) 20px; border: 1px dashed var(--agt-line); border-radius: var(--agt-radius-lg); background: var(--agt-bg-soft); } .agt-empty__title { font-weight: 700; font-size: 18px; margin-bottom: 6px; } .agt-empty__links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px 0 0; padding: 0; } .agt-empty__links a { display: inline-block; padding: 9px 16px; border: 1px solid var(--agt-line); border-radius: var(--agt-pill); background: #fff; text-decoration: none; } /* Trang chi tiết máy */ .agt-machine__hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--agt-bg-soft), #fff); padding-block: 26px clamp(40px, 5vw, 68px); border-bottom: 1px solid var(--agt-line); } .agt-machine__hero::after { content: ""; position: absolute; right: -60px; top: 20px; width: 240px; height: 240px; background: var(--agt-leaf-svg) center / contain no-repeat; opacity: .1; transform: rotate(25deg); pointer-events: none; } .agt-machine__hero > .agt-container { position: relative; z-index: 1; } .agt-machine__top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 68px); align-items: start; } .agt-gallery__main { position: relative; margin: 0; border-radius: var(--agt-radius-lg); overflow: hidden; background: var(--agt-bg-soft); border: 1px solid var(--agt-line); box-shadow: var(--agt-shadow); } .agt-gallery__main img { width: 100%; aspect-ratio: 4 / 3.6; object-fit: contain; background: var(--agt-bg-soft); display: block; transition: opacity var(--agt-t-ui); } .agt-gallery__main .agt-badge { position: absolute; left: 16px; top: 16px; z-index: 2; } .agt-gallery__thumbs { list-style: none; display: flex; gap: 10px; margin: 12px 0 0; padding: 0; overflow-x: auto; } .agt-gallery__thumbs li { margin: 0; flex: none; } .agt-gallery__thumb { padding: 0; margin: 0; width: 76px; height: 76px; min-height: 0; border: 2px solid transparent; border-radius: var(--agt-radius); overflow: hidden; background: #fff; cursor: pointer; transition: border-color var(--agt-t-hover); } .agt-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .agt-gallery__thumb.is-active, .agt-gallery__thumb:hover { border-color: var(--agt-leaf); } .agt-machine__title { margin-bottom: 14px; font-size: var(--agt-h1); } .agt-machine__lead { font-size: var(--agt-fs-lead); color: var(--agt-muted); max-width: 52ch; } .agt-machine .agt-notice--sample { margin-bottom: 16px; } .agt-facts { margin: 20px 0 24px; border-top: 1px solid var(--agt-line); } .agt-facts > div { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--agt-line); } .agt-facts dt { color: var(--agt-muted); font-weight: 400; margin: 0; text-transform: none; font-size: 14.5px; letter-spacing: 0; } .agt-facts dd { margin: 0; font-weight: 700; text-transform: none; letter-spacing: 0; } .agt-machine__actions { display: flex; flex-wrap: wrap; gap: 12px; } .agt-machine__actions .button { margin: 0 !important; } .agt-machine__source { margin-top: 16px; font-size: 14.5px; } .agt-subnav { position: sticky; top: var(--agt-sticky-offset, 0px); z-index: 20; background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--agt-line); transition: top var(--agt-t-ui) var(--agt-ease); } .agt-subnav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; } .agt-subnav ul::-webkit-scrollbar { display: none; } .agt-subnav li { margin: 0; flex: none; } .agt-subnav a { position: relative; display: block; padding: 15px 14px; font-size: 14.5px; font-weight: 500; color: var(--agt-muted); text-decoration: none; } .agt-subnav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 3px; background: var(--agt-grad); transform: scaleX(0); transition: transform var(--agt-t-ui) var(--agt-ease-out); transform-origin: left; } .agt-subnav a:hover, .agt-subnav a.is-active { color: var(--agt-primary); } .agt-subnav a:hover::after, .agt-subnav a.is-active::after { transform: scaleX(1); } .agt-machine__section { padding-block: var(--agt-sec-half); scroll-margin-top: 130px; } .agt-machine__section--tint { background: var(--agt-bg-soft); } .agt-machine__section--form { position: relative; overflow: hidden; background: linear-gradient(140deg, var(--agt-deep), var(--agt-dark) 55%, color-mix(in srgb, var(--agt-dark) 70%, var(--agt-primary))); color: var(--agt-on-dark); } .agt-machine__section--form::before { content: ""; position: absolute; left: -60px; bottom: -60px; width: 260px; height: 260px; background: var(--agt-leaf-svg) center / contain no-repeat; opacity: .12; pointer-events: none; } .agt-machine__section--form > .agt-container { position: relative; } .agt-machine__section--form .agt-section-title { color: #fff; } .agt-machine__section--form .agt-machine__form-intro > p:not(.agt-eyebrow) { color: var(--agt-on-dark-muted); } .agt-machine__section--form .agt-eyebrow { color: var(--agt-accent); } .agt-machine__section--form .agt-contact-block--card { margin-top: 24px; } .agt-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); } .agt-two-col--wide-left { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .agt-two-col--form { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; } /* 15. Blog & bài viết ----------------------------------------------------------- */ .agt-blog__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 30px; } .agt-chips ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; } .agt-chips li { margin: 0; } .agt-chips a { display: inline-flex; align-items: center; min-height: 42px; padding: 6px 18px; border-radius: var(--agt-pill); border: 1.5px solid var(--agt-line); background: #fff; color: var(--agt-ink); font-size: 14.5px; font-weight: 500; text-decoration: none; transition: background-color var(--agt-t-hover), border-color var(--agt-t-hover), color var(--agt-t-hover); } .agt-chips a:hover { border-color: var(--agt-primary); color: var(--agt-primary); } .agt-chips a.is-active { background: var(--agt-primary); background-image: var(--agt-grad); border-color: transparent; color: #fff; } .agt-search { display: flex; flex: 0 1 380px; min-width: 0; } .agt-search input[type="search"] { flex: 1; min-width: 0; border-right: 0; border-radius: var(--agt-pill) 0 0 var(--agt-pill); padding-left: 20px; } .agt-search__btn { display: inline-flex; align-items: center; gap: 6px; margin: 0; min-height: 46px; padding: 0 18px; background: var(--agt-primary); background-image: var(--agt-grad); color: #fff; border: 0; border-radius: 0 var(--agt-pill) var(--agt-pill) 0; font-family: var(--agt-font); font-weight: 700; text-transform: none; cursor: pointer; } .agt-search__btn:hover { background-image: var(--agt-grad-hover); } .agt-post-grid { display: grid; gap: 28px 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .agt-post-featured { margin-bottom: 48px; } .agt-post-card { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--agt-line); border-radius: var(--agt-radius-lg); overflow: hidden; box-shadow: var(--agt-shadow); transition: transform var(--agt-t-ui) var(--agt-ease), box-shadow var(--agt-t-ui) var(--agt-ease); } .agt-post-card:hover { transform: translateY(-4px); box-shadow: var(--agt-shadow-hover); } .agt-post-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--agt-bg-soft); margin: 0; } .agt-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform calc(800ms * var(--agt-speed)) var(--agt-ease); } .agt-post-card:hover .agt-post-card__media img { transform: scale(1.05); } .agt-post-card__body { padding: 18px 20px 22px; } .agt-post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; color: var(--agt-muted); margin-bottom: 8px; } .agt-post-card__cat { position: relative; z-index: 2; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 11.5px; color: var(--agt-leaf); text-decoration: none; } .agt-post-card__title { font-size: 17.5px; font-weight: 700; line-height: 1.38; margin-bottom: 8px; overflow-wrap: anywhere; } .agt-post-card__title a { color: var(--agt-ink); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1.5px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--agt-t-ui) var(--agt-ease), color var(--agt-t-hover); } .agt-post-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .agt-post-card:hover .agt-post-card__title a { color: var(--agt-primary); background-size: 100% 1.5px; } .agt-post-card__excerpt { color: var(--agt-muted); font-size: 15px; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .agt-post-card--featured { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; } .agt-post-card--featured .agt-post-card__media { height: 100%; aspect-ratio: auto; min-height: 320px; } .agt-post-card--featured .agt-post-card__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 4vw, 48px); position: relative; overflow: hidden; } .agt-post-card--featured .agt-post-card__body::after { content: ""; position: absolute; right: -30px; top: -30px; width: 130px; height: 130px; background: var(--agt-leaf-svg) center / contain no-repeat; opacity: .18; transform: rotate(20deg); pointer-events: none; } .agt-post-card--featured .agt-post-card__title { font-size: var(--agt-h3); } .agt-pagination { margin-top: 52px; } .agt-pagination ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; } .agt-pagination li { margin: 0; } .agt-pagination a, .agt-pagination span { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--agt-line); border-radius: var(--agt-pill); text-decoration: none; color: var(--agt-ink); transition: border-color var(--agt-t-hover), color var(--agt-t-hover); } .agt-pagination .current { background: var(--agt-primary); border-color: var(--agt-primary); color: #fff; } .agt-pagination a:hover { border-color: var(--agt-primary); color: var(--agt-primary); } .agt-search-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .agt-search-result { display: flex; gap: 20px; margin: 0; padding: 18px; border: 1px solid var(--agt-line); border-radius: var(--agt-radius-lg); background: #fff; box-shadow: var(--agt-shadow); transition: border-color var(--agt-t-hover); } .agt-search-result:hover { border-color: var(--agt-leaf); } .agt-search-result__media { flex: none; width: 120px; height: 120px; border-radius: var(--agt-radius); overflow: hidden; } .agt-search-result__media img { width: 100%; height: 100%; object-fit: cover; } .agt-search-result__type { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--agt-leaf); margin: 0 0 4px; } .agt-search-result__title { font-size: 18px; font-weight: 700; margin-bottom: 6px; } .agt-search-result__title a { color: var(--agt-ink); text-decoration: none; } .agt-search-result__title a:hover { color: var(--agt-primary); } .agt-search-result__excerpt { margin: 0; color: var(--agt-muted); font-size: 15px; } /* blog_posts của Flatsome (trang chủ): card thống nhất + bản nổi bật ngang */ .agt-posts .col { padding-bottom: 24px; } .agt-posts .box-blog-post { height: 100%; background: #fff; border: 1px solid var(--agt-line); border-radius: var(--agt-radius-lg); overflow: hidden; box-shadow: var(--agt-shadow); transition: transform var(--agt-t-ui) var(--agt-ease), box-shadow var(--agt-t-ui) var(--agt-ease); } .agt-posts .box-blog-post:hover { transform: translateY(-4px); box-shadow: var(--agt-shadow-hover); } .agt-posts .box-blog-post .box-image { border-radius: 0; } .agt-posts .box-blog-post .box-image img { transition: transform calc(800ms * var(--agt-speed)) var(--agt-ease); } .agt-posts .box-blog-post:hover .box-image img { transform: scale(1.05); } .agt-posts .box-blog-post .box-text { padding: 18px 20px 22px; } .agt-posts .post-title { font-size: 17px; font-weight: 700; line-height: 1.38; } .agt-posts .post-title a { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1.5px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--agt-t-ui) var(--agt-ease); } .agt-posts .box-blog-post:hover .post-title a { background-size: 100% 1.5px; color: var(--agt-primary); } .agt-posts .is-divider, .agt-posts .post-meta, .agt-posts .badge { display: none; } .agt-posts .from_the_blog_excerpt { color: var(--agt-muted); font-size: 14.5px; } .agt-posts .cat-label, .agt-posts .box-blog-post .cat-label { background: transparent !important; color: var(--agt-leaf) !important; opacity: 1 !important; padding: 0 !important; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; } .agt-posts .button { margin: 12px 0 0 !important; min-height: 0; padding: 0; border: 0; background: none !important; box-shadow: none !important; color: var(--agt-primary) !important; font-size: 14.5px; } .agt-posts--featured .box-blog-post { display: flex; flex-direction: row; align-items: stretch; } .agt-posts--featured .box-blog-post .box-image { flex: 0 0 52%; width: 52% !important; } .agt-posts--featured .box-blog-post .box-image .image-cover { height: 100%; padding-top: 0 !important; min-height: 320px; } .agt-posts--featured .box-blog-post .box-text { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 4vw, 48px); position: relative; } .agt-posts--featured .box-blog-post .box-text::after { content: ""; position: absolute; right: -24px; top: -24px; width: 120px; height: 120px; background: var(--agt-leaf-svg) center / contain no-repeat; opacity: .2; transform: rotate(20deg); pointer-events: none; } .agt-posts--featured .post-title { font-size: var(--agt-h3); } /* Bài chi tiết */ .agt-progress { position: fixed; left: 0; top: 0; z-index: 1100; width: 100%; height: 3px; background: transparent; pointer-events: none; } .agt-progress__bar { height: 100%; background: var(--agt-grad); transform-origin: left center; transform: scaleX(var(--agt-read, 0)); } .admin-bar .agt-progress { top: 32px; } .agt-single__header { position: relative; padding-block: clamp(30px, 4.5vw, 58px) 30px; background: var(--agt-bg-soft); } .agt-single__title { font-size: var(--agt-h1); margin-bottom: 14px; max-width: 24ch; } .agt-single__lead { font-size: var(--agt-fs-lead); color: var(--agt-muted); max-width: 62ch; } .agt-single__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; color: var(--agt-muted); margin: 0; } .agt-single__meta span { display: inline-flex; align-items: center; gap: 6px; } .agt-single__cover { max-width: calc(1180px + var(--agt-gutter) * 2); margin: 0 auto 44px; position: relative; } .agt-single__cover::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; background: var(--agt-bg-soft); z-index: -1; } .agt-single__cover img { width: 100%; border-radius: var(--agt-radius-lg); aspect-ratio: 16 / 8.5; object-fit: cover; } .agt-single__layout { max-width: calc(1180px + var(--agt-gutter) * 2); padding-bottom: 72px; } .agt-single__layout.has-toc { display: grid; grid-template-columns: 250px minmax(0, var(--agt-read-width)); justify-content: space-between; gap: 56px; align-items: start; } .agt-single__layout:not(.has-toc) .agt-single__content { margin-inline: auto; } .agt-single__layout > *, .agt-single__content { min-width: 0; } .agt-prose .agt-table-scroll, .agt-prose > table { max-width: 100%; } .agt-toc { position: sticky; top: calc(var(--agt-sticky-offset, 70px) + 24px); } .agt-toc__box { border-left: 1px solid var(--agt-line); padding-left: 18px; } .agt-toc__title { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; margin-bottom: 12px; list-style: none; color: var(--agt-muted); } .agt-toc__title::-webkit-details-marker { display: none; } .agt-toc__list { list-style: none; margin: 0; padding: 0; } .agt-toc__item { position: relative; margin: 0 0 10px; font-size: 14.5px; line-height: 1.45; } .agt-toc__item--h3 { padding-left: 14px; font-size: 13.5px; } .agt-toc__item a { color: var(--agt-muted); text-decoration: none; transition: color var(--agt-t-hover); } .agt-toc__item a::before { content: ""; position: absolute; left: -19px; top: 0; bottom: 0; width: 2px; background: var(--agt-primary); transform: scaleY(0); transition: transform var(--agt-t-ui) var(--agt-ease); } .agt-toc__item a:hover, .agt-toc__item a.is-active { color: var(--agt-ink); } .agt-toc__item a.is-active { font-weight: 700; } .agt-toc__item a.is-active::before { transform: scaleY(1); } .agt-prose { font-size: 16.5px; line-height: 1.78; max-width: var(--agt-read-width); } .agt-prose--wide { max-width: 900px; } .agt-prose h2 { font-size: var(--agt-h2); margin: 1.9em 0 .55em; scroll-margin-top: 110px; } .agt-prose h3 { font-size: var(--agt-h3); margin: 1.7em 0 .5em; scroll-margin-top: 110px; } .agt-prose > :first-child { margin-top: 0; } .agt-prose ul, .agt-prose ol { margin-left: 1.3em; margin-bottom: 1.4em; } .agt-prose li { margin-bottom: .5em; } .agt-prose li::marker { color: var(--agt-leaf); } .agt-prose blockquote { border-left: 3px solid var(--agt-leaf); background: var(--agt-bg-soft); padding: 18px 22px; margin: 1.8em 0; font-style: normal; border-radius: 0 var(--agt-radius) var(--agt-radius) 0; } .agt-prose img { border-radius: var(--agt-radius-lg); } .agt-prose a:not(.button) { color: var(--agt-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color var(--agt-t-hover), color var(--agt-t-hover); } .agt-prose a:not(.button):hover { color: var(--agt-dark); text-decoration-thickness: 2px; } .agt-prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0; } .agt-prose th, .agt-prose td { border-bottom: 1px solid var(--agt-line); padding: 12px 14px; text-align: left; vertical-align: top; } .agt-prose thead th { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--agt-dark); } .agt-prose .agt-callout { background: var(--agt-tint); border-radius: var(--agt-radius-lg); padding: 20px 22px; margin: 2em 0; border-left: 3px solid var(--agt-leaf); } .agt-prose .agt-callout p:last-child { margin: 0; } .agt-single__cta { position: relative; overflow: hidden; margin-top: 52px; padding: clamp(24px, 4vw, 38px); background: linear-gradient(130deg, var(--agt-deep), var(--agt-dark) 60%, color-mix(in srgb, var(--agt-dark) 65%, var(--agt-primary))); border-radius: var(--agt-radius-lg); color: var(--agt-on-dark); } .agt-single__cta::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; background: var(--agt-leaf-svg) center / contain no-repeat; opacity: .22; transform: rotate(20deg); } .agt-single__cta p { color: var(--agt-on-dark-muted); position: relative; } .agt-single__cta-title { font-size: var(--agt-h3); font-weight: 700; color: #fff !important; margin-bottom: 8px; } .agt-single__cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; position: relative; z-index: 1; } .agt-single__cta-actions .button { margin: 0 !important; text-decoration: none !important; } .agt-single__cta .button.primary.is-outline { color: #fff; border-color: rgba(255, 255, 255, .7); } .agt-single__cta .button.primary.is-outline:hover { background: #fff; color: var(--agt-dark); } .agt-related { background: var(--agt-bg-soft); padding-block: var(--agt-sec); } .agt-404 { padding-block: clamp(56px, 10vw, 120px); background: var(--agt-bg-soft); } .agt-404__inner { max-width: 760px; text-align: center; } .agt-404__code { font-family: var(--agt-font-head); font-size: clamp(80px, 4rem + 6vw, 150px); font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--agt-leaf); margin-bottom: 8px; } .agt-404__desc { color: var(--agt-muted); margin-bottom: 24px; } .agt-404 .agt-search { margin: 0 auto 24px; max-width: 520px; } .agt-404__links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 20px; padding: 0; } .agt-404__links a { display: inline-block; padding: 10px 18px; border: 1px solid var(--agt-line); border-radius: var(--agt-pill); background: #fff; text-decoration: none; } .agt-404__links a:hover { border-color: var(--agt-leaf); } /* 16. Footer & CTA band --------------------------------------------------------- */ /* CTA band (UX Block "CTA – Nhận tư vấn giải pháp"): nền xanh đậm + ảnh, nội dung căn giữa */ .agt-ctaband { overflow: hidden; } .agt-ctaband .section-bg .section-bg-overlay { background: linear-gradient(90deg, rgba(8, 40, 18, .94) 0%, rgba(8, 40, 18, .82) 50%, rgba(8, 40, 18, .7) 100%) !important; } .agt-ctaband::before { content: ""; position: absolute; left: -40px; bottom: -50px; width: 220px; height: 220px; background: var(--agt-leaf-svg) center / contain no-repeat; opacity: .35; transform: scaleX(-1); pointer-events: none; z-index: 1; } .agt-ctaband::after { content: ""; position: absolute; right: -30px; top: -40px; width: 200px; height: 200px; background: var(--agt-leaf-svg) center / contain no-repeat; opacity: .3; transform: rotate(25deg); pointer-events: none; z-index: 1; } .agt-ctaband h2 { color: #fff; margin-bottom: 10px; } .agt-ctaband .agt-lead { color: rgba(255, 255, 255, .84); margin-inline: auto; margin-bottom: 24px; } .agt-ctaband .button { margin: 6px !important; } .agt-footer { position: relative; overflow: hidden; background: #072A12 !important; color: rgba(255, 255, 255, .74); font-size: 15px; } .agt-footer::before { content: ""; position: absolute; right: -50px; top: -40px; width: 260px; height: 260px; background: var(--agt-leaf-svg) center / contain no-repeat; opacity: .1; transform: rotate(25deg); pointer-events: none; } .agt-footer .section-content { position: relative; z-index: 1; } .agt-footer .agt-footer__title, .agt-footer h3 { font-family: var(--agt-font-head); font-size: 15px; font-weight: 700; color: #fff; letter-spacing: 0; text-transform: none; margin: 0 0 16px; padding-bottom: 10px; position: relative; } .agt-footer .agt-footer__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; border-radius: 3px; background: var(--agt-lime); } .agt-footer p { color: rgba(255, 255, 255, .72); font-size: 14.5px; line-height: 1.7; } .agt-footer a { color: rgba(255, 255, 255, .84); } .agt-footer a:hover { color: var(--agt-accent); } .agt-footer__brand .img { margin-bottom: 14px !important; } .agt-footer__brand img { background: #fff; padding: 8px 12px; border-radius: var(--agt-radius); } .agt-footer__company { font-family: var(--agt-font-head); font-weight: 700; font-size: 14.5px; line-height: 1.45; color: #fff !important; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 12px; } .agt-footer__links li { margin: 0 0 9px; font-size: 14.5px; } .agt-footer__links a { color: rgba(255, 255, 255, .78) !important; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: color var(--agt-t-hover), transform var(--agt-t-hover) var(--agt-ease); } .agt-footer__links a::before { content: ""; width: 6px; height: 6px; border-top: 1.5px solid var(--agt-accent); border-right: 1.5px solid var(--agt-accent); transform: rotate(45deg); opacity: .8; } .agt-footer__links a:hover { color: var(--agt-accent) !important; transform: translateX(3px); } .agt-contact-block--footer .agt-contact-list { gap: 12px; } .agt-contact-block--footer .agt-contact-list__item { align-items: center; } .agt-contact-block--footer .agt-contact-list__icon { width: 34px; height: 34px; background: rgba(141, 214, 59, .14); color: var(--agt-accent); } .agt-contact-block--footer .agt-contact-list__label { display: none; } .agt-contact-block--footer .agt-contact-list__value { color: #fff !important; font-weight: 500; font-size: 14.5px; line-height: 1.5; } .agt-footer__divider { border-top: 1px solid rgba(255, 255, 255, .1); } .absolute-footer { background: #05200D !important; color: rgba(255, 255, 255, .62); font-size: 13.5px; border-top: 1px solid rgba(255, 255, 255, .08); } .absolute-footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 20px; } .absolute-footer .footer-primary, .absolute-footer .footer-secondary { float: none; padding-block: 6px; } .absolute-footer a { color: rgba(255, 255, 255, .8) !important; } .absolute-footer a:hover { color: var(--agt-accent) !important; } .agt-float { position: fixed; right: 18px; bottom: 84px; z-index: 90; display: flex; flex-direction: column; gap: 10px; transition: opacity var(--agt-t-ui) var(--agt-ease), transform var(--agt-t-ui) var(--agt-ease); } .agt-float.is-hidden { opacity: 0; transform: translateX(16px); pointer-events: none; visibility: hidden; transition: opacity var(--agt-t-ui), transform var(--agt-t-ui), visibility 0s linear var(--agt-t-ui); } .agt-float__btn { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-radius: var(--agt-pill); background: var(--agt-primary); background-image: var(--agt-grad); color: #fff !important; text-decoration: none; font-weight: 700; font-size: 14.5px; box-shadow: var(--agt-shadow-btn); max-width: 48px; overflow: hidden; white-space: nowrap; transition: max-width var(--agt-t-ui) var(--agt-ease); } .agt-float__btn--zalo { background: #0068FF; } .agt-float__btn:hover, .agt-float__btn:focus-visible { max-width: 240px; } .agt-float__text { opacity: 0; transition: opacity var(--agt-t-hover); } .agt-float__btn:hover .agt-float__text, .agt-float__btn:focus-visible .agt-float__text { opacity: 1; } @media (max-width: 1539px) { .agt-float { display: none; } } .agt-mobile-bar { display: none; } .back-to-top { right: 18px !important; bottom: 20px !important; } /* 17. Hiệu ứng -------------------------------------------------------------------- */ /* Chỉ ẩn khi JS đã gắn lớp; nội dung luôn hiển thị nếu JS không chạy. */ .agt-js .agt-reveal-pending { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity var(--agt-t-reveal) var(--agt-ease), transform var(--agt-t-reveal) var(--agt-ease-out); transition-delay: var(--agt-delay, 0ms); } .agt-js .agt-reveal-pending.agt-fx-fade { transform: none; } .agt-js .agt-reveal-pending.agt-fx-left { transform: translate3d(-26px, 0, 0); } .agt-js .agt-reveal-pending.agt-fx-right { transform: translate3d(26px, 0, 0); } .agt-js .agt-reveal-pending.agt-fx-scale { transform: scale(.97); } .agt-js .agt-reveal-pending.is-visible { opacity: 1; transform: none; } .agt-js .agt-fx-mask.agt-reveal-pending { opacity: 1; transform: none; } .agt-js .agt-fx-mask.agt-reveal-pending .img-inner { clip-path: inset(0 0 100% 0 round var(--agt-radius-lg)); transition: clip-path calc(900ms * var(--agt-speed)) var(--agt-ease-out); } .agt-js .agt-fx-mask.agt-reveal-pending .img-inner img { transform: scale(1.1); transition: transform calc(1300ms * var(--agt-speed)) var(--agt-ease-out); } .agt-js .agt-fx-mask.agt-reveal-pending.is-visible .img-inner { clip-path: inset(0 0 0 0 round var(--agt-radius-lg)); } .agt-js .agt-fx-mask.agt-reveal-pending.is-visible .img-inner img { transform: none; } /* Thanh xanh trên nhãn viết tay mọc ra khi section vào màn hình */ .agt-js .agt-reveal-pending .agt-eyebrow::before { transform: scaleX(0); transition: transform calc(700ms * var(--agt-speed)) var(--agt-ease-out) .15s; } .agt-js .agt-reveal-pending.is-visible .agt-eyebrow::before { transform: scaleX(1); } /* Hero: nhãn → tiêu đề → mô tả → CTA */ .agt-js .agt-hero2:not(.agt-hero2--motion-off) .agt-seq { opacity: 0; transform: translate3d(0, 16px, 0); } .agt-js .agt-hero2.is-in .agt-seq { opacity: 1; transform: none; transition: opacity var(--agt-t-reveal) var(--agt-ease), transform calc(780ms * var(--agt-speed)) var(--agt-ease-out); transition-delay: calc(var(--i, 0) * 110ms * var(--agt-speed) + 80ms); } .agt-js .agt-hero2:not(.agt-hero2--motion-off) .agt-seq--media { transform: scale(.96); } .agt-js .agt-hero2.is-in .agt-seq--media { transform: none; transition-duration: calc(1050ms * var(--agt-speed)); } .agt-js-safe .agt-hero2 .agt-seq { opacity: 1 !important; transform: none !important; } .agt-hero2__graphic svg { animation: agt-drift calc(40s / var(--agt-speed)) linear infinite alternate; transform-origin: 70% 50%; } @keyframes agt-drift { from { transform: rotate(-4deg); } to { transform: rotate(4deg) translate3d(1%, -1%, 0); } } .agt-hero2--img-left .agt-hero2__graphic svg { animation-name: agt-drift-l; } @keyframes agt-drift-l { from { transform: scaleX(-1) rotate(-4deg); } to { transform: scaleX(-1) rotate(4deg); } } [data-agt-parallax] { will-change: transform; } .agt-js .agt-footer__cta.agt-reveal-pending { transform: translate3d(0, 24px, 0); } /* Ảnh dọc trong bố cục 2 cột không kéo section quá cao */ .agt-sec .col .img:not(.has-hover) .img-inner > img:only-child, .agt-sec .col .img .img-inner > img { max-height: min(600px, 80vh); object-fit: cover; width: 100%; } .agt-sec .col .img .img-inner[style*="padding-top"] > img, .agt-sec .col.agt-about-media .img .img-inner > img, .agt-sec .col.agt-solution-media .img .img-inner > img, .agt-sec .col.agt-group .img .img-inner > img, .agt-sec .agt-app-panel .col .img .img-inner > img { max-height: none; } /* 18. Responsive ------------------------------------------------------------------ */ @media (max-width: 1279px) { #header .header-main .nav > li > a { font-size: 14.5px; padding-inline: 9px; } } @media (max-width: 1100px) { #header .header-main .nav > li > a { font-size: 14px; padding-inline: 7px; } #header .agt-contact-button { padding: 0 16px; } } /* 850–1100px: menu desktop vẫn hiện – thu gọn để không xuống dòng, nút gọi chỉ còn icon */ @media (min-width: 850px) and (max-width: 1100px) { #header .header-main .nav > li > a { font-size: 13.5px; padding-inline: 5px; } #header .header-main .nav > li > a .icon-angle-down { display: none; } #header .flex-left { margin-inline: 12px !important; } #header .header-main .logo img { max-height: 48px; } #header .agt-contact-button { width: 44px; min-width: 44px; padding: 0; justify-content: center; } #header .agt-contact-button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } @media (max-width: 1023px) { .agt-post-grid, .agt-machine-grid--cols-3, .agt-machine-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .agt-machine__top, .agt-two-col, .agt-two-col--wide-left, .agt-two-col--form { grid-template-columns: 1fr; } .agt-single__layout.has-toc { grid-template-columns: 1fr; gap: 24px; } .agt-toc { position: static; } .agt-toc__box { border: 1px solid var(--agt-line); border-radius: var(--agt-radius-lg); padding: 14px 18px; background: var(--agt-bg-soft); } .agt-toc__item a::before { display: none; } .agt-post-card--featured, .agt-posts--featured .box-blog-post { grid-template-columns: 1fr; flex-direction: column; } .agt-posts--featured .box-blog-post .box-image { width: 100% !important; flex-basis: auto; } .agt-posts--featured .box-blog-post .box-image .image-cover { min-height: 0; padding-top: 60% !important; } .agt-hero2__chip--2 { display: none; } } @media (max-width: 849px) { :root { --agt-header-h: 66px; } .agt-hero2 { min-height: 0; padding-block: 28px 76px; } .agt-hero2--inner { padding-block: 24px 44px; } .agt-hero2__inner { grid-template-columns: 1fr; gap: 26px; } .agt-hero2--img-left .agt-hero2__content { order: 0; } .agt-hero2__title, .agt-hero2--inner .agt-hero2__title { max-width: none; } .agt-hero2__media { padding: 0 0 22px 22px; max-width: 540px; } .agt-hero2--img-left .agt-hero2__media { padding: 0 22px 22px 0; } .agt-hero2__figure { aspect-ratio: 4 / 3.4; } .agt-hero2__inset { width: 34%; border-width: 4px; } .agt-hero2__chip--1 { left: auto; right: 10px; top: 12px; transform: none; } .agt-hero2__graphic svg, .agt-leaf { animation: none; } .agt-hero2__scroll { display: none; } .agt-hero2__stripe { width: 70%; right: -30%; opacity: .12; } .agt-hero2 .agt-leaf--bl { display: none; } .agt-hero2 .agt-leaf--tl { width: 140px; height: 140px; left: -50px; top: -40px; opacity: .4; } .agt-hero2__points li { max-width: none; } .agt-overlap .agt-overlap-row { margin-top: -44px; } .agt-about-media > .col-inner::before { width: 80px; height: 80px; right: -10px; top: -24px; } .agt-about-media > .col-inner::after { left: -12px; bottom: -12px; } .agt-checks { grid-template-columns: 1fr; } .agt-steps::before, .agt-steps::after { left: calc(var(--agt-gutter) / 2 + 22px); right: auto; top: 0; bottom: 0; width: 2px; height: auto; } .agt-steps::after { transform: scaleY(var(--agt-progress)); transform-origin: top center; } .agt-step { padding: 2px 0 20px 64px; } .agt-steps .col { padding-bottom: 0; } .agt-quick { grid-template-columns: 1fr; } .agt-need, .agt-feature { grid-template-columns: 52px 1fr; padding: 18px; } .agt-need__num, .agt-feature .agt-ico { width: 52px; height: 52px; } .agt-bg--light::after, .agt-bg--graphic::after, .agt-bg--soft-grad::after, .agt-leafy::after, .agt-ctaband::after { width: 110px; height: 110px; } .agt-ctaband::before, .agt-leafy::before { width: 120px; height: 120px; } .agt-ctaband .button { width: 100%; margin: 6px 0 !important; } .agt-mobile-bar { display: grid; grid-template-columns: 1fr 1fr 1.2fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: #fff; border-top: 1px solid var(--agt-line); box-shadow: 0 -6px 20px rgba(11, 74, 31, .08); padding-bottom: env(safe-area-inset-bottom); transition: transform var(--agt-t-ui) var(--agt-ease); } .agt-mobile-bar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; font-size: 12.5px; font-weight: 700; color: var(--agt-dark) !important; text-decoration: none; } .agt-mobile-bar__item + .agt-mobile-bar__item { border-left: 1px solid var(--agt-line); } .agt-mobile-bar__item--cta { background: var(--agt-primary); background-image: var(--agt-grad); color: #fff !important; border-left: 0 !important; } body.agt-has-mobile-bar { padding-bottom: calc(58px + env(safe-area-inset-bottom)); } body.agt-has-mobile-bar .back-to-top { bottom: calc(72px + env(safe-area-inset-bottom)) !important; } .agt-frame::before { inset: 12px -10px -12px 10px; } .agt-facts > div { grid-template-columns: 140px 1fr; } .agt-footer .agt-footer__brand { text-align: left; } .absolute-footer .container { justify-content: center; text-align: center; } } @media (max-width: 549px) { :root { --agt-gutter: var(--agt-gutter-sm); --agt-script: 25px; } .section .row > .col { padding-left: var(--agt-gutter-sm); padding-right: var(--agt-gutter-sm); } .section .row .row { margin-left: 0 !important; margin-right: 0 !important; width: auto; } .section .row .row > .col { padding-left: 0; padding-right: 0; } .agt-post-grid, .agt-machine-grid--cols-2, .agt-machine-grid--cols-3, .agt-machine-grid--cols-4 { grid-template-columns: 1fr; } .agt-form__grid { grid-template-columns: 1fr; } .agt-form__submit, .agt-filter__actions, .agt-filter__submit { width: 100%; } .agt-search { flex-basis: 100%; } .agt-search-result { flex-direction: column; } .agt-search-result__media { width: 100%; height: auto; aspect-ratio: 3 / 2; } .agt-facts > div { grid-template-columns: 1fr; gap: 2px; } .agt-hero2__title-d { display: none; } .agt-hero2__title-m { display: inline; } .agt-hero2__actions .button, .agt-machine__actions .button, .agt-single__cta-actions .button { width: 100%; } .agt-hero2__media { padding: 0 0 16px 16px; } .agt-hero2__chip { display: none; } .agt-hero2__points { gap: 12px; } .agt-ask-item { padding-left: 58px; } .agt-frame::before { display: none; } .agt-post-card--featured .agt-post-card__media { min-height: 0; aspect-ratio: 3 / 2; height: auto; } .agt-footer .agt-footer__links li { font-size: 14px; } } /* 19. Giảm chuyển động ------------------------------------------------------------ */ body.agt-motion-off *, body.agt-motion-off *::before, body.agt-motion-off *::after { animation: none !important; transition-duration: 1ms !important; } body.agt-motion-off .agt-reveal-pending, body.agt-motion-off .agt-seq { opacity: 1 !important; transform: none !important; } body.agt-motion-off .agt-reveal-pending .img-inner, body.agt-motion-off .agt-reveal-pending .img-inner img { clip-path: none !important; transform: none !important; } body.agt-motion-reduced .agt-hero2__graphic svg, body.agt-motion-reduced .agt-leaf { animation: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } .agt-js .agt-reveal-pending, .agt-js .agt-hero2 .agt-seq { opacity: 1 !important; transform: none !important; } .agt-js .agt-fx-mask .img-inner, .agt-js .agt-fx-mask .img-inner img { clip-path: none !important; transform: none !important; } .agt-hero2__graphic svg, .agt-hero2__scroll-line::after, .agt-leaf { animation: none !important; } [data-agt-parallax] { transform: none !important; } html body .button:hover, .agt-need:hover, .agt-feature:hover, .agt-post-card:hover { transform: none !important; } } /* Footer trên điện thoại: gọn hơn, liên kết nhanh 2 cột */ @media (max-width: 549px) { .agt-footer .col { padding-bottom: 22px; } .agt-footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; } .agt-footer__links li { font-size: 14px; } .agt-footer__brand .img { max-width: 140px !important; } .agt-footer .agt-footer__title { margin-bottom: 12px; } .absolute-footer .container { justify-content: center; text-align: center; } } @media print { .agt-float, .agt-mobile-bar, .agt-subnav, .agt-toc, .agt-progress { display: none !important; } }