/* ========================================================================== Theme Hùng AI Nạp SAU main.css và chỉ áp dụng khi thẻ có class .brand-ai (đặt tại app/modules/homepage/views/frontend/common_ai/head.php), nên không đụng gì tới giao diện Hùng IN. Hướng thiết kế: bố cục kiểu tạp chí - chữ serif cho tiêu đề, đường kẻ mảnh thay cho khung viền dày, một màu nhấn duy nhất và ảnh cắt theo tỉ lệ cố định. ========================================================================== */ .brand-ai body { background: #080b12; color: #e8ebf3; font-family: 'Be Vietnam Pro', 'Open Sans', sans-serif; } .brand-ai a { color: #8fa8ff; } .brand-ai a:hover { color: #b7c6ff; text-decoration: none; } .brand-ai h1, .brand-ai h2, .brand-ai h3 { color: #f3f5fc; } .brand-ai img { max-width: 100%; } /* --- Thanh studio (editorial, không pill) --- */ .brand-ai .brandbar { background: linear-gradient(180deg, #0b0e16 0%, #080b12 100%); border-bottom: 1px solid rgba(255, 255, 255, .06); } .brand-ai .brandbar__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 12px 28px; padding: 14px 0 13px; } .brand-ai .brandbar__home { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; text-decoration: none; color: #d5dced; } .brand-ai .brandbar__mark { color: #8fa8ff; font-size: 12px; line-height: 1; opacity: .9; } .brand-ai .brandbar__studio { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; font-weight: 600; letter-spacing: .18em; text-indent: .18em; text-transform: uppercase; } .brand-ai .brandbar__home:hover { color: #f3f5fc; } .brand-ai .brandbar__switch { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .brand-ai .brandbar__switch a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 18px; text-decoration: none; color: #7f889f; -webkit-transition: color .25s ease; transition: color .25s ease; } .brand-ai .brandbar__name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px; font-weight: 500; line-height: 1.15; letter-spacing: .04em; } .brand-ai .brandbar__hint { margin-top: 2px; font-size: 10.5px; letter-spacing: .08em; text-transform: lowercase; font-variant: small-caps; opacity: .7; } .brand-ai .brandbar__sep { width: 1px; align-self: stretch; margin: 4px 2px; background: rgba(255, 255, 255, .12); } .brand-ai .brandbar__switch a:hover { color: #e8ebf3; } .brand-ai .brandbar__switch a.is-active { color: #f3f5fc; position: relative; } .brand-ai .brandbar__switch a.is-active::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: -13px; height: 2px; background: #8fa8ff; } /* --- Header --- */ .brand-ai .header { background: #080b12; border-bottom: 1px solid rgba(255, 255, 255, .07); } .brand-ai .header .logo { margin: 18px 0; } .brand-ai .header .logo a { text-decoration: none; } .brand-ai .logo-ai { display: block; } .brand-ai .logo-ai__name { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: .04em; color: #f3f5fc; } .brand-ai .logo-ai__tag { display: block; margin-top: 3px; font-size: 9.5px; letter-spacing: .36em; text-indent: .36em; text-transform: uppercase; color: #79839d; } .brand-ai .header p.name { color: #ccd3e6; font-size: 15px; font-family: 'Be Vietnam Pro', 'Open Sans', sans-serif; } .brand-ai .header span.address { color: #7c8599; font-size: 12.5px; } .brand-ai .header p.hotline { color: #7c8599; font-size: 12.5px; } .brand-ai .header p.hotline span { color: #8fa8ff; } /* --- Menu chính --- */ .brand-ai .main-menu, .brand-ai .main-menu nav.main-menu { background: #0b0f19; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .07); } .brand-ai .main-menu nav.main-menu ul li.main a.main, .brand-ai .main-menu nav.main-menu ul li a { color: #c1c9dd; text-transform: uppercase; font-size: 12.5px; letter-spacing: .04em; } .brand-ai .main-menu nav.main-menu li.uk-active > a, .brand-ai .main-menu nav.main-menu li.main:hover > a, .brand-ai .main-menu nav.main-menu ul li.main a.main:hover { background: rgba(66, 100, 190, .18); color: #fff; } .brand-ai .main-menu nav.main-menu ul li.main .uk-dropdown { background: #101527; border: 1px solid rgba(255, 255, 255, .09); } .brand-ai .main-menu nav.main-menu ul li.main .uk-dropdown ul li a { color: #c1c9dd; } .brand-ai .main-menu nav.main-menu ul li.main .uk-dropdown ul li a:hover { color: #fff; background: rgba(66, 100, 190, .18); } .brand-ai .main-menu .search input { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: #e8ebf3; } /* ========================================================================== Hero ========================================================================== */ .brand-ai .ai-hero { padding: 84px 0 70px; background: #080b12; border-bottom: 1px solid rgba(255, 255, 255, .07); } .brand-ai .ai-hero__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 56px; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } .brand-ai .ai-eyebrow { display: inline-block; margin-bottom: 20px; padding-bottom: 6px; border-bottom: 1px solid rgba(127, 156, 255, .45); font-size: 10.5px; font-weight: 600; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: #9fb3ff; } .brand-ai .ai-hero__title { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 62px; font-weight: 500; line-height: 1.04; letter-spacing: -.005em; } .brand-ai .ai-hero__lead { margin: 24px 0 0; max-width: 560px; font-size: 15.5px; line-height: 1.75; color: #98a1b8; } .brand-ai .ai-hero__actions { margin: 32px 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 12px; } /* Mục lục chuyên mục ở cột phải hero */ .brand-ai .ai-hero__index { padding-left: 40px; border-left: 1px solid rgba(255, 255, 255, .09); } .brand-ai .ai-hero__index-label { margin: 0 0 14px; font-size: 10.5px; font-weight: 600; letter-spacing: .28em; text-indent: .28em; text-transform: uppercase; color: #6d768f; } .brand-ai .ai-index { margin: 0; padding: 0; list-style: none; } .brand-ai .ai-index li { border-bottom: 1px solid rgba(255, 255, 255, .07); } .brand-ai .ai-index li:first-child { border-top: 1px solid rgba(255, 255, 255, .07); } .brand-ai .ai-index a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 14px; padding: 11px 0; color: #c4cbdd; font-size: 14px; -webkit-transition: color .2s ease, padding-left .2s ease; transition: color .2s ease, padding-left .2s ease; } .brand-ai .ai-index a:hover { color: #fff; padding-left: 6px; } .brand-ai .ai-index__count { -ms-flex-negative: 0; flex-shrink: 0; font-size: 11.5px; color: #656e87; font-variant-numeric: tabular-nums; } /* ========================================================================== Nút & liên kết ========================================================================== */ .brand-ai .ai-btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; padding: 13px 26px; border-radius: 2px; font-size: 13.5px; font-weight: 500; text-decoration: none; -webkit-transition: background-color .22s ease, border-color .22s ease, color .22s ease; transition: background-color .22s ease, border-color .22s ease, color .22s ease; } .brand-ai .ai-btn svg { -webkit-transition: -webkit-transform .22s ease; transition: transform .22s ease; } .brand-ai .ai-btn:hover svg { -webkit-transform: translateX(4px); transform: translateX(4px); } .brand-ai .ai-btn--primary { background: #3157bb; color: #fff; } .brand-ai .ai-btn--primary:hover { background: #4069d6; color: #fff; } .brand-ai .ai-btn--ghost { border: 1px solid rgba(255, 255, 255, .2); color: #d2d9ee; } .brand-ai .ai-btn--ghost:hover { border-color: rgba(255, 255, 255, .42); color: #fff; } .brand-ai .ai-link { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; -ms-flex-negative: 0; flex-shrink: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #9fb3ff; } .brand-ai .ai-link svg { -webkit-transition: -webkit-transform .22s ease; transition: transform .22s ease; } .brand-ai .ai-link:hover { color: #cdd8ff; } .brand-ai .ai-link:hover svg { -webkit-transform: translateX(4px); transform: translateX(4px); } /* ========================================================================== Khối nội dung chung ========================================================================== */ .brand-ai .ai-section { padding: 76px 0; } .brand-ai .ai-section--tight { padding-top: 64px; } .brand-ai .ai-section--alt { background: #0b0f19; } .brand-ai .ai-head { max-width: 680px; margin: 0 0 38px; } .brand-ai .ai-head--row { max-width: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .1); } .brand-ai .ai-head--row .ai-eyebrow { margin-bottom: 12px; } .brand-ai .ai-head__title { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 38px; font-weight: 500; line-height: 1.16; } .brand-ai .ai-head__lead { margin: 14px 0 0; font-size: 15px; line-height: 1.7; color: #98a1b8; } /* Nhãn chuyên mục + ngày đăng */ .brand-ai .ai-kicker { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: nowrap; flex-wrap: nowrap; gap: 10px; margin-bottom: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } /* Nhãn luôn gói trong một dòng: tên chuyên mục dài thì cắt bằng ba chấm, nếu để xuống dòng thì dấu phân cách trước ngày sẽ trôi ra đầu dòng. */ .brand-ai .ai-kicker__cat { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9fb3ff; } .brand-ai .ai-kicker__date { -ms-flex-negative: 0; flex-shrink: 0; white-space: nowrap; color: #6d768f; font-variant-numeric: tabular-nums; } .brand-ai .ai-kicker__cat + .ai-kicker__date::before { content: ''; display: inline-block; width: 3px; height: 3px; margin-right: 10px; border-radius: 50%; background: #454d63; vertical-align: middle; } /* Khung ảnh giữ tỉ lệ cố định, ảnh không bị méo dù nguồn lệch tỉ lệ */ .brand-ai .ai-ratio, .brand-ai .ai-feature__media, .brand-ai .ai-card__media, .brand-ai .ai-item__media, .brand-ai .ai-row__media { position: relative; display: block; overflow: hidden; background: #10151f; } .brand-ai .ai-feature__media img, .brand-ai .ai-card__media img, .brand-ai .ai-item__media img, .brand-ai .ai-row__media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: -webkit-transform .6s cubic-bezier(.2, .7, .3, 1); transition: transform .6s cubic-bezier(.2, .7, .3, 1); } /* ========================================================================== Tin tức nổi bật ========================================================================== */ .brand-ai .ai-feature { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 44px; margin-top: 34px; } .brand-ai .ai-feature__main { display: block; text-decoration: none; } .brand-ai .ai-feature__media { padding-top: 60%; } .brand-ai .ai-feature__main:hover .ai-feature__media img { -webkit-transform: scale(1.04); transform: scale(1.04); } .brand-ai .ai-feature__body { display: block; padding-top: 22px; } .brand-ai .ai-feature__title { display: block; margin-bottom: 12px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 32px; font-weight: 600; line-height: 1.22; color: #f3f5fc; -webkit-transition: color .2s ease; transition: color .2s ease; } .brand-ai .ai-feature__main:hover .ai-feature__title { color: #b7c6ff; } .brand-ai .ai-feature__desc { display: block; font-size: 14.5px; line-height: 1.72; color: #8b93a8; } .brand-ai .ai-feature__more { display: inline-block; margin-top: 16px; padding-bottom: 3px; border-bottom: 1px solid rgba(159, 179, 255, .4); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #9fb3ff; } .brand-ai .ai-feature__main:hover .ai-feature__more { border-bottom-color: #9fb3ff; } .brand-ai .ai-feature__list { margin: 0; padding: 0; list-style: none; } .brand-ai .ai-feature__list li { border-bottom: 1px solid rgba(255, 255, 255, .08); } .brand-ai .ai-feature__list li:first-child { border-top: 1px solid rgba(255, 255, 255, .08); } .brand-ai .ai-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) 92px; gap: 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 18px 0; text-decoration: none; } .brand-ai .ai-item__num { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; line-height: 1; color: #4d5675; font-variant-numeric: tabular-nums; } .brand-ai .ai-item__body { display: block; min-width: 0; } .brand-ai .ai-item .ai-kicker { margin-bottom: 7px; } .brand-ai .ai-item__title { display: block; font-size: 15px; font-weight: 500; line-height: 1.5; color: #dfe4f1; -webkit-transition: color .2s ease; transition: color .2s ease; } .brand-ai .ai-item:hover .ai-item__title { color: #b7c6ff; } .brand-ai .ai-item__media { padding-top: 68px; } .brand-ai .ai-item:hover .ai-item__media img { -webkit-transform: scale(1.06); transform: scale(1.06); } /* ========================================================================== Lưới bài mới ========================================================================== */ .brand-ai .ai-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 30px; margin-top: 34px; } .brand-ai .ai-card { display: block; text-decoration: none; } .brand-ai .ai-card__media { margin-bottom: 16px; padding-top: 63%; } .brand-ai .ai-card:hover .ai-card__media img { -webkit-transform: scale(1.05); transform: scale(1.05); } .brand-ai .ai-card__title { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 600; line-height: 1.45; color: #e8ebf3; -webkit-transition: color .2s ease; transition: color .2s ease; } .brand-ai .ai-card:hover .ai-card__title { color: #b7c6ff; } .brand-ai .ai-card__desc { display: block; font-size: 13.5px; line-height: 1.68; color: #838ca2; } /* ========================================================================== Chuyên mục ========================================================================== */ .brand-ai .ai-topic { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 44px; padding: 40px 0; border-top: 1px solid rgba(255, 255, 255, .09); } .brand-ai .ai-topic:first-child { border-top: 0; padding-top: 0; } .brand-ai .ai-topic:last-child { padding-bottom: 0; } .brand-ai .ai-topic__title { margin: 0 0 6px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 27px; font-weight: 600; line-height: 1.2; } .brand-ai .ai-topic__title a { color: #f3f5fc; } .brand-ai .ai-topic__title a:hover { color: #b7c6ff; } .brand-ai .ai-topic__count { margin: 0 0 16px; font-size: 12.5px; color: #6d768f; } .brand-ai .ai-topic__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 30px; margin: 0; padding: 0; list-style: none; } .brand-ai .ai-row { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 15px; text-decoration: none; } .brand-ai .ai-row__media { -ms-flex-negative: 0; flex-shrink: 0; width: 96px; padding-top: 70px; } .brand-ai .ai-row:hover .ai-row__media img { -webkit-transform: scale(1.06); transform: scale(1.06); } .brand-ai .ai-row__body { min-width: 0; } .brand-ai .ai-row__title { display: block; margin-bottom: 7px; font-size: 14.5px; font-weight: 500; line-height: 1.48; color: #dfe4f1; -webkit-transition: color .2s ease; transition: color .2s ease; } .brand-ai .ai-row:hover .ai-row__title { color: #b7c6ff; } /* ========================================================================== Dịch vụ & quy trình ========================================================================== */ .brand-ai .ai-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 0; padding: 0; list-style: none; } .brand-ai .ai-service { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 18px; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, .09); } .brand-ai .ai-service__num { -ms-flex-negative: 0; flex-shrink: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; line-height: 1.4; color: #5b6a9c; font-variant-numeric: tabular-nums; } .brand-ai .ai-service__title { margin: 0 0 7px; font-size: 16.5px; font-weight: 600; line-height: 1.35; } .brand-ai .ai-service__desc { margin: 0; font-size: 13.8px; line-height: 1.68; color: #8b93a8; } .brand-ai .ai-flow { margin-top: 52px; } .brand-ai .ai-flow__label { margin: 0 0 18px; font-size: 10.5px; font-weight: 600; letter-spacing: .28em; text-indent: .28em; text-transform: uppercase; color: #6d768f; } .brand-ai .ai-flow__rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(127, 156, 255, .3); } .brand-ai .ai-flow__step { padding: 20px 24px 4px 0; border-left: 1px solid rgba(255, 255, 255, .09); padding-left: 22px; } .brand-ai .ai-flow__step:first-child { border-left: 0; padding-left: 0; } .brand-ai .ai-flow__num { display: block; margin-bottom: 10px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; line-height: 1; color: #5b6a9c; } .brand-ai .ai-flow__title { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; color: #e8ebf3; } .brand-ai .ai-flow__desc { display: block; font-size: 13.2px; line-height: 1.62; color: #838ca2; } /* ========================================================================== CTA ========================================================================== */ .brand-ai .ai-cta { padding: 64px 0; background: #080b12; border-top: 1px solid rgba(255, 255, 255, .07); } .brand-ai .ai-cta__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 28px; padding: 38px 40px; border: 1px solid rgba(255, 255, 255, .1); border-left: 2px solid #3157bb; background: #0b0f19; } .brand-ai .ai-cta__text { max-width: 560px; } .brand-ai .ai-cta__title { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 34px; font-weight: 500; line-height: 1.18; } .brand-ai .ai-cta__desc { margin: 12px 0 0; font-size: 14.5px; line-height: 1.7; color: #98a1b8; } .brand-ai .ai-cta__actions { margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 12px; } /* ========================================================================== Trang danh mục & trang bài viết Markup do bộ view dùng chung của Hùng IN sinh ra (thiết kế cho nền sáng), nên ở đây ghi đè lại cho nền tối: bỏ lớp overlay hover, đưa tiêu đề xuống dưới ảnh và cho ảnh chạy trong khung tỉ lệ cố định. ========================================================================== */ .brand-ai .wp-breadcrumb { border-bottom: 1px solid rgba(255, 255, 255, .07); } .brand-ai .fc-breadcrumb { padding: 16px 0; } .brand-ai .fc-breadcrumb .uk-breadcrumb > li, .brand-ai .fc-breadcrumb .uk-breadcrumb > li > a, .brand-ai .fc-breadcrumb .uk-breadcrumb > li > span, .brand-ai .fc-breadcrumb .uk-breadcrumb h1, .brand-ai .fc-breadcrumb .uk-breadcrumb h2, .brand-ai .fc-breadcrumb .uk-breadcrumb h3 { font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #7d8699; } .brand-ai .fc-breadcrumb .uk-breadcrumb > li > a:hover, .brand-ai .fc-breadcrumb .uk-breadcrumb > li:last-child a { color: #cdd6ee; } .brand-ai .wp-listarticle { padding: 44px 0 72px; } .brand-ai .index-art-cata .itemnews01 { background: none; border: 0; box-shadow: none; } /* Panel hover nền trắng của theme gốc đè lên chữ khi ở nền tối */ .brand-ai .index-art-cata .stocky_hover_details, .brand-ai .index-art-cata .stocky_hover_lines { display: none !important; } .brand-ai .index-art-cata .itemnews01 figure { position: relative; display: block; overflow: hidden; margin: 0 0 15px; padding-top: 68%; background: #10151f; } .brand-ai .index-art-cata .itemnews01 figure a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .brand-ai .index-art-cata .itemnews01 figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: -webkit-transform .6s cubic-bezier(.2, .7, .3, 1); transition: transform .6s cubic-bezier(.2, .7, .3, 1); } .brand-ai .index-art-cata .itemnews01:hover figure img { -webkit-transform: scale(1.05); transform: scale(1.05); } /* Theme gốc để tiêu đề nằm đè lên ảnh và ẩn đi (opacity 0) chờ hover; ở đây đưa hẳn xuống dưới ảnh và luôn hiển thị. */ .brand-ai .index-art-cata .itemnews01 .itemnewstitle, .brand-ai .index-art-cata .childitemnews .itemnewstitle, .brand-ai .index-art-cata .text-items-products { position: static; width: auto; margin: 0; padding: 0; opacity: 1; background: none; text-align: left; } .brand-ai .index-art-cata .itemnewstitle a { display: block; font-family: 'Be Vietnam Pro', 'Open Sans', sans-serif; font-size: 15.5px; font-weight: 600; line-height: 1.46; color: #e8ebf3; text-transform: none; -webkit-transition: color .2s ease; transition: color .2s ease; } .brand-ai .index-art-cata .itemnewstitle a:hover { color: #b7c6ff; } .brand-ai #loadMore, .brand-ai .uk-button-primary { padding: 12px 26px; border: 0; border-radius: 2px; background: #3157bb; color: #fff; font-size: 13px; font-weight: 500; text-transform: none; } .brand-ai #loadMore:hover, .brand-ai .uk-button-primary:hover { background: #4069d6; } .brand-ai .uk-alert-danger { background: rgba(190, 70, 70, .12); border: 1px solid rgba(220, 110, 110, .3); color: #e7b9b9; } /* Sidebar bài viết */ .brand-ai .aside .aside-news { margin-bottom: 22px; background: none; border: 1px solid rgba(255, 255, 255, .09); } .brand-ai #right-content-article .aside .aside-news .title, .brand-ai .aside .aside-news .title { background: rgba(49, 87, 187, .16); border-bottom: 1px solid rgba(255, 255, 255, .09); color: #dfe5f5; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } /* Danh sách vốn có viền riêng, bỏ đi để không lồng hai khung */ .brand-ai #right-content-article .aside .aside-news .list-aside-news { margin-bottom: 0; border: 0; } .brand-ai .aside .list-aside-news li, .brand-ai .aside .uk-panel { border-color: rgba(255, 255, 255, .07); } /* Theme gốc khoá màu chữ bằng selector có #id nên phải bám theo cùng mức */ .brand-ai #right-content-article .aside .aside-news .list-aside-news li p, .brand-ai #right-content-article .aside .aside-news .list-aside-news li p a, .brand-ai .aside .contentsupport p, .brand-ai .aside .contentsupport a { color: #c2cadd; font-size: 13.5px; } .brand-ai #right-content-article .aside .aside-news .list-aside-news li p a:hover { color: #b7c6ff; } .brand-ai .aside .contentsupport .phone { color: #8fa8ff; font-weight: 600; } /* Nội dung bài viết */ .brand-ai #articlecontent { color: #ccd3e4; } .brand-ai #articlecontent h1.title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 40px; font-weight: 600; line-height: 1.18; color: #f3f5fc; } .brand-ai #articlecontent .meta { border-top: 1px solid rgba(255, 255, 255, .09); border-bottom: 1px solid rgba(255, 255, 255, .09); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #7d8699; } .brand-ai #articlecontent h2, .brand-ai #articlecontent h3, .brand-ai #articlecontent h4 { color: #eef1fa; } .brand-ai #articlecontent a { color: #8fa8ff; } .brand-ai #articlecontent td, .brand-ai #articlecontent th, .brand-ai #articlecontent table { border-color: rgba(255, 255, 255, .12); } .brand-ai #articlecontent blockquote { border-left: 2px solid rgba(127, 156, 255, .5); color: #b9c2d8; } /* Bài viết nhập từ web cũ mang theo style màu chữ tối gắn trực tiếp vào thẻ. Đây là lớp chặn cho các giá trị hay gặp nhất; hungai-readable.js xử lý phần còn lại theo tỉ lệ tương phản thực tế. */ .brand-ai #articlecontent [style*="color:#000"], .brand-ai #articlecontent [style*="color: #000"], .brand-ai #articlecontent [style*="color:#333"], .brand-ai #articlecontent [style*="color: #333"], .brand-ai #articlecontent [style*="color:black"], .brand-ai #articlecontent [style*="color: black"], .brand-ai #articlecontent [style*="color:rgb(0"], .brand-ai #articlecontent [style*="color: rgb(0"], .brand-ai #articlecontent [style*="color:rgb(8,"], .brand-ai #articlecontent [style*="color: rgb(8,"] { color: #ccd3e4 !important; } .brand-ai #articlecontent .tags .uk-button { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #c2cadd; } .brand-ai #articlecontent .tags .uk-button:hover { background: rgba(49, 87, 187, .3); color: #fff; } /* Các khối nền sáng của theme gốc: đổi sang nền tối cùng tông trang */ .brand-ai #articlecontent .latest-post { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); } .brand-ai #articlecontent .fcontent { background: rgba(49, 87, 187, .12); border: 1px solid rgba(255, 255, 255, .08); color: #c2cadd; } .brand-ai #articlecontent .uk-panel-box { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); color: #dfe5f5; } .brand-ai #articlecontent .latest-post h5, .brand-ai #articlecontent .tags h5 { color: #dfe5f5; } .brand-ai #articlecontent .latest-post .uk-text-bold { color: #dfe5f5; border-bottom-color: rgba(255, 255, 255, .16); } .brand-ai #articlecontent .latest-post ul { list-style: none; padding: 0; } .brand-ai #articlecontent .latest-post li { border-bottom: 1px solid rgba(255, 255, 255, .07); padding: 9px 0; } .brand-ai #articlecontent .latest-post li a { color: #c8d0e4; } .brand-ai #articlecontent .latest-post li a:hover { color: #b7c6ff; } /* ========================================================================== Chân trang ========================================================================== */ .brand-ai .ai-foot { padding: 62px 0 34px; background: #05070c; border-top: 1px solid rgba(255, 255, 255, .07); } .brand-ai .ai-foot__brand { margin: 0 0 12px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; font-weight: 600; color: #f3f5fc; } .brand-ai .ai-foot__note, .brand-ai .ai-foot__line { margin: 0 0 8px; font-size: 13.5px; line-height: 1.66; color: #8b93a8; } .brand-ai .ai-foot__label { margin: 0 0 14px; font-size: 10.5px; font-weight: 600; letter-spacing: .28em; text-indent: .28em; text-transform: uppercase; color: #6d768f; } .brand-ai .ai-foot__switch { margin: 16px 0 0; font-size: 13.5px; } .brand-ai .ai-foot__social a { margin-right: 8px; background: rgba(255, 255, 255, .06); color: #b6c0d9; } .brand-ai .ai-foot__social a:hover { background: #3157bb; color: #fff; } .brand-ai .ai-foot__copy { margin: 40px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 12.5px; color: #6d768f; } .brand-ai .maps { line-height: 0; } .brand-ai .maps iframe { -webkit-filter: invert(.9) hue-rotate(180deg); filter: invert(.9) hue-rotate(180deg); } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1099px) { .brand-ai .ai-hero__grid { gap: 40px; } .brand-ai .ai-hero__title { font-size: 52px; } .brand-ai .ai-feature { gap: 34px; } .brand-ai .ai-topic { grid-template-columns: 190px minmax(0, 1fr); gap: 32px; } } @media (max-width: 959px) { .brand-ai .ai-hero { padding: 62px 0 54px; } .brand-ai .ai-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .brand-ai .ai-hero__index { padding-left: 0; border-left: 0; } .brand-ai .ai-hero__title { font-size: 46px; } .brand-ai .ai-section { padding: 56px 0; } .brand-ai .ai-head__title { font-size: 32px; } .brand-ai .ai-feature { grid-template-columns: minmax(0, 1fr); gap: 30px; } .brand-ai .ai-feature__title { font-size: 27px; } .brand-ai .ai-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; } .brand-ai .ai-topic { grid-template-columns: minmax(0, 1fr); gap: 22px; } .brand-ai .ai-topic__list { gap: 20px 24px; } .brand-ai .ai-flow__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } .brand-ai .ai-flow__step:nth-child(3) { border-left: 0; padding-left: 0; } .brand-ai .ai-flow__step:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .09); margin-top: 8px; } } @media (max-width: 767px) { .brand-ai .brandbar__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; padding: 12px 0 14px; } .brand-ai .brandbar__hint { display: none; } .brand-ai .brandbar__switch a.is-active::after { bottom: -14px; } .brand-ai .ai-hero { padding: 46px 0 44px; } .brand-ai .ai-hero__title { font-size: 36px; } .brand-ai .ai-hero__lead { font-size: 14.5px; } .brand-ai .ai-section { padding: 44px 0; } .brand-ai .ai-head--row { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 14px; } .brand-ai .ai-head__title { font-size: 27px; } .brand-ai .ai-feature__title { font-size: 23px; } .brand-ai .ai-item { grid-template-columns: minmax(0, 1fr) 78px; gap: 14px; } .brand-ai .ai-item__num { display: none; } .brand-ai .ai-item__media { padding-top: 58px; } .brand-ai .ai-cards { grid-template-columns: minmax(0, 1fr); gap: 28px; } .brand-ai .ai-topic__list { grid-template-columns: minmax(0, 1fr); } .brand-ai .ai-services { grid-template-columns: minmax(0, 1fr); gap: 0; } .brand-ai .ai-flow__rail { grid-template-columns: minmax(0, 1fr); } .brand-ai .ai-flow__step { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, .09); } .brand-ai .ai-flow__step:first-child { border-top: 0; } .brand-ai .ai-cta { padding: 44px 0; } .brand-ai .ai-cta__inner { padding: 28px 24px; } .brand-ai .ai-cta__title { font-size: 26px; } .brand-ai .ai-foot { padding: 44px 0 28px; } }