/** * HiTechCloud Internet Resources — /hitechcloud-internet-resources/ * * Ngôn ngữ thị giác cloud26: hero ảnh nền navy với lớp phủ ngang, chữ cân trái, * bo góc 16px, mặt phẳng, không hiệu ứng kính mờ, không khối tròn trang trí, * không nhấc thẻ lên khi rê chuột. * * Trang này KHÔNG nằm trong `hitechcloud_cloud26_rollout_templates()` (danh sách * đó cố ý loại các trang đối tác), nên phần hero và section phải tự dựng ở đây; * chỉ thanh tab `.hc26-tabs` và `.hc26-tab-panels` là dùng chung từ * `product-pages-cloud26.css`. * * Bẫy đã tính tới: `site-typography.css` nạp trong nhưng đặt cỡ, độ đậm và * letter-spacing của h1–h6, p, li, dt, dd cùng mọi class chứa "eyebrow", "label", * "title", "name", "metric", "stat" bằng `!important`. Mọi khai báo tương ứng * dưới đây bắt buộc phải có `!important`, nếu không nó là mã chết. */ .hir-page { --hir-blue: #0969ff; --hir-cyan: #00c2ff; --hir-navy: #071832; --hir-deep: #041020; --hir-text: #22304a; --hir-muted: #667895; --hir-line: #d9e7f5; --hir-soft: #f5f9ff; --hir-radius: 16px; display: block !important; background: #fff; color: var(--hir-text); font-family: inherit; font-size: 16px; line-height: 1.5; } .hir-page * { box-sizing: border-box; } .hir-page .site-container { width: min(1260px, 100%); max-width: 1260px; margin-inline: auto; padding-inline: 24px; } /* -------------------------------------------------------------------------- * Khối tiêu đề dùng chung * ----------------------------------------------------------------------- */ .hir-eyebrow { display: inline-block; margin-bottom: 14px; color: var(--hir-blue); font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; } .hir-heading h2 { margin: 0 0 14px; color: var(--hir-navy); font-size: clamp(28px, 2.5vw, 36px) !important; font-weight: 400 !important; line-height: 1.18 !important; letter-spacing: -.01em !important; } .hir-heading p { max-width: 780px; margin: 0; color: var(--hir-muted); font-size: 17px !important; line-height: 1.6 !important; } /* Tiêu đề mở đầu section: cân TRÁI, không cân giữa. Cân giữa làm mắt phải nhảy * về đầu dòng ở mỗi dòng và đọc mệt trên đoạn dài — cloud26 cân trái toàn bộ. * Gạch mảnh phía dưới thay cho việc căn giữa để tách đầu mục khỏi nội dung. */ .hir-heading--lead { /* Phải >= max-width của h2 bên dưới, nếu không parent bó lại và tiêu đề vẫn * vỡ hai dòng dù h2 đã được nới. Đoạn lead vẫn giữ khổ đọc hẹp nhờ * `.hir-heading p { max-width: 780px }`. */ max-width: 1060px; margin: 0 0 44px; padding-bottom: 26px; border-bottom: 1px solid var(--hir-line); text-align: left; } /* Đủ rộng để mọi tiêu đề section nằm gọn MỘT hàng ở khổ desktop — chuỗi dài * nhất đo được là 1016px. Bó ở 780px như trước làm phân nửa tiêu đề vỡ hai * dòng. Khổ hẹp hơn thì container tự thu và tiêu đề xuống dòng bình thường. */ .hir-heading--lead h2 { max-width: 1040px; } .hir-section { padding: 84px 0; } .hir-section--soft { background: var(--hir-soft); } .hir-note { margin: 28px 0 0; color: var(--hir-muted); font-size: 15px !important; text-align: left; } .hir-note a, .hir-figure a { color: var(--hir-blue); text-decoration: underline; text-underline-offset: 2px; } /* -------------------------------------------------------------------------- * Nút * ----------------------------------------------------------------------- */ .hir-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 60px; padding: 0 30px; border: 1px solid transparent; border-radius: 999px; font-size: 17px; font-weight: 500 !important; text-decoration: none !important; box-shadow: none; transform: none; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .hir-btn--primary, .hir-btn--light { border-color: #fff; background: #fff; color: var(--hir-navy); } .hir-btn--primary:hover, .hir-btn--light:hover { background: #e8f1ff; color: var(--hir-navy); } .hir-btn--outline, .hir-btn--ghost { border-color: rgba(255, 255, 255, .5); background: transparent; color: #fff; } .hir-btn--outline:hover, .hir-btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .12); color: #fff; } /* -------------------------------------------------------------------------- * Hero * ----------------------------------------------------------------------- */ .hir-hero { position: relative; min-height: 610px; padding: 92px 0 0; background: var(--hir-deep); color: #fff; overflow: hidden; } .hir-hero picture { display: contents; } .hir-hero::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(4, 16, 32, .98) 0%, rgba(7, 24, 50, .90) 42%, rgba(4, 16, 32, .24) 70%, rgba(4, 16, 32, .06) 100%); pointer-events: none; } .hir-hero__grid { position: relative; z-index: 2; display: flex; align-items: center; min-height: 518px; } .hir-hero__content { width: min(680px, 55%); padding-bottom: 58px; } .hir-hero .hir-eyebrow { color: var(--hir-cyan); } .hir-hero h1 { max-width: 680px; margin: 0 0 20px; color: #fff !important; font-size: clamp(38px, 3.4vw, 50px) !important; font-weight: 400 !important; line-height: 1.1 !important; letter-spacing: -.015em !important; } .hir-hero p { max-width: 590px; margin: 0; color: rgba(255, 255, 255, .92) !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.55 !important; } .hir-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } /* -------------------------------------------------------------------------- * Tư cách LIR + dải thông tin nhanh (nằm trong phần giới thiệu, không phải * dưới banner — thanh tab phải bám sát hero) * ----------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- * Mở đầu: nội dung bên trái, dấu HiTechCloud bên phải * ----------------------------------------------------------------------- */ .hir-intro { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; gap: 40px; } .hir-intro__body .hir-heading { margin-bottom: 24px; } .hir-intro { margin-bottom: 40px; } .hir-intro__brand { position: sticky; top: calc(var(--hc-sticky-header, 0px) + 24px); display: flex; flex-direction: column; align-items: flex-start; padding: 32px 30px; border: 1px solid var(--hir-line); border-radius: var(--hir-radius); background: var(--hir-soft); } .hir-intro__brand img { width: 100%; max-width: 240px; height: auto; margin-bottom: 22px; } .hir-intro__brand-role { color: var(--hir-blue); font-size: 13px !important; font-weight: 500 !important; line-height: 1.3 !important; } .hir-intro__brand strong { margin: 6px 0 10px; color: var(--hir-navy); font-size: 19px; font-weight: 600 !important; line-height: 1.35; } .hir-intro__brand p { margin: 0; color: var(--hir-muted); font-size: 15px !important; line-height: 1.6 !important; } .hir-self-card { margin: 0 0 24px; padding: 26px 30px; border: 1px solid var(--hir-line); border-left: 3px solid var(--hir-blue); border-radius: var(--hir-radius); background: var(--hir-soft); text-align: left; } .hir-self-card__role { display: block; margin-bottom: 8px; color: var(--hir-blue); font-size: 13px !important; font-weight: 500 !important; line-height: 1.3 !important; } .hir-self-card strong { display: block; margin-bottom: 8px; color: var(--hir-navy); font-size: 19px; font-weight: 600 !important; line-height: 1.35; } .hir-self-card p { max-width: 860px; margin: 0; color: var(--hir-muted); font-size: 15px !important; line-height: 1.6 !important; } /* Bốn ô luôn nằm trên MỘT hàng, trải hết khổ trang. */ .hir-factrail__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; gap: 20px; } .hir-fact { padding: 18px 20px; border: 1px solid var(--hir-line); border-left: 3px solid var(--hir-blue); border-radius: 10px; background: #fff; } .hir-fact dt { margin: 0 0 6px; color: var(--hir-muted); font-size: 13px !important; font-weight: 400 !important; line-height: 1.35 !important; } .hir-fact dd { margin: 0; color: var(--hir-navy); font-size: 16px !important; font-weight: 500 !important; line-height: 1.4 !important; } /* -------------------------------------------------------------------------- * Hệ sinh thái Internet Registry * ----------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- * Vòng logo có dấu HiTechCloud ở tâm * ----------------------------------------------------------------------- */ .hir-orbits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .hir-orbit { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 26px 22px 28px; border: 1px solid var(--hir-line); border-radius: var(--hir-radius); background: #fff; } .hir-orbit__ring { position: relative; width: min(452px, 100%); aspect-ratio: 1; margin-inline: auto; } /* Vòng nét đứt chỉ để mắt đọc ra quan hệ tâm – vệ tinh, không mang thông tin. */ .hir-orbit__ring::before { content: ""; position: absolute; inset: 11%; border: 1px dashed var(--hir-line); border-radius: 50%; } .hir-orbit__core { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 176px; height: 176px; padding: 20px; border: 2px solid var(--hir-blue); border-radius: 50%; background: #fff; transform: translate(-50%, -50%); } .hir-orbit__core img { width: 100%; height: auto; max-height: 54px; object-fit: contain; } .hir-orbit__node { position: absolute; display: flex; flex-direction: column; align-items: center; width: 128px; padding: 10px 8px; border: 1px solid var(--hir-line); border-radius: 12px; background: #fff; text-align: center; transform: translate(-50%, -50%); } .hir-orbit__node img { width: auto; max-width: 92px; height: 28px; margin-bottom: 8px; object-fit: contain; } .hir-orbit__name { color: var(--hir-navy); font-size: 13px !important; font-weight: 600 !important; line-height: 1.25 !important; } .hir-orbit__sub { margin-top: 2px; color: var(--hir-muted); font-size: 11px !important; font-weight: 400 !important; line-height: 1.3 !important; } .hir-orbit figcaption { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hir-line); text-align: center; } .hir-orbit figcaption strong { display: block; margin-bottom: 6px; color: var(--hir-navy); font-size: 17px; font-weight: 600 !important; line-height: 1.35; } .hir-orbit figcaption span { display: block; color: var(--hir-muted); font-size: 14px; line-height: 1.55; } /* -------------------------------------------------------------------------- * Sơ đồ cây phân cấp (mẫu biểu đồ quản lý địa chỉ của JPNIC) * ----------------------------------------------------------------------- */ .hir-tree { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: start; gap: 32px; padding: 28px 30px; border: 1px solid var(--hir-line); border-radius: var(--hir-radius); background: #fff; } .hir-tree__legend { margin: 0; padding: 0; list-style: none; } .hir-tree__legend-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hir-line); } .hir-tree__legend-item:last-child { border-bottom: 0; } .hir-tree__chip { flex: 0 0 auto; min-width: 52px; padding: 5px 10px; border-radius: 8px; background: var(--hir-chip, var(--hir-blue)); color: #fff; font-size: 12px !important; font-weight: 600 !important; line-height: 1.4 !important; text-align: center; } .hir-tree__legend-text strong { display: block; color: var(--hir-navy); font-size: 14px; font-weight: 600 !important; line-height: 1.35; } .hir-tree__legend-text em { display: block; margin-top: 2px; color: var(--hir-muted); font-size: 13px; font-style: normal; line-height: 1.45; } .hir-tree__chart svg { display: block; width: 100%; height: auto; } .hir-tree__wire { stroke: #c9d8ea; } .hir-tree__bus { stroke: var(--hir-blue); stroke-linecap: round; } /* Nền bo tròn bao HiTechCloud và VNNIC — dấu hiệu thị giác cho "cùng một bậc". */ .hir-tree__band { fill: #eef5ff; stroke: #d4e4fb; stroke-width: 1; } /* Màu ô theo bậc, khớp với chú giải bên trái. */ .hir-tree__node rect { fill: #fff; stroke-width: 2; } .hir-tree__node text { fill: var(--hir-navy); font-family: inherit; font-size: 15px; font-weight: 600; text-anchor: middle; } .hir-tree__node.is-root rect { fill: #0b2545; stroke: #0b2545; } .hir-tree__node.is-root text { fill: #fff; } .hir-tree__node.is-nir rect { fill: #1f6fd0; stroke: #1f6fd0; } .hir-tree__node.is-nir text { fill: #fff; } .hir-tree__node.is-lir rect { fill: var(--hir-blue); stroke: var(--hir-blue); } .hir-tree__node.is-lir text { fill: #fff; } .hir-tree__node.is-eu rect { stroke: #94a3bd; } .hir-tree__role { font-size: 12px !important; font-weight: 500; opacity: .88; } /* Chú thích ý nghĩa từng loại nét trong sơ đồ. */ .hir-tree__notes { margin: 24px 0 0; padding: 0; list-style: none; } .hir-tree__notes li { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--hir-line); color: var(--hir-muted); font-size: 15px !important; line-height: 1.6 !important; } .hir-tree__notes li:last-child { border-bottom: 0; } .hir-tree__notes strong { color: var(--hir-navy); font-weight: 600 !important; } .hir-tree__notes-key { flex: 0 0 auto; width: 34px; margin-top: 11px; } /* Năm vạch màu, đúng năm màu của năm RIR trong sơ đồ. */ .hir-tree__notes-key--multi { height: 10px; margin-top: 8px; border-radius: 3px; background: linear-gradient(90deg, #0f766e 0 20%, #4338ca 20% 40%, #15803d 40% 60%, #b45309 60% 80%, #7e22ce 80% 100%); } .hir-tree__notes-key--vn { border-top: 3.5px solid #15803d; } .hir-tree__notes-key--nir { height: 16px; margin-top: 4px; border: 2px solid #1f6fd0; border-radius: 5px; background: #1f6fd0; } .hir-tree__notes-key--self { height: 16px; margin-top: 4px; border: 2px solid var(--hir-blue); border-radius: 5px; background: var(--hir-blue); } .hir-tree__notes-key--eu { height: 16px; margin-top: 4px; border: 1.5px solid #94a3bd; border-radius: 5px; } /* -------------------------------------------------------------------------- * Sơ đồ thứ hai: hai đường cấp phát đặt cạnh nhau * ----------------------------------------------------------------------- */ .hir-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 34px; } .hir-path { display: flex; flex-direction: column; padding: 28px 26px; border: 1px solid var(--hir-line); border-radius: var(--hir-radius); background: #fff; } .hir-path.is-self { border-color: var(--hir-blue); box-shadow: 0 0 0 1px var(--hir-blue); } .hir-path__tag { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: var(--hir-soft); color: var(--hir-blue); font-size: 12px !important; font-weight: 600 !important; line-height: 1.4 !important; } .hir-path.is-self .hir-path__tag { background: var(--hir-blue); color: #fff; } .hir-path h3 { margin: 0 0 18px; color: var(--hir-navy); font-size: 18px !important; font-weight: 500 !important; line-height: 1.3 !important; } /* Chuỗi chặng: mỗi bước một hàng, nối bằng một đoạn dọc bên trái. */ .hir-path__flow { margin: 0 0 20px; padding: 0 0 0 22px; list-style: none; border-left: 2px solid var(--hir-line); } .hir-path.is-self .hir-path__flow { border-left-color: var(--hir-blue); } .hir-path__flow li { position: relative; padding: 0 0 12px; color: var(--hir-navy); font-size: 15px !important; font-weight: 500 !important; line-height: 1.45 !important; } .hir-path__flow li:last-child { padding-bottom: 0; } .hir-path__flow li::before { content: ""; position: absolute; top: 6px; left: -28px; width: 10px; height: 10px; border: 2px solid var(--hir-line); border-radius: 50%; background: #fff; } .hir-path.is-self .hir-path__flow li::before { border-color: var(--hir-blue); } .hir-path__meta { margin: auto 0 0; padding-top: 18px; border-top: 1px solid var(--hir-line); } .hir-path__meta > div + div { margin-top: 12px; } .hir-path__meta dt { margin: 0 0 2px; color: var(--hir-muted); font-size: 13px !important; font-weight: 400 !important; line-height: 1.35 !important; } .hir-path__meta dd { margin: 0; color: var(--hir-navy); font-size: 15px !important; font-weight: 500 !important; line-height: 1.5 !important; } /* -------------------------------------------------------------------------- * Thanh tab riêng của trang: BẢY mục nên nút phải co lại mới đủ một hàng. * Nhãn dài như "Trường hợp sử dụng" được phép xuống hai dòng — chiều cao 74px * của CSS chung đủ chứa. * ----------------------------------------------------------------------- */ .hir-page .hir-tabs button { flex: 1 1 0; min-width: 0; padding-inline: 10px; font-size: 15px; line-height: 1.3; } /* -------------------------------------------------------------------------- * Sơ đồ bậc thang (không còn dùng trên trang, giữ lại cho khối tái sử dụng) * ----------------------------------------------------------------------- */ .hir-ladder { margin: 0 0 44px; padding: 0; list-style: none; } .hir-ladder__level { position: relative; margin-left: calc(var(--hir-step, 0) * 68px); padding: 0 0 20px 24px; border-left: 2px solid var(--hir-blue); } .hir-ladder__level:last-child { padding-bottom: 0; border-left-color: transparent; } /* Nấc thang: đoạn ngang nối từ cạnh trái của bậc trước sang bậc này. */ .hir-ladder__level::before { content: ""; position: absolute; top: 0; left: -2px; width: 24px; height: 2px; background: var(--hir-blue); } .hir-ladder__rank { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: -4px 0 10px; } .hir-ladder__rank > span { color: var(--hir-blue); font-size: 13px; font-weight: 600; line-height: 1.3; } .hir-ladder__rank > em { color: var(--hir-muted); font-size: 13px; font-style: normal; line-height: 1.3; } .hir-ladder__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 16px; } .hir-ladder__level:has(.hir-ladder__node + .hir-ladder__node) .hir-ladder__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hir-ladder__node { padding: 20px 22px; border: 1px solid var(--hir-line); border-radius: var(--hir-radius); background: #fff; } .hir-ladder__node.is-self { border-color: var(--hir-blue); box-shadow: 0 0 0 1px var(--hir-blue); } .hir-ladder__tier { display: inline-block; margin-bottom: 6px; padding: 2px 10px; border-radius: 999px; background: var(--hir-soft); color: var(--hir-blue); font-size: 12px !important; font-weight: 600 !important; line-height: 1.4 !important; } .hir-ladder__node strong { display: block; color: var(--hir-navy); font-size: 17px; font-weight: 600 !important; line-height: 1.35; } .hir-ladder__self { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: var(--hir-blue); color: #fff; font-size: 12px !important; font-weight: 500 !important; line-height: 1.4 !important; } .hir-ladder__node p { margin: 8px 0 0; color: var(--hir-muted); font-size: 15px !important; line-height: 1.6 !important; } /* -------------------------------------------------------------------------- * IXP: cột logo bên trái, lưới luận điểm bên phải * ----------------------------------------------------------------------- */ .hir-panel-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; gap: 24px; } .hir-logo-grid--stack .hir-logo-card { min-height: 0; padding: 24px 20px; } .hir-gov-notes { margin-top: 24px; } .hir-registry__label { margin-bottom: 22px; } .hir-registry__label h3 { margin: 0 0 6px; color: var(--hir-navy); font-size: 19px !important; font-weight: 500 !important; line-height: 1.3 !important; } .hir-registry__label p { margin: 0; color: var(--hir-muted); font-size: 15px !important; line-height: 1.5 !important; } /* Số cột do template quyết định qua --hir-cols; bề rộng bị chặn theo số cột để * một nhóm chỉ có hai logo không kéo thẻ giãn hết khổ container. */ .hir-logo-grid { display: grid; grid-template-columns: repeat(var(--hir-cols, 5), minmax(0, 1fr)); max-width: calc(var(--hir-cols, 5) * 236px + (var(--hir-cols, 5) - 1) * 16px); margin: 0; padding: 0; gap: 16px; list-style: none; } .hir-logo-card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 168px; padding: 24px 18px 20px; border: 1px solid var(--hir-line); border-radius: var(--hir-radius); background: #fff; text-align: center; } .hir-logo-card img { width: auto; max-width: 132px; height: 44px; margin-bottom: 16px; object-fit: contain; object-position: center; } .hir-logo-card__name { color: var(--hir-navy); font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important; } .hir-logo-card__sub { margin-top: 4px; color: var(--hir-muted); font-size: 13px !important; font-weight: 400 !important; line-height: 1.4 !important; } /* -------------------------------------------------------------------------- * Lưới thẻ dùng chung * ----------------------------------------------------------------------- */ .hir-grid { display: grid; gap: 20px; } .hir-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hir-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hir-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hir-card { padding: 30px 26px; border: 1px solid var(--hir-line); border-radius: var(--hir-radius); background: #fff; } .hir-section--soft .hir-card { background: #fff; } .hir-card h3 { margin: 0 0 10px; color: var(--hir-navy); font-size: 19px !important; font-weight: 500 !important; line-height: 1.3 !important; } .hir-card p { margin: 0; color: var(--hir-muted); font-size: 16px !important; line-height: 1.6 !important; } .hir-icon { display: block; width: 30px !important; height: 30px !important; margin-bottom: 16px; color: var(--hir-blue); } .hir-card--numbered { position: relative; } .hir-card__num { position: absolute; top: 26px; right: 26px; color: var(--hir-line); font-size: 26px; font-weight: 500; line-height: 1; } .hir-defs { margin-top: 42px; } /* -------------------------------------------------------------------------- * Hai cột: tiêu đề bên trái, nội dung bên phải * ----------------------------------------------------------------------- */ .hir-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 56px; } .hir-split--reverse .hir-heading { order: 2; } /* Phân cấp IANA → RIR → NIR → LIR → doanh nghiệp */ .hir-hierarchy { position: relative; margin: 0; padding: 0 0 0 26px; list-style: none; } .hir-hierarchy::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 5px; width: 2px; background: linear-gradient(180deg, var(--hir-blue), var(--hir-cyan)); } .hir-hierarchy__item { position: relative; padding-bottom: 26px; } .hir-hierarchy__item:last-child { padding-bottom: 0; } .hir-hierarchy__item::before { content: ""; position: absolute; top: 7px; left: -26px; width: 12px; height: 12px; border: 2px solid var(--hir-blue); border-radius: 50%; background: #fff; } .hir-hierarchy__tier { display: inline-block; margin-bottom: 4px; color: var(--hir-blue); font-size: 13px !important; font-weight: 500 !important; line-height: 1.3 !important; } .hir-hierarchy__item strong { display: block; color: var(--hir-navy); font-size: 17px; font-weight: 600 !important; line-height: 1.35; } .hir-hierarchy__item p { margin: 6px 0 0; color: var(--hir-muted); font-size: 15px !important; line-height: 1.6 !important; } /* Lớp HiTechCloud đang đứng trong hệ phân cấp */ .hir-hierarchy__item.is-self::before { border-width: 3px; background: var(--hir-blue); } .hir-hierarchy__self { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: var(--hir-blue); color: #fff; font-size: 12px !important; font-weight: 500 !important; line-height: 1.4 !important; } /* -------------------------------------------------------------------------- * Lộ trình IPv6-only * ----------------------------------------------------------------------- */ .hir-roadmap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; gap: 20px; list-style: none; counter-reset: none; } .hir-roadmap__step { padding: 28px 24px; border: 1px solid var(--hir-line); border-top: 3px solid var(--hir-blue); border-radius: var(--hir-radius); background: #fff; } .hir-roadmap__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .hir-roadmap__phase { color: var(--hir-muted); font-size: 13px !important; font-weight: 400 !important; } .hir-roadmap__year { color: var(--hir-blue); font-size: 15px !important; font-weight: 600 !important; } /* Trạng thái thật của từng giai đoạn: xong / đang chạy / còn là kế hoạch. */ .hir-roadmap__step.is-active { border-color: var(--hir-blue); box-shadow: 0 0 0 1px var(--hir-blue); } .hir-roadmap__step.is-next { border-top-color: var(--hir-line); } .hir-roadmap__badge { display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: 999px; background: var(--hir-soft); color: var(--hir-muted); font-size: 12px !important; font-weight: 500 !important; line-height: 1.4 !important; } .hir-roadmap__step.is-done .hir-roadmap__badge { background: #e6f6ec; color: #1a7f45; } .hir-roadmap__step.is-active .hir-roadmap__badge { background: var(--hir-blue); color: #fff; } .hir-roadmap__step h3 { margin: 0 0 14px; color: var(--hir-navy); font-size: 18px !important; font-weight: 500 !important; line-height: 1.3 !important; } .hir-roadmap__step ul { margin: 0; padding: 0; list-style: none; } .hir-roadmap__step li { position: relative; padding: 0 0 10px 18px; color: var(--hir-muted); font-size: 15px !important; line-height: 1.55 !important; } .hir-roadmap__step li:last-child { padding-bottom: 0; } .hir-roadmap__step li::before { content: ""; position: absolute; top: 9px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--hir-blue); } /* -------------------------------------------------------------------------- * Hình minh hoạ và nguồn * ----------------------------------------------------------------------- */ .hir-figure { margin: 44px 0 0; padding: 22px; border: 1px solid var(--hir-line); border-radius: var(--hir-radius); background: #fff; } .hir-figure img { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 8px; } .hir-figure--wide img { max-width: 1080px; margin-inline: auto; } .hir-figure--banner { padding: 0; overflow: hidden; } .hir-figure--banner img { border-radius: 0; } .hir-figure--banner figcaption { padding: 16px 22px 20px; } .hir-figure figcaption { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hir-line); color: var(--hir-text); font-size: 15px !important; line-height: 1.55 !important; text-align: left; } .hir-figure__source { display: block; margin-top: 4px; color: var(--hir-muted); font-size: 13px !important; line-height: 1.5 !important; } /* -------------------------------------------------------------------------- * Số liệu * ----------------------------------------------------------------------- */ .hir-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .hir-metric-grid > article { padding: 26px 22px; border: 1px solid var(--hir-line); border-radius: var(--hir-radius); background: #fff; } .hir-metric-grid > article > strong { display: block; margin-bottom: 8px; color: var(--hir-blue); font-size: 30px; font-weight: 600 !important; line-height: 1.1; letter-spacing: -.01em; } .hir-metric__label { display: block; color: var(--hir-navy); font-size: 15px !important; font-weight: 500 !important; line-height: 1.4 !important; } .hir-metric__note { display: block; margin-top: 8px; color: var(--hir-muted); font-size: 13px !important; font-weight: 400 !important; line-height: 1.5 !important; } .hir-chart-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .hir-chart-row .hir-figure { margin-top: 44px; display: flex; flex-direction: column; justify-content: space-between; } /* -------------------------------------------------------------------------- * Danh sách văn bản pháp lý * ----------------------------------------------------------------------- */ .hir-legal { margin: 0; padding: 0; list-style: none; } .hir-legal__item { padding: 22px 0; border-bottom: 1px solid var(--hir-line); } .hir-legal__item:first-child { padding-top: 0; } .hir-legal__item:last-child { border-bottom: 0; padding-bottom: 0; } .hir-legal__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 8px; } .hir-legal__head strong { color: var(--hir-navy); font-size: 17px; font-weight: 600 !important; line-height: 1.35; } .hir-legal__head span { padding: 3px 10px; border-radius: 999px; background: var(--hir-soft); color: var(--hir-blue); font-size: 13px; font-weight: 500; line-height: 1.4; } .hir-section--soft .hir-legal__head span { background: #fff; } .hir-legal__item p { margin: 0; color: var(--hir-muted); font-size: 15px !important; line-height: 1.6 !important; } /* -------------------------------------------------------------------------- * Danh sách gạch đầu dòng có tiêu đề * ----------------------------------------------------------------------- */ .hir-checklist { margin: 0; padding: 0; list-style: none; } .hir-checklist li { position: relative; padding: 0 0 22px 34px; } .hir-checklist li:last-child { padding-bottom: 0; } .hir-checklist li::before { content: ""; position: absolute; top: 4px; left: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--hir-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 12px 12px no-repeat; } .hir-checklist strong { display: block; margin-bottom: 5px; color: var(--hir-navy); font-size: 17px; font-weight: 600 !important; line-height: 1.35; } .hir-checklist span { display: block; color: var(--hir-muted); font-size: 15px; line-height: 1.6; } /* -------------------------------------------------------------------------- * Bảng * ----------------------------------------------------------------------- */ .hir-table-wrap { overflow-x: auto; border: 1px solid var(--hir-line); border-radius: var(--hir-radius); background: #fff; } .hir-table { width: 100%; min-width: 720px; border-collapse: collapse; } .hir-table thead th { padding: 16px 22px; border-bottom: 1px solid var(--hir-line); background: var(--hir-soft); color: var(--hir-navy); font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; text-align: left; white-space: nowrap; } .hir-table tbody th, .hir-table tbody td { padding: 16px 22px; border-bottom: 1px solid var(--hir-line); font-size: 15px !important; line-height: 1.6 !important; text-align: left; vertical-align: top; } .hir-table tbody th { width: 26%; color: var(--hir-navy); font-weight: 500 !important; } .hir-table tbody td { color: var(--hir-muted); } .hir-table tbody tr:last-child th, .hir-table tbody tr:last-child td { border-bottom: 0; } .hir-table--fee tbody th { width: 46%; } .hir-table--fee tbody td { color: var(--hir-navy); font-weight: 500 !important; white-space: nowrap; } .hir-fee-notes { margin-top: 20px; } /* -------------------------------------------------------------------------- * Quy trình * ----------------------------------------------------------------------- */ .hir-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; gap: 20px; list-style: none; } .hir-step { padding: 28px 26px; border: 1px solid var(--hir-line); border-radius: var(--hir-radius); background: #fff; } .hir-step__num { display: block; margin-bottom: 12px; color: var(--hir-blue); font-size: 15px; font-weight: 600; line-height: 1; } .hir-step h3 { margin: 0 0 8px; color: var(--hir-navy); font-size: 18px !important; font-weight: 500 !important; line-height: 1.3 !important; } .hir-step p { margin: 0; color: var(--hir-muted); font-size: 15px !important; line-height: 1.6 !important; } /* -------------------------------------------------------------------------- * Câu hỏi thường gặp * ----------------------------------------------------------------------- */ /* Hai câu hỏi trên một hàng. Mỗi câu là một thẻ độc lập chứ không phải hàng * trong một danh sách dọc, nếu không thì mở một câu ở cột trái sẽ đẩy lệch câu * ở cột phải. */ .hir-faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; } .hir-faq-item { border: 1px solid var(--hir-line); border-radius: var(--hir-radius); background: #fff; overflow: hidden; } .hir-faq-item > summary { position: relative; padding: 22px 60px 22px 26px; color: var(--hir-navy); font-size: 17px; font-weight: 500; line-height: 1.45; cursor: pointer; list-style: none; } .hir-faq-item > summary::-webkit-details-marker { display: none; } .hir-faq-item > summary::after { content: ""; position: absolute; top: 50%; right: 26px; width: 12px; height: 12px; margin-top: -6px; border-right: 2px solid var(--hir-blue); border-bottom: 2px solid var(--hir-blue); transform: rotate(45deg); transition: transform .18s ease; } .hir-faq-item[open] > summary::after { transform: rotate(-135deg); } .hir-faq-item > p { margin: 0; padding: 0 26px 24px; color: var(--hir-muted); font-size: 16px !important; line-height: 1.65 !important; } /* -------------------------------------------------------------------------- * Nguồn tra cứu * ----------------------------------------------------------------------- */ /* Khoảng trắng phía trên tách khối này khỏi dãy tab bên trên. */ .hir-docs { padding: 116px 0 84px; background: var(--hir-soft); } /* Sáu nguồn trên MỘT hàng — ô hẹp nên chữ và đệm phải nhỏ lại tương ứng. * Giữ một hàng xuống tận 900px (xem media query bên dưới) chứ không bẻ sớm ở * 1100px như các lưới khác: người dùng yêu cầu khối này luôn nằm một hàng. */ .hir-docs__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; gap: 14px; list-style: none; } @media (max-width: 900px) { .hir-docs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .hir-docs__item a { display: block; height: 100%; padding: 20px 18px; border: 1px solid var(--hir-line); border-radius: var(--hir-radius); background: #fff; color: inherit; text-decoration: none !important; transition: border-color .18s ease; } .hir-docs__item a:hover { border-color: var(--hir-blue); } .hir-docs__item strong { display: block; margin-bottom: 8px; color: var(--hir-navy); font-size: 15px; font-weight: 600 !important; line-height: 1.35; } .hir-docs__item span { display: block; color: var(--hir-muted); font-size: 13px; line-height: 1.55; } /* -------------------------------------------------------------------------- * CTA * ----------------------------------------------------------------------- */ .hir-cta { padding: 84px 0; } .hir-cta__panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 40px; padding: 54px 56px; border-radius: var(--hir-radius); background: var(--hir-navy); color: #fff; } .hir-cta__panel .hir-eyebrow { color: var(--hir-cyan); } .hir-cta__panel h2 { margin: 0 0 12px; color: #fff !important; font-size: clamp(26px, 2.2vw, 32px) !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: -.01em !important; } .hir-cta__panel p { margin: 0; color: rgba(255, 255, 255, .85) !important; font-size: 16px !important; line-height: 1.6 !important; } .hir-cta__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; } /* -------------------------------------------------------------------------- * Thanh tab dùng chung: bỏ viền dưới thừa khi panel đầu tiên có nền trắng * ----------------------------------------------------------------------- */ .hir-page .hc26-tab-panel > section { width: 100%; } /* -------------------------------------------------------------------------- * Màn hình nhỏ * ----------------------------------------------------------------------- */ @media (max-width: 1100px) { .hir-grid--4, .hir-metric-grid, .hir-roadmap { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hir-grid--3, .hir-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hir-tree { grid-template-columns: minmax(0, 1fr); gap: 24px; } .hir-paths { grid-template-columns: minmax(0, 1fr); } .hir-page .hir-tabs button { flex: 0 0 auto; min-width: max-content; font-size: 14px; } .hir-tree__legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; } .hir-factrail__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hir-faq-list { grid-template-columns: minmax(0, 1fr); } .hir-logo-grid { grid-template-columns: repeat(min(var(--hir-cols, 5), 3), minmax(0, 1fr)); max-width: none; } .hir-intro, .hir-panel-split { grid-template-columns: minmax(0, 1fr); } .hir-intro__brand { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 24px; } .hir-intro__brand img { margin-bottom: 0; } .hir-orbits { grid-template-columns: minmax(0, 1fr); } .hir-ladder__level { margin-left: calc(var(--hir-step, 0) * 34px); } .hir-split { grid-template-columns: minmax(0, 1fr); gap: 34px; } .hir-split--reverse .hir-heading { order: 0; } .hir-chart-row { grid-template-columns: minmax(0, 1fr); } .hir-chart-row .hir-figure + .hir-figure { margin-top: 20px; } .hir-cta__panel { grid-template-columns: minmax(0, 1fr); padding: 40px 32px; } .hir-cta__actions { justify-content: flex-start; } } @media (max-width: 782px) { .hir-section, .hir-docs, .hir-cta { padding: 56px 0; } .hir-self-card { padding: 22px 20px; } .hir-hero { min-height: 640px; padding-top: 36px; } .hir-hero::before { background: linear-gradient(180deg, rgba(4, 16, 32, .14), rgba(4, 16, 32, .46) 34%, rgba(4, 16, 32, .98) 62%); } .hir-hero__grid { align-items: flex-end; min-height: 604px; } .hir-hero__content { width: 100%; padding-bottom: 42px; } .hir-hero h1 { font-size: clamp(30px, 8.6vw, 40px) !important; } .hir-hero p { font-size: 16px !important; } .hir-btn { min-height: 52px; padding-inline: 22px; font-size: 15px; } .hir-grid--3, .hir-grid--4, .hir-metric-grid, .hir-roadmap, .hir-steps, .hir-docs__grid, .hir-factrail__grid { grid-template-columns: minmax(0, 1fr); } .hir-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; } .hir-tree { padding: 20px 16px; } .hir-tree__legend { grid-template-columns: minmax(0, 1fr); } /* Cây quá hẹp để đọc trên điện thoại: cho cuộn ngang trong khung riêng. */ .hir-tree__chart { overflow-x: auto; } .hir-tree__chart svg { width: 660px; max-width: none; } .hir-grid--2, .hir-ladder__level:has(.hir-ladder__node + .hir-ladder__node) .hir-ladder__row { grid-template-columns: minmax(0, 1fr); } /* Vòng tròn quá chật ở màn hình hẹp: bỏ định vị tuyệt đối để `left/top` * inline mất tác dụng, các logo tự rơi về lưới hai cột. */ .hir-orbit__ring { width: 100%; aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .hir-orbit__ring::before { content: none; } .hir-orbit__core { position: static; grid-column: 1 / -1; width: 100%; height: auto; padding: 18px 24px; border-radius: var(--hir-radius); transform: none; } .hir-orbit__node { position: static; width: auto; transform: none; } .hir-ladder__level { margin-left: 0; } .hir-logo-card { min-height: 150px; padding: 20px 14px 16px; } .hir-logo-card img { max-width: 104px; height: 36px; } .hir-heading--lead { margin-bottom: 32px; padding-bottom: 20px; } .hir-figure { padding: 14px; } .hir-faq-item > summary { padding: 18px 48px 18px 20px; font-size: 16px; } .hir-faq-item > p { padding: 0 20px 20px; } }