/* * Help center (/portal, /portal/category, /portal/article) * Brand color: #197FA4 */ /* Ẩn các thành phần layout mặc định trên trang help center. Dùng class trên (mở TRƯỚC #header trong DOM) thay cho body:has(.help-center-page) — vì .help-center-page nằm SAU #header nên :has() làm header lóe hiện rồi mất khi trang được parse dần. Class trên body áp ngay từ đầu nên không nhấp nháy. */ body.help-center-body #header, body.help-center-body #smartbanner, body.help-center-body #footer .footer-top, body.help-center-body #footer .footer-extends, body.help-center-body .addtocard-wrapper, body.help-center-body .container.hotsearch-wrapper, body.help-center-body .viewed-product-wrapper { display: none; } .help-center-header { max-width: var(--site); margin: auto; padding: 0 15px; } .help-center-header .logo-site { display: flex; align-items: flex-end; grid-gap: 10px; width: 100%; padding: 20px 0; } .help-center-header .logo-site span { position: relative; padding-left: 10px; } .help-center-header .logo-site span::before { content: ""; width: 1px; height: 18px; background: var(--primary); position: absolute; top: 50%; transform: translateY(-50%); left: 0; } .help-center-page { background: #fff; color: #333; font-size: 14px; } .help-center-wrapper { max-width: var(--site); margin: 0 auto; padding: 0 15px; } /* ------------------------------------------------------------------ hero */ .help-center-hero { background: #197FA4; padding: 46px 0 52px; text-align: center; } .help-center-hero--compact { padding: 34px 0 40px; } .help-center-hero__title { display: block; /* giữ layout khi tag là ở trang danh mục/bài viết */ margin: 0 0 26px; color: #fff; font-size: 36px; font-weight: 400; line-height: 1.35; } .help-center-hero--compact .help-center-hero__title { font-size: 32px; margin-bottom: 22px; } .help-center-search { display: block; max-width: 980px; margin: 0 auto; background: #fff; border: 2px solid #fff; border-radius: 4px; } /* clear các phần tử float bên trong mà không dùng overflow:hidden (overflow:hidden sẽ cắt mất dropdown gợi ý xổ xuống dưới) */ .help-center-search:after { content: ""; display: block; clear: both; } .help-center-page .help-center-search__input { float: left; width: -webkit-calc(100% - 96px); width: calc(100% - 96px); height: 50px; margin: 0; padding: 0 16px; border: none; border-radius: 4px 0 0 4px; outline: none; box-shadow: none; background: #fff; color: #333; font-size: 15px; line-height: 50px; } .help-center-search__input::-webkit-input-placeholder { color: #9b9b9b; } .help-center-search__input::-moz-placeholder { color: #9b9b9b; } .help-center-search__input:-ms-input-placeholder { color: #9b9b9b; } .help-center-page .help-center-search__btn { float: right; width: 96px; height: 50px; margin: 0; padding: 0; border: none; border-radius: 0 4px 4px 0; outline: none; box-shadow: none; cursor: pointer; background: #197FA4; color: #fff; text-align: center; transition: background .2s; } .help-center-page .help-center-search__btn:hover, .help-center-page .help-center-search__btn:focus { background: #146781; color: #fff; } .help-center-icon-search { vertical-align: middle; } /* ---------------------------------------------------------------- notice */ .help-center-notice { position: relative; margin: 26px 0 10px; padding: 16px 46px 30px 22px; background: #fffbe8; border: 1px solid #f5e6b8; border-radius: 2px; } .help-center-notice__text { margin: 0; color: #4a4a4a; font-size: 14px; line-height: 1.7; } .help-center-notice__link { color: #2673dd; } .help-center-notice__link:hover { color: #2673dd; text-decoration: underline; } .help-center-notice__close { position: absolute; top: 14px; right: 16px; color: #9b9b9b; line-height: 0; } .help-center-notice__close:hover { color: #555; } .help-center-notice__dots { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; line-height: 0; } .help-center-notice__dot { display: inline-block; width: 6px; height: 6px; margin: 0 3px; border-radius: 50%; background: #d8d8d8; } .help-center-notice__dot.is-active { background: #197FA4; } /* --------------------------------------------------------------- section */ .help-center-section { margin-top: 42px; } .help-center-section__title { margin: 0 0 18px; color: #222; font-size: 24px; font-weight: 400; line-height: 1.3; } /* -------------------------------------------------------- category cards */ .help-center-category { overflow: hidden; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 16px; } /* H2 bọc ngoài mỗi ô danh mục: display:contents để anchor vẫn là ô grid (không phá layout). */ .help-center-category__heading { display: contents; margin: 0; font: inherit; } .help-center-category__item { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; padding: 18px 16px; box-sizing: border-box; border: 1px solid #e5e5e5; color: #333; font-size: 0; /* kills the whitespace gap between the two inline-block cells */ text-decoration: none; transition: box-shadow .2s, border-color .2s; } .help-center-category__item:hover, .help-center-category__item:focus { border-color: #197FA4; box-shadow: 0 1px 6px rgba(25, 127, 164, .18); color: #197FA4; text-decoration: none; } .help-center-category__icon, .help-center-category__name { display: inline-block; vertical-align: middle; } .help-center-category__icon { width: 40px; height: 40px; border-radius: 50%; line-height: 38px; text-align: center; display: flex; justify-content: center; align-items: center; } .help-center-category__icon svg { vertical-align: middle; } .help-center-category__icon--brand { background: #e8f3f7; color: #197FA4; } .help-center-category__icon--green { background: #e6f5ee; color: #21a366; } .help-center-category__icon--indigo { background: #eaeefb; color: #3f51b5; } .help-center-category__name { padding-left: 14px; box-sizing: border-box; font-size: 15px; line-height: 1.4; } /* ------------------------------------------------------------ link lists */ .help-center-list { margin: 0; padding: 0; list-style: none; border-top: 1px dashed #e0e0e0; } .help-center-list__item { margin: 0; border-bottom: 1px dashed #e0e0e0; } .help-center-list__item:last-child { border-bottom: none; } /* H3 bọc tiêu đề bài viết: reset để không đổi giao diện (link vẫn quyết định style). */ .help-center-list__heading { margin: 0; padding: 0; font-size: inherit; font-weight: 400; line-height: inherit; } .help-center-list__link { display: block; padding: 20px 4px; color: #333; font-size: 16px; line-height: 1.5; text-decoration: none; } .help-center-list__link:hover, .help-center-list__link:focus { color: #197FA4; text-decoration: none; } /* --------------------------------------------------- sidebar + content */ .help-center-layout { padding-top: 42px; overflow: hidden; } .help-center-sidebar { float: left; width: 26%; padding-right: 30px; box-sizing: border-box; } .help-center-content { float: left; width: 74%; box-sizing: border-box; } .help-center-sidebar__group + .help-center-sidebar__group { margin-top: 6px; } .help-center-sidebar__group-title { display: block; position: relative; padding: 12px 26px 12px 0; color: #222; font-size: 15px; font-weight: 700; line-height: 1.4; text-decoration: none; } .help-center-sidebar__group-title:hover, .help-center-sidebar__group-title:focus { color: #197FA4; text-decoration: none; } .help-center-icon-chevron { position: absolute; top: 50%; right: 0; margin-top: -9px; color: #666; transition: transform .2s; } .help-center-sidebar__group.is-open .help-center-icon-chevron { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .help-center-sidebar__list { display: none; margin: 0 0 8px; padding: 0; list-style: none; } .help-center-sidebar__group.is-open .help-center-sidebar__list { display: block; } .help-center-sidebar__link { display: block; padding: 7px 0; color: #333; font-size: 15px; line-height: 1.5; text-decoration: none; } .help-center-sidebar__link:hover, .help-center-sidebar__link:focus { color: #197FA4; text-decoration: none; } .help-center-sidebar__link.is-active { color: #197FA4; } .help-center-content__title { margin: 0 0 22px; color: #222; font-size: 26px; font-weight: 700; line-height: 1.4; } /* ---------------------------------------------------------- article body */ .help-center-article { color: #333; font-size: 15px; line-height: 1.8; } .help-center-article img { max-width: 100%; height: auto; } .help-center-article p { margin: 0 0 20px; } .help-center-article a { color: #2673dd; text-decoration: underline; } .help-center-article a:hover { color: #2673dd; } .help-center-article__highlight { color: #197FA4; } .help-center-article__subtitle { margin: 26px 0 20px; color: #197FA4; font-size: 17px; font-weight: 700; line-height: 1.5; } .help-center-article__list { margin: 0 0 20px; padding: 0 0 0 34px; list-style: none; } .help-center-article__list > li { position: relative; padding-left: 12px; margin-bottom: 4px; } .help-center-article__list > li:before { content: "\00B7"; position: absolute; left: 0; top: -2px; font-size: 20px; line-height: inherit; } /* ------------------------------------------------------------ responsive */ @media (max-width: 991px) { .help-center-sidebar, .help-center-content { float: none; width: 100%; padding-right: 0; } .help-center-content { margin-top: 26px; } .help-center-layout .help-center-content { margin-top: 0; } .help-center-layout { padding-top: 20px; } } @media (max-width: 767px) { body.help-center-body #footer .contact-info, body.help-center-body #footer #app-download, body.help-center-body #footer .subcriber-form, body.help-center-body #footer .report-product, body.help-center-body #footer .footer-content-keyword, body.help-center-body .feature-product-wrapper, body.help-center-body #product-viewed-wrapper { display: none; } .help-center-header .logo-site img { max-width: 120px; height: auto; } .help-center-header .logo-site { align-items: center; } .help-center-hero, .help-center-hero--compact { padding: 16px 0 16px; } .help-center-hero__title, .help-center-hero--compact .help-center-hero__title { font-size: 20px; } .help-center-hero__logo { display: flex; align-items: center; color: #fff; padding: 0 15px; grid-gap: 6px; font-size: 18px; margin-bottom: 12px; } .help-center-hero__logo-back { color: #fff; display: flex; align-items: center; } .help-center-page .help-center-search__input { width: -webkit-calc(100% - 60px); width: calc(100% - 60px); height: 44px; line-height: 44px; font-size: 14px; } .help-center-page .help-center-search__btn { width: 60px; height: 44px; } .help-center-category { grid-gap: 8px; margin-bottom: 12px; display: flex; overflow-x: auto; width: calc(100% + 30px); margin-left: -15px; padding: 0 15px; } .help-center-section__title { font-size: 20px; } .help-center-content__title { font-size: 20px; } .help-center-list__link { font-size: 15px; padding: 16px 4px; } .help-center-article__list { padding-left: 12px; } } /* ---------------------------------------------------------- breadcrumb */ .help-center-breadcrumb { margin: 18px 0 6px; color: #888; font-size: 14px; line-height: 1.6; } .help-center-breadcrumb a { color: #197FA4; text-decoration: none; } .help-center-breadcrumb a:hover { text-decoration: underline; } .help-center-breadcrumb__sep { margin: 0 8px; color: #bbb; } .help-center-breadcrumb__current { color: #555; } /* ---------------------------------------------------------- category description */ .help-center-content__desc { margin: -8px 0 20px; color: #555; font-size: 15px; line-height: 1.7; } .help-center-content__count { color: #888; font-size: 16px; font-weight: 400; } /* ---------------------------------------------------------- category icon image */ .help-center-category__icon img { display: block; width: 24px; height: 24px; object-fit: contain; } /* ---------------------------------------------------------- sidebar group as a direct link */ .help-center-sidebar__group-title.is-active { color: #197FA4; } /* ---------------------------------------------------------- search result description */ .help-center-list__desc { margin: 4px 0 0; color: #888; font-size: 14px; line-height: 1.6; } /* ---------------------------------------------------------- related articles */ .help-center-related { margin-top: 34px; padding-top: 22px; border-top: 1px solid #eee; } .help-center-related__title { margin: 0 0 6px; color: #222; font-size: 18px; font-weight: 700; } /* ---------------------------------------------------------- empty state */ .help-center-empty { padding: 18px 0; color: #888; font-size: 15px; } /* ---------------------------------------------------------- pagination */ .help-center-pagination { margin-top: 26px; text-align: center; } .help-center-pagination ul.pagination, .help-center-pagination .pagination { display: inline-block; margin: 0; padding: 0; list-style: none; } .help-center-pagination .pagination > li { display: inline-block; margin: 0 3px; } .help-center-pagination .pagination > li > a, .help-center-pagination .pagination > li > span { display: block; min-width: 36px; padding: 7px 10px; border: 1px solid #e5e5e5; border-radius: 4px; color: #333; font-size: 14px; line-height: 1.2; text-align: center; text-decoration: none; } .help-center-pagination .pagination > li > a:hover { border-color: #197FA4; color: #197FA4; } .help-center-pagination .pagination > li.active > span, .help-center-pagination .pagination > li.active > a { background: #197FA4; border-color: #197FA4; color: #fff; } .help-center-pagination .pagination > li.disabled > span, .help-center-pagination .pagination > li.disabled > a { color: #ccc; cursor: not-allowed; } /* ------------------------------------------------- mobile: section head + tabs Chỉ dùng trong các template mobile (app/views/mobile/frontend/help-center). */ .help-center-section__head { display: flex; align-items: center; justify-content: space-between; grid-gap: 10px; margin-bottom: 14px; } .help-center-section__head .help-center-section__title { margin-bottom: 0; } .help-center-section__more { display: flex; align-items: center; grid-gap: 2px; color: #197FA4; font-size: 14px; line-height: 1.4; white-space: nowrap; text-decoration: none; } .help-center-section__more:hover, .help-center-section__more:focus { color: #146781; text-decoration: none; } .help-center-tabs { display: flex; grid-gap: 8px; margin: 0 -15px 6px; padding: 0 15px 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .help-center-tabs::-webkit-scrollbar { display: none; } .help-center-tabs__item { flex: 0 0 auto; padding: 7px 14px; border: 1px solid #e5e5e5; border-radius: 20px; background: #fff; color: #555; font-size: 14px; line-height: 1.4; white-space: nowrap; text-decoration: none; } .help-center-tabs__item:hover, .help-center-tabs__item:focus { color: #197FA4; text-decoration: none; } .help-center-tabs__item.is-active { background: #e8f3f7; border-color: #197FA4; color: #197FA4; } .help-center-panel { display: none; } .help-center-panel.is-active { display: block; } .help-center-panel__more { padding: 16px 4px 0; } .help-center-panel__more-link { color: #197FA4; font-size: 14px; text-decoration: none; } .help-center-panel__more-link:hover, .help-center-panel__more-link:focus { color: #146781; text-decoration: underline; } .help-center-contact { background: #f5f5f5; max-width: var(--site); margin: 0 auto; padding: 40px 15px; text-align: center; } .help-center-contact-title { color: #000; font-size: 20px; margin-bottom: 10px; margin-bottom: 16px; } .help-center-contact-content { display: flex; align-items: center; justify-content: center; grid-gap: 24px; align-items: stretch; } .help-center-contact-item { background: #fff; border-radius: 4px; display: flex; align-items: center; min-width: 260px; text-align: left; grid-gap: 8px; color: #000; padding: 12px 16px; font-size: 16px; } .help-center-contact-item-icon { width: 36px; height: 36px; border: 1px solid #000; border-radius: 99px; display: flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; color: #595959; } .help-center-contact-item-icon:hover { color: var(--primary); } /* ---------------------------------------------- mobile: lớp phủ "Danh mục" */ body.help-center-no-scroll { overflow: hidden; } .help-center-overlay { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch; } .help-center-overlay.is-open { display: block; } .help-center-overlay__head { position: -webkit-sticky; position: sticky; top: 0; z-index: 1; display: flex; align-items: center; grid-gap: 12px; padding: 12px 15px; background: #197FA4; color: #fff; } .help-center-overlay__back { color: #fff; line-height: 0; } .help-center-overlay__back:hover, .help-center-overlay__back:focus { color: #fff; } .help-center-overlay__title { font-size: 16px; font-weight: 700; line-height: 1.4; } .help-center-overlay__body { padding: 16px 15px 30px; } .help-center-overlay .help-center-category { grid-template-columns: repeat(2, 1fr); margin-bottom: 6px; } .help-center-overlay .help-center-sidebar { float: none; width: 100%; padding-right: 0; } .help-center-overlay .help-center-sidebar__group { border-bottom: 1px solid #eee; } .help-center-overlay .help-center-sidebar__group + .help-center-sidebar__group { margin-top: 0; } @media(max-width: 767px) { .help-center-breadcrumb { overflow-x: auto; max-width: 100%; display: flex; } .help-center-breadcrumb a, .help-center-breadcrumb span { white-space: nowrap; } .help-center-category__item { display: flex; flex-direction: column; text-align: center; padding: 8px; border-radius: 3px; width: 20vw; min-width: 20vw; } .help-center-overlay .help-center-category { grid-template-columns: repeat(4, 1fr); grid-gap: 6px; } .help-center-category__name { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 2; padding: 0; font-size: 13px; } .help-center-sidebar__group-title { font-weight: 400; } .help-center-category__item.active { border-color: var(--primary); background: #F4F9FF; } .help-center-related { padding-top: 0; border-top: 0; } .help-center-overlay .help-center-search { border-radius: 6px; border: 1px solid var(--primary); margin: 12px 16px 0; } .help-center-overlay .help-center-search__btn { border-radius: 0 4px 4px 0; } .help-center-section { margin-top: 24px; } } /* ---------------------------------------------------------- skeleton loading (AJAX chọn danh mục) */ .help-center-skeleton { pointer-events: none; } .help-center-skeleton .help-center-list__item { padding: 0; border-bottom: 1px solid #f2f2f2; } .help-center-skeleton__bar { display: block; height: 15px; width: 92%; margin: 16px 4px; border-radius: 5px; background: linear-gradient(90deg, #ececec 25%, #f6f7f8 37%, #ececec 63%); background-size: 400% 100%; animation: help-center-shimmer 1.3s ease infinite; } .help-center-skeleton .help-center-list__item:nth-child(2n) .help-center-skeleton__bar { width: 74%; } .help-center-skeleton .help-center-list__item:nth-child(3n) .help-center-skeleton__bar { width: 85%; } .help-center-skeleton .help-center-list__item:nth-child(4n) .help-center-skeleton__bar { width: 60%; } .help-center-skeleton .help-center-list__item:nth-child(5n) .help-center-skeleton__bar { width: 80%; } @keyframes help-center-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ---------------------------------------------------------- tìm kiếm tức thì */ .help-center-search { position: relative; } .help-center-hl { color: var(--primary, #197FA4); font-weight: 600; } /* desktop: dropdown gợi ý ngay dưới ô tìm kiếm */ /* Chặn "flash" nội dung Angular chưa compile (angular + help-center.js nạp defer): ẩn ngay các phần tử ng-cloak vì file CSS này nạp đồng bộ trong . */ [ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } .help-center-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; max-height: 62vh; overflow-y: auto; background: #fff; border-radius: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, .16); padding: 6px 0; text-align: left; } .help-center-suggest__item { display: block; padding: 11px 18px; color: #333; font-size: 15px; line-height: 1.5; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .help-center-suggest__item:hover { background: #f5f7f8; color: #333; text-decoration: none; } .help-center-suggest__msg { padding: 14px 18px; color: #999; font-size: 14px; } /* mobile: màn hình tìm kiếm full-screen */ .help-center-search-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 3000; background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s ease; visibility: hidden; } .help-center-search-overlay.is-open { transform: none; visibility: visible; } .help-center-search-overlay__head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid #eee; } .help-center-search-overlay__head .help-center-search { flex: 1; display: flex; align-items: center; background: #f2f3f5; border-radius: 6px; padding: 0 6px; margin: 0; height: 38px; } .help-center-search-overlay__head .help-center-search__input { flex: 1; border: 0; background: transparent; outline: none; font-size: 15px; padding: 0 4px; height: 100%; box-shadow: none; } .help-center-search-overlay__head .help-center-search__btn { position: static; background: none; border: 0; padding: 0 2px; color: #999; width: auto; height: auto; } .help-center-search__clear { display: inline-flex; align-items: center; padding: 2px; cursor: pointer; } .help-center-search-overlay__cancel { flex: 0 0 auto; color: var(--primary, #197FA4); font-size: 15px; padding: 6px 4px; text-decoration: none; white-space: nowrap; } .help-center-search-overlay__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .help-center-suggest__list { list-style: none; margin: 0; padding: 0; } .help-center-search-overlay__body .help-center-suggest__item { padding: 15px 16px; border-bottom: 1px dashed #eee; white-space: normal; } .help-center-search-empty { padding: 56px 24px; text-align: center; } .help-center-search-empty__icon { display: block; margin: 0 auto 16px; } .help-center-search-empty__title { margin: 0 0 6px; color: #333; font-size: 16px; font-weight: 600; } .help-center-search-empty__desc { margin: 0; color: #999; font-size: 14px; line-height: 1.6; } @media(max-width: 767px) { .help-center-notice { padding: 10px 20px 10px 10px; } .help-center-notice__text { font-size: 13px; } .help-center-notice__close { top: 12px; right: 8px; } }