/* PROTO Giải pháp — trang tổng và trang chi tiết */
.pgp {
	--pgp-navy: #0b1f33;
	--pgp-navy-2: #11293f;
	--pgp-line-dark: #1f3b57;
	--pgp-ink: #12263a;
	--pgp-text: #3d4f61;
	--pgp-muted: #4a5b6c;
	--pgp-soft: #c9d6e3;
	--pgp-softer: #9fb3c8;
	--pgp-ground: #f4f7fa;
	--pgp-line: #dce3ea;
	--pgp-accent: #0e72c7;
	--pgp-accent-dark: #0b5a9e;
	--pgp-cyan: #5cc2f2;
	--pgp-chip: #eef3f8;
	--pgp-head: "Space Grotesk", system-ui, sans-serif;
	background: var(--pgp-ground);
	color: var(--pgp-ink);
	line-height: 1.6;
	overflow-wrap: break-word;
}
.pgp *, .pgp *::before, .pgp *::after { box-sizing: border-box; }
.pgp h1, .pgp h2, .pgp h3, .pgp p { margin: 0; text-wrap: pretty; }
.pgp a { text-decoration: none; }
.pgp--embed { background: transparent; }
.pgp [id] { scroll-margin-top: 96px; }
.pgp-card:target { outline: 3px solid var(--pgp-cyan); outline-offset: 3px; }

.pgp-wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.pgp-stack { display: flex; flex-direction: column; gap: 28px; }
.pgp-stack--tight { gap: 16px; }
.pgp-ico { flex: none; }

/* chữ */
.pgp-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--pgp-accent); text-transform: uppercase; }
.pgp-eyebrow--cyan { color: var(--pgp-cyan); }
.pgp-h2 { font-family: var(--pgp-head); font-weight: 700; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.2; color: var(--pgp-navy); }
.pgp-h2--sector { font-size: clamp(26px, 2.2vw, 32px); }
.pgp-h2--band { font-size: clamp(24px, 2vw, 28px); }
.pgp-h2--light { color: #fff; }
.pgp-lead { font-size: 17px; line-height: 1.65; color: var(--pgp-text); max-width: 760px; }
.pgp-lead--light { color: var(--pgp-soft); }
.pgp-num { font-family: var(--pgp-head); font-size: 15px; font-weight: 700; color: var(--pgp-accent); }
.pgp-head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.pgp-split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }

/* nút */
.pgp-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pgp a.pgp-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 8px; font-weight: 600; font-size: 16px; line-height: 1.2; transition: background-color .15s, border-color .15s; }
.pgp a.pgp-btn--cyan { background: var(--pgp-cyan); color: var(--pgp-navy); }
.pgp a.pgp-btn--cyan:hover { background: #86d3f6; color: var(--pgp-navy); }
.pgp a.pgp-btn--ghost { border: 1px solid #47637f; color: #fff; }
.pgp a.pgp-btn--ghost:hover { border-color: var(--pgp-cyan); color: #fff; }
.pgp a.pgp-btn--navy { background: var(--pgp-navy); color: #fff; }
.pgp a.pgp-btn--navy:hover { background: #17344f; color: #fff; }
.pgp a.pgp-btn--outline { border: 1px solid #b9c6d3; color: var(--pgp-navy); min-height: 44px; font-size: 15px; }
.pgp a.pgp-btn--outline:hover { border-color: var(--pgp-navy); color: var(--pgp-navy); }

/* hero */
.pgp-hero { background: var(--pgp-navy); color: #fff; }
.pgp-hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 48px; align-items: start; padding-top: 56px; padding-bottom: 64px; }
.pgp-hero__main { display: flex; flex-direction: column; gap: 22px; }
.pgp-hero__title { font-family: var(--pgp-head); font-weight: 700; font-size: clamp(32px, 3.9vw, 54px); line-height: 1.12; letter-spacing: -.01em; color: #fff; }
.pgp-hero__lead { font-size: 18px; line-height: 1.65; color: var(--pgp-soft); max-width: 560px; }
.pgp-hero__sub { font-size: 14px; color: var(--pgp-softer); }
.pgp-index { background: var(--pgp-navy-2); border: 1px solid var(--pgp-line-dark); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; }
.pgp-index__title { font-family: var(--pgp-head); font-size: 18px; font-weight: 600; color: #fff; margin-bottom: 10px; }
.pgp-index a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 8px; color: #e6eef6; font-weight: 500; border-bottom: 1px solid var(--pgp-line-dark); }
.pgp-index a:last-child { border-bottom: 0; }
.pgp-index a:hover { background: #17344f; color: #fff; }
.pgp-index__n { font-size: 14px; font-weight: 400; color: var(--pgp-softer); white-space: nowrap; }

/* thanh lĩnh vực */
.pgp-tabs { background: #fff; border-bottom: 1px solid var(--pgp-line); }
.pgp-tabs__row { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
.pgp a.pgp-tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--pgp-line); color: var(--pgp-ink); font-size: 14px; font-weight: 500; }
.pgp a.pgp-tab:hover { border-color: var(--pgp-accent); color: var(--pgp-accent); }
.pgp a.pgp-tab--dark { background: var(--pgp-navy); border-color: var(--pgp-navy); color: #fff; }
.pgp a.pgp-tab--dark:hover { background: #17344f; color: #fff; }

/* khối chung */
.pgp-section { padding: 64px 0 48px; }
.pgp-section--top { padding: 72px 0 40px; }
.pgp-section--tight { padding: 32px 0 48px; }
.pgp-section--end { padding: 16px 0 72px; }

/* kiến trúc */
.pgp-layers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 16px; }
.pgp-layer { background: #fff; border: 1px solid var(--pgp-line); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.pgp-layer__top { display: flex; align-items: center; justify-content: space-between; color: var(--pgp-softer); }
.pgp-layer__top .pgp-ico { width: 22px; height: 22px; }
.pgp-layer__title { font-family: var(--pgp-head); font-size: 20px; font-weight: 600; color: var(--pgp-navy); }
.pgp-layer__text { font-size: 15px; color: var(--pgp-text); }
.pgp .pgp-layer__proto { margin-top: auto; font-size: 13px; font-weight: 500; color: var(--pgp-muted); }
.pgp-layer--dark { background: var(--pgp-navy); border-color: var(--pgp-navy); }
.pgp-layer--dark .pgp-num { color: var(--pgp-cyan); }
.pgp-layer--dark .pgp-layer__title { color: #fff; }
.pgp-layer--dark .pgp-layer__text { color: var(--pgp-soft); }
.pgp-layer--dark .pgp-layer__proto { color: var(--pgp-softer); }
.pgp-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); border-top: 1px solid var(--pgp-line); padding-top: 24px; }
.pgp-rules p { padding: 4px 24px 4px 0; font-size: 15px; color: var(--pgp-text); }
.pgp-rules strong { color: var(--pgp-navy); }

/* lĩnh vực */
.pgp-sector { display: flex; flex-direction: column; gap: 24px; padding: 48px 0; min-width: 0; }
.pgp-sector__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--pgp-line); padding-bottom: 20px; }
.pgp-sector__intro { display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.pgp-sector__desc { font-size: 16px; color: var(--pgp-text); }
.pgp-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(540px, 100%), 1fr)); column-gap: 32px; }

/* lưới thẻ */
.pgp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(262px, 100%), 1fr)); gap: 16px; }
.pgp-grid--compact { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.pgp-grid--posts { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.pgp-grid--ai { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

/* thẻ giải pháp */
.pgp-card { background: #fff; border: 1px solid var(--pgp-line); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pgp-card__title { font-family: var(--pgp-head); font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--pgp-navy); }
.pgp .pgp-card__title a { color: inherit; }
.pgp .pgp-card__title a:hover { color: var(--pgp-accent); }
.pgp-card__desc { font-size: 15px; color: var(--pgp-text); }
.pgp-card__proto { font-size: 13px; color: var(--pgp-muted); }
.pgp a.pgp-card__link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; font-size: 15px; color: var(--pgp-accent); }
.pgp a.pgp-card__link:hover { color: var(--pgp-accent-dark); }
.pgp a.pgp-card__link.is-pending { color: var(--pgp-ink); }
.pgp a.pgp-card__link.is-pending:hover { color: var(--pgp-accent); }
.pgp-badges, .pgp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pgp-badge, .pgp-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; line-height: 1.3; }
.pgp-badge { font-weight: 600; }
.pgp-badge--reg { background: #fff1d6; color: #8a4b00; }
.pgp-badge--ok { background: #e3f1fc; color: var(--pgp-accent-dark); }
.pgp-badge--pending { background: #eef1f4; color: var(--pgp-muted); }
.pgp-chip { background: var(--pgp-chip); color: #2c3e50; font-weight: 500; }
.pgp-sector__head .pgp-badge { min-height: 28px; padding: 2px 12px; font-size: 13px; }

/* thẻ trên nền tối */
.pgp-card--dark { background: var(--pgp-navy-2); border-color: var(--pgp-line-dark); }
.pgp-card--dark .pgp-card__title { color: #fff; }
.pgp-card--dark .pgp-card__desc { color: var(--pgp-soft); }
.pgp-card--dark .pgp-card__proto { color: var(--pgp-softer); }
.pgp-card--dark .pgp-badge--ok, .pgp-card--dark .pgp-badge--pending { background: var(--pgp-line-dark); color: var(--pgp-soft); }
.pgp-card--dark .pgp-chip { background: var(--pgp-line-dark); color: #e6eef6; }
.pgp .pgp-card--dark a.pgp-card__link, .pgp .pgp-card--dark a.pgp-card__link.is-pending { color: var(--pgp-cyan); }
.pgp .pgp-card--dark a.pgp-card__link:hover { color: #86d3f6; }

/* khối AI */
.pgp-ai { background: var(--pgp-navy); color: #fff; margin-top: 40px; }
.pgp-ai--page { margin-top: 0; }
.pgp-ai--page .pgp-ai__grid { padding-top: 72px; padding-bottom: 88px; }
.pgp .pgp-ai__title { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.12; }
.pgp--ai .pgp-section--end { padding-top: 56px; }
.pgp a.pgp-layer__link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 600; font-size: 14px; color: var(--pgp-cyan); }
.pgp a.pgp-layer__link:hover { color: #86d3f6; }
.pgp-ai__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 40px; align-items: start; padding-top: 72px; padding-bottom: 72px; }
.pgp-ai__intro { display: flex; flex-direction: column; gap: 14px; }

/* thiết bị */
.pgp a.pgp-product, .pgp-product { background: #fff; border: 1px solid var(--pgp-line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; color: var(--pgp-ink); }
.pgp a.pgp-product:hover { border-color: var(--pgp-accent); }
.pgp-product__img { display: flex; align-items: center; justify-content: center; height: 170px; border-radius: 10px; background: var(--pgp-chip); overflow: hidden; }
.pgp-product__img img { width: 100%; height: 100%; object-fit: contain; }
.pgp-product__name { font-family: var(--pgp-head); font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--pgp-navy); }
.pgp-product__text { font-size: 14px; line-height: 1.55; color: var(--pgp-text); }
.pgp-product--note { border-style: dashed; border-color: #b9c6d3; justify-content: center; padding: 20px; }

/* dải thiết kế phần cứng */
.pgp-band { background: #e3f1fc; border-radius: 18px; padding: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.pgp-band__text { display: flex; flex-direction: column; gap: 10px; max-width: 680px; }
.pgp-band__text p { font-size: 16px; color: #24384c; }

/* bài viết kỹ thuật */
.pgp-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pgp .pgp-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 15px; color: var(--pgp-accent); text-decoration: underline; text-underline-offset: 3px; }
.pgp a.pgp-post { background: #fff; border: 1px solid var(--pgp-line); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.pgp a.pgp-post:hover { border-color: var(--pgp-accent); }
.pgp-post__cat { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pgp-muted); }
.pgp-post__title { font-family: var(--pgp-head); font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--pgp-navy); }

/* liên hệ */
.pgp-cta { background: var(--pgp-navy); border-radius: 20px; padding: 48px 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 32px; align-items: center; }
.pgp-cta > div:first-child { display: flex; flex-direction: column; gap: 12px; }

/* trang chi tiết: nền trắng, khung canh thẳng logo và chân trang của theme (Flatsome 1080px) */
.pgp-single { --pgp-site: 1080px; background: #fff; }
.pgp-single .pgp-wrap { max-width: var(--pgp-site); padding-left: 15px; padding-right: 15px; }
.pgp-article-head { background: #fff; border-bottom: 1px solid var(--pgp-line); padding: 40px 0 44px; }
.pgp-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--pgp-muted); }
.pgp .pgp-crumbs a { color: var(--pgp-muted); }
.pgp .pgp-crumbs a:hover { color: var(--pgp-accent); }
.pgp-article-title { font-family: var(--pgp-head); font-weight: 700; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.15; color: var(--pgp-navy); max-width: 860px; }
.pgp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; margin-top: 8px; }
.pgp-fact { background: var(--pgp-ground); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.pgp-fact__label { font-size: 13px; font-weight: 600; color: var(--pgp-muted); }
.pgp-fact__value { font-size: 16px; font-weight: 600; color: var(--pgp-navy); }
.pgp-article-builder { background: #fff; }
.pgp-prose { max-width: 820px; padding: 40px 0 24px; font-size: 17px; line-height: 1.7; color: #24384c; }
.pgp-prose h2 { font-family: var(--pgp-head); font-size: 28px; line-height: 1.25; color: var(--pgp-navy); margin: 40px 0 14px; }
.pgp-prose h3 { font-family: var(--pgp-head); font-size: 21px; color: var(--pgp-navy); margin: 28px 0 10px; }
.pgp-prose p, .pgp-prose ul, .pgp-prose ol, .pgp-prose table, .pgp-prose figure { margin: 0 0 18px; }
.pgp-prose ul, .pgp-prose ol { padding-left: 22px; }
.pgp-prose img { max-width: 100%; height: auto; border-radius: 10px; }
.pgp-prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.pgp-prose th, .pgp-prose td { border: 1px solid var(--pgp-line); padding: 10px 14px; text-align: left; }
.pgp-prose th { background: var(--pgp-chip); }

/* thẻ: link demo */
.pgp-card__links { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.pgp .pgp-card__links a.pgp-card__link { margin-top: 0; }
.pgp a.pgp-card__demo { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 15px; color: var(--pgp-ink); text-decoration: underline; text-underline-offset: 3px; }
.pgp a.pgp-card__demo:hover { color: var(--pgp-accent); }
.pgp-card--dark a.pgp-card__demo { color: #e6eef6; }

/* trang chi tiết: mục lục */
.pgp-toc { background: #fff; border-bottom: 1px solid var(--pgp-line); }
.pgp-toc__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding-top: 8px; padding-bottom: 8px; }
.pgp-toc__label { font-size: 13px; font-weight: 600; color: var(--pgp-muted); }
.pgp .pgp-toc a { display: inline-flex; align-items: center; min-height: 40px; font-size: 14px; font-weight: 500; color: var(--pgp-ink); }
.pgp .pgp-toc a:hover { color: var(--pgp-accent); }
.pgp-prose h2[id] { scroll-margin-top: 120px; }

/* trang chi tiết: thành phần trong bài */
.pgp-prose .pgp-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 14px; margin: 8px 0 24px; }
.pgp-prose .pgp-flow__step { position: relative; background: #fff; border: 1px solid var(--pgp-line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.5; color: var(--pgp-text); }
.pgp-prose .pgp-flow__step:last-child { background: var(--pgp-navy); border-color: var(--pgp-navy); color: var(--pgp-soft); }
.pgp-prose .pgp-flow__step:last-child strong { color: #fff; }
.pgp-prose .pgp-flow__step:last-child .pgp-flow__n { color: var(--pgp-cyan); }
.pgp-prose .pgp-flow__step:not(:last-child)::after { content: "→"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--pgp-softer); }
.pgp-prose .pgp-flow__n { font-family: var(--pgp-head); font-size: 14px; font-weight: 700; color: var(--pgp-accent); }
.pgp-prose .pgp-flow__step strong { font-family: var(--pgp-head); font-size: 17px; color: var(--pgp-navy); }
.pgp-prose .pgp-note { background: #fff7e6; border-radius: 12px; padding: 16px 18px; margin: 0 0 18px; font-size: 16px; color: #3d2f12; }
.pgp-prose .pgp-note strong { color: #6b3a00; }
.pgp-prose .pgp-updated { font-size: 14px; color: var(--pgp-muted); font-style: italic; }
.pgp-prose figure { margin: 8px 0 24px; }
.pgp-prose figcaption { font-size: 14px; color: var(--pgp-muted); margin-top: 8px; }
.pgp-prose td, .pgp-prose th { vertical-align: top; }
.pgp-prose table { background: #fff; border-radius: 8px; }
.pgp-prose table a { white-space: nowrap; }
.pgp-prose a { color: var(--pgp-accent); text-decoration: underline; text-underline-offset: 2px; }
.pgp-article-head .pgp-actions { margin-top: 4px; }

/* trang chi tiết: thân bài hai cột */
.pgp-body__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.pgp-body__main { min-width: 0; max-width: 760px; }
.pgp-single .pgp-prose { max-width: none; padding: 40px 0 56px; }
.pgp-aside { display: none; }

/* chữ trong bài: theme Flatsome tô xám p/td và bỏ lề trái ô đầu bảng, đặt lại cho đồng nhất */
.pgp .pgp-prose p, .pgp .pgp-prose li, .pgp .pgp-prose td { color: inherit; }
.pgp .pgp-prose li { margin-bottom: 6px; }
.pgp .pgp-prose h2 { margin: 48px 0 16px; padding-top: 40px; border-top: 1px solid var(--pgp-line); }
.pgp .pgp-prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pgp .pgp-prose th, .pgp .pgp-prose td { padding: 11px 14px; font-size: 15px; line-height: 1.55; border: 1px solid var(--pgp-line); }
.pgp .pgp-prose th { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pgp-muted); background: var(--pgp-chip); }
.pgp .pgp-prose table { border-radius: 0; }
.pgp-prose .pgp-flow__step { background: var(--pgp-ground); border-color: transparent; }

/* mục lục ngang: chỉ dùng dưới 1024px, một dòng, vuốt ngang */
.pgp-toc__row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.pgp-toc__row::-webkit-scrollbar { display: none; }

/* sau bài: giải pháp liên quan + liên hệ trên nền xám */
.pgp-after { background: var(--pgp-ground); border-top: 1px solid var(--pgp-line); }
.pgp-single .pgp-related { padding: 56px 0 8px; }
.pgp .pgp-grid--related { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.pgp-single .pgp-section--end { padding-top: 40px; }
.pgp-single .pgp-related + .pgp-section--end { padding-top: 40px; }

@media (min-width: 601px) {
	.pgp-single .pgp-prose .pgp-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 30px; }
	.pgp-single .pgp-prose .pgp-flow__step:not(:last-child)::after { content: none; }
	.pgp-single .pgp-prose .pgp-flow__step:nth-child(odd)::after { content: "→"; right: -21px; }
}

@media (min-width: 1024px) {
	.pgp-single .pgp-toc { display: none; }
	.pgp-body__grid { grid-template-columns: minmax(0, 1fr) 296px; column-gap: 56px; }
	.pgp-body__main { max-width: none; }
	.pgp-aside { display: block; padding: 40px 0 56px; }
	.pgp-aside__inner { position: sticky; top: 32px; display: flex; flex-direction: column; gap: 20px; }
	.admin-bar .pgp-aside__inner { top: 64px; }
	body:has(#header.has-sticky) .pgp-aside__inner { top: 96px; }
	body.admin-bar:has(#header.has-sticky) .pgp-aside__inner { top: 128px; }
}

.pgp-aside__toc { border-left: 1px solid var(--pgp-line); }
.pgp .pgp-aside__label { margin: 0 0 6px 16px; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pgp-muted); }
.pgp .pgp-aside__toc ol { list-style: none; margin: 0; padding: 0; }
.pgp .pgp-aside__toc li { list-style: none; margin: 0; padding: 0; }
.pgp .pgp-aside__toc a { display: flex; align-items: baseline; gap: 10px; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; font-size: 14.5px; line-height: 1.4; color: var(--pgp-text); }
.pgp .pgp-aside__toc a:hover { color: var(--pgp-accent); }
.pgp .pgp-aside__toc a.is-active { border-left-color: var(--pgp-accent); color: var(--pgp-navy); font-weight: 600; }
.pgp-aside__n { flex: none; min-width: 18px; font-family: var(--pgp-head); font-size: 12px; font-weight: 700; color: var(--pgp-softer); }
.pgp-aside__toc a.is-active .pgp-aside__n { color: var(--pgp-accent); }
.pgp-aside__cta { background: var(--pgp-navy); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.pgp .pgp-aside__title { font-family: var(--pgp-head); font-size: 18px; font-weight: 600; line-height: 1.3; color: #fff; }
.pgp .pgp-aside__text { font-size: 14.5px; line-height: 1.55; color: var(--pgp-soft); }
.pgp-aside__btns { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.pgp .pgp-aside__btns a.pgp-btn { justify-content: center; width: 100%; min-height: 44px; font-size: 15px; }

@media (max-width: 600px) {
	.pgp-prose .pgp-flow__step:not(:last-child)::after { content: none; }
	.pgp-hero__grid { padding-top: 36px; padding-bottom: 44px; gap: 32px; }
	.pgp-section { padding: 44px 0 32px; }
	.pgp-sector { padding: 32px 0; }
	.pgp-cta { padding: 32px 22px; }
	.pgp-band { padding: 26px 22px; }
	.pgp-index { display: none; }
}

/* =========================================================================
 * 1.4.0 — Trang Giải pháp IoT / AI bố cục động
 * ====================================================================== */
.pgp--iot, .pgp--ai { background: #ffffff; }
.pgp--iot .pgp-wrap, .pgp--ai .pgp-wrap { max-width: 1080px; padding-left: 15px; padding-right: 15px; }
.pgp--iot .pgp-section, .pgp--ai .pgp-section { padding: 72px 0 64px; }
.pgp--iot #lien-he, .pgp--ai #lien-he { padding: 0 0 80px; }
.pgp-ground { background-color: var(--pgp-ground); }
.pgp-dots { background-image: radial-gradient(rgba(92,194,242,.15) 1px, transparent 1.3px); background-size: 22px 22px; }
.pgp-dots-light { background-image: radial-gradient(rgba(14,114,199,.10) 1px, transparent 1.3px); background-size: 22px 22px; }
.pgp-mono, .pgp-live__chips span, .pgp-topo__bar, .pgp-topo__name small, .pgp-topo__val, .pgp-topo__k, .pgp-topo__gw small, .pgp-topo__dim, .pgp-topo__ok, .pgp-topo__big, .pgp-topo__stats b, .pgp-topo__lbl, .pgp-ticker__track span, .pgp-arch__num, .pgp-arch__tags em, .pgp-mini--rows span, .pgp-mini__proto, .pgp-mini--dash b, .pgp-con__bar, .pgp-con__tool, .pgp-con__chart small, .pgp-con__ok, .pgp-con__foot, .pgp-mcp__list small, .pgp-mcp__hub b {
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* đèn, gói tin, sóng */
.pgp-led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3ddc97; flex: none; animation: pgp-led 2.2s ease-out infinite; }
.pgp-led.is-off { background: #9fb3c8; animation: none; }
.pgp-wire { position: absolute; display: block; background: #1f3b57; }
.pgp-wire--h { left: 0; right: 0; height: 2px; }
.pgp-wire--v { right: 0; width: 2px; }
.pgp-wire--static, .pgp-mcp__wire { position: relative; }
.pgp-pk { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #5cc2f2; box-shadow: 0 0 10px 2px rgba(92,194,242,.55); opacity: 0; animation: pgp-pkx 1.8s linear infinite; }
.pgp-wire--v .pgp-pk { top: 0; left: -3px; animation-name: pgp-pky; animation-duration: 1.5s; }
.pgp-wire--v .pgp-pk--up { animation-name: pgp-pkyr; }
.pgp-pk--cmd { background: #f5a524; box-shadow: 0 0 10px 2px rgba(245,165,36,.5); animation-name: pgp-pkxr; animation-duration: 3.2s; animation-delay: -1.6s; }
.pgp-pk--q { background: #ffffff; box-shadow: 0 0 8px 2px rgba(255,255,255,.4); animation-name: pgp-pkxr; animation-duration: 2s; animation-delay: -1.5s; }
.pgp-pk--slow { animation-duration: 3.6s; }
.pgp-sig { display: inline-flex; align-items: flex-end; gap: 3px; height: 14px; }
.pgp-sig i { display: block; width: 4px; border-radius: 1px; background: #5cc2f2; animation: pgp-sig 1.6s ease-in-out infinite; }
.pgp-sig i:nth-child(1) { height: 5px; } .pgp-sig i:nth-child(2) { height: 8px; animation-delay: .15s; } .pgp-sig i:nth-child(3) { height: 11px; animation-delay: .3s; } .pgp-sig i:nth-child(4) { height: 14px; animation-delay: .45s; }
.pgp-ring { animation: pgp-ring 2.4s ease-out infinite; }
.pgp-caret { display: inline-block; width: 7px; height: 14px; margin-left: 2px; vertical-align: -2px; background: #5cc2f2; animation: pgp-caret 1s steps(1) infinite; }
.pgp-spark { display: flex; align-items: flex-end; gap: 3px; height: 36px; }
.pgp-spark i { flex: 1 1 0; border-radius: 2px; background: #1f5f8a; transition: height .7s ease; }
.pgp-spark i:last-child { background: #5cc2f2; }

/* đầu trang tối */
.pgp-live { background-color: #071526; color: #ffffff; }
.pgp-live__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 48px; align-items: center; padding-top: 64px; padding-bottom: 56px; }
.pgp-live__main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.pgp-live__eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.pgp .pgp-live__title { margin: 0; font-family: var(--pgp-head); font-weight: 700; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.1; letter-spacing: -.01em; color: #ffffff; }
.pgp .pgp-live__lead { margin: 0; font-size: 18px; line-height: 1.65; color: var(--pgp-soft); max-width: 540px; }
.pgp .pgp-live__sub { margin: 0; font-size: 14px; color: var(--pgp-softer); }
.pgp-live__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pgp-live__chips span { padding: 5px 10px; border-radius: 6px; border: 1px solid #1f3b57; font-size: 12px; color: #c9d6e3; }

/* sơ đồ luồng dữ liệu */
.pgp-topo { margin: 0; min-width: 0; background: #0b1f33; border: 1px solid #1f3b57; border-radius: 20px; padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 14px; }
.pgp-topo__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 11.5px; letter-spacing: .06em; color: #9fb3c8; }
.pgp-topo__on, .pgp-topo__ok { display: inline-flex; align-items: center; gap: 8px; color: #3ddc97; }
.pgp-topo__row { display: flex; align-items: stretch; }
.pgp-topo__nodes { flex: 1.45 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pgp-topo__node { height: 52px; border: 1px solid #1f3b57; background: #11293f; border-radius: 10px; padding: 0 10px 0 12px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.pgp-topo__name { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.pgp-topo__name b { font-size: 13px; font-weight: 600; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgp-topo__name small { font-size: 11px; color: #9fb3c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgp-topo__val { font-size: 13px; font-weight: 600; color: #5cc2f2; white-space: nowrap; transition: color .4s ease; }
.pgp-topo__wires { flex: 0 0 32px; position: relative; }
.pgp-topo__wires--out { flex-basis: 44px; }
.pgp-topo__lbl { position: absolute; left: 0; right: 0; text-align: center; font-size: 9.5px; color: #9fb3c8; }
.pgp-topo__col { flex: .85 1 0; min-width: 0; display: flex; align-items: center; }
.pgp-topo__col--cloud { flex: 1 1 0; }
.pgp-topo__gw { width: 100%; border: 1px solid #5cc2f2; background: #0e2a44; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.pgp-topo__k { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: .08em; color: #5cc2f2; }
.pgp-topo__gw b { font-size: 16px; font-weight: 700; color: #ffffff; }
.pgp-topo__gw small { font-size: 11px; color: #c9d6e3; }
.pgp .pgp-topo__dim { font-size: 11px; color: #9fb3c8; }
.pgp-topo__cloud { width: 100%; border: 1px solid #1f3b57; background: #11293f; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.pgp-topo__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 8px; }
.pgp-topo__head b { font-size: 13px; font-weight: 700; color: #ffffff; }
.pgp-topo__ok { font-size: 10.5px; gap: 6px; }
.pgp-topo__big { white-space: nowrap; font-size: clamp(17px, 1.7vw, 22px); font-weight: 600; color: #ffffff; line-height: 1.2; transition: color .4s ease; }
.pgp-topo__stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: #9fb3c8; }
.pgp-topo__stats span { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.pgp-topo__stats b { font-size: 14px; font-weight: 500; color: #ffffff; transition: color .4s ease; }
.pgp-topo__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: #9fb3c8; }
.pgp-topo__legend span { display: inline-flex; align-items: center; gap: 8px; }
.pgp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #5cc2f2; }
.pgp-dot--cmd { background: #f5a524; }
.is-alarm [data-alarm] { color: #f5a524 !important; }
.is-alarm .has-alarm .pgp-led { background: #f5a524; animation-name: pgp-ledw; animation-duration: 1s; }
.is-alarm .pgp-topo__cloud .pgp-spark i:last-child { background: #f5a524; height: 9px !important; }

/* bản tin chạy ngang */
.pgp-ticker { background: #0b1f33; border-top: 1px solid #1f3b57; border-bottom: 1px solid #1f3b57; overflow: hidden; }
.pgp-ticker__track { display: flex; gap: 44px; width: max-content; padding: 13px 0; animation: pgp-mq 52s linear infinite; }
.pgp-ticker__track span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 12.5px; color: #c9d6e3; }
.pgp-ticker__track b { font-weight: 500; color: #5cc2f2; }
.pgp-ticker__track em { font-style: normal; color: #47637f; }

/* kiến trúc 4 lớp */
.pgp-arch { background: #ffffff; }
.pgp-arch .pgp-stack { gap: 32px; }
.pgp-arch__body { position: relative; }
.pgp-arch__track { position: absolute; left: calc(50% / var(--pgp-n, 4)); right: calc(50% / var(--pgp-n, 4)); top: 21px; height: 2px; background: var(--pgp-line); }
.pgp-arch__fill { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--pgp-accent); transition: width .6s ease; }
.pgp-arch__track .pgp-pk { animation-duration: 3.6s; }
.pgp-arch__grid { position: relative; display: grid; grid-template-columns: repeat(var(--pgp-n, 4), minmax(0, 1fr)); gap: 16px; }
.pgp-arch__col { display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; }
.pgp .pgp-arch__dot { width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0; border-radius: 50%; border: 2px solid var(--pgp-accent); background: #ffffff; color: var(--pgp-accent); font-family: var(--pgp-head); font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .3s ease, color .3s ease; }
.pgp .is-active .pgp-arch__dot { background: var(--pgp-accent); color: #ffffff; animation: pgp-ring 2.4s ease-out infinite; }
.pgp-arch__card { width: 100%; flex: 1 1 auto; background: var(--pgp-ground); border: 1px solid var(--pgp-line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease; }
.pgp-arch__card.is-dark { background: var(--pgp-navy); border-color: var(--pgp-navy); }
.is-active .pgp-arch__card { border-color: var(--pgp-accent); box-shadow: 0 18px 36px -18px rgba(14,114,199,.55); transform: translateY(-4px); }
.is-active .pgp-arch__card.is-dark { border-color: var(--pgp-cyan); }
.pgp .pgp-arch__title { margin: 0; font-family: var(--pgp-head); font-size: 20px; font-weight: 600; color: var(--pgp-navy); }
.pgp .is-dark .pgp-arch__title { color: #ffffff; }
.pgp-arch__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pgp-arch__tags em { font-style: normal; font-size: 11.5px; color: var(--pgp-text); padding: 2px 8px; border-radius: 6px; background: #ffffff; border: 1px solid var(--pgp-line); }
.pgp a.pgp-arch__link { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; font-weight: 600; font-size: 14px; color: var(--pgp-cyan); }
.pgp a.pgp-arch__link:hover { color: #86d3f6; }
.pgp .pgp-arch__cap { margin: 0; display: flex; align-items: center; gap: 14px; min-height: 52px; border-radius: 12px; background: var(--pgp-ground); padding: 10px 18px; }
.pgp-arch__num { font-size: 13px; font-weight: 600; color: var(--pgp-accent); }
.pgp-arch__text { font-size: 16px; color: var(--pgp-ink); }
.pgp-arch__text.is-swap { animation: pgp-swap .4s ease both; }

/* hình động nhỏ trong thẻ */
.pgp-mini { height: 96px; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; gap: 6px; background: #ffffff; border: 1px solid var(--pgp-line); overflow: hidden; }
.pgp-mini--dark { background: #0b1f33; border-color: #0b1f33; }
.is-dark .pgp-mini--dark { background: #071526; border-color: #071526; }
.pgp-mini--rows span { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--pgp-text); }
.pgp-mini--rows em { font-style: normal; flex: 1 1 auto; }
.pgp-mini--rows b { color: var(--pgp-navy); font-weight: 600; }
.pgp-mini--gw { justify-content: space-between; padding: 12px; }
.pgp-mini__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pgp-mini--gw .pgp-mini__top b { font-size: 14px; color: #ffffff; }
.pgp-mini--gw .pgp-wire { margin: 0 4px; }
.pgp-mini__proto { display: flex; justify-content: space-between; font-size: 11px; color: #9fb3c8; }
.pgp-mini__proto em { font-style: normal; }
.pgp-mini__proto .is-on { color: var(--pgp-cyan); }
.pgp-mini--dash { justify-content: flex-start; }
.pgp-mini--dash em { font-style: normal; font-size: 11.5px; color: var(--pgp-muted); }
.pgp-mini--dash b { font-size: 12px; font-weight: 600; color: var(--pgp-navy); }
.pgp-spark--dash { flex: 1 1 auto; height: auto; gap: 4px; }
.pgp-spark--dash i { background: #9fc8ea; }
.pgp-spark--dash i:last-child { background: var(--pgp-accent); }
.pgp-mini--chat { gap: 8px; }
.pgp-bub { align-self: flex-start; background: #11293f; border: 1px solid #1f3b57; border-radius: 10px 10px 10px 3px; padding: 4px 10px; font-size: 12px; line-height: 1.5; color: #c9d6e3; }
.pgp-bub--me { align-self: flex-end; background: #1b3a57; border-color: #1b3a57; border-radius: 10px 10px 3px 10px; color: #ffffff; }
.pgp-bub .pgp-caret { width: 6px; height: 12px; }
.pgp-mini--cols { flex-direction: row; align-items: flex-end; justify-content: stretch; gap: 4px; padding: 12px; }
.pgp-mini--cols i { display: block; flex: 1 1 0; border-radius: 2px; background: #1f5f8a; }
.pgp-mini--cols i.is-alert { background: #f5a524; animation: pgp-flash 1.4s ease-in-out infinite; }
.pgp-mini--cols i.is-now { background: var(--pgp-cyan); }
.pgp-mini--cols i.is-fc { background: transparent; border: 1px dashed var(--pgp-cyan); animation: pgp-fc 2.6s ease-in-out infinite; }
.pgp-mini--doc { gap: 9px; padding: 14px; }
.pgp-mini--doc span { display: block; height: 6px; border-radius: 3px; background: #1f3b57; overflow: hidden; }
.pgp-mini--doc i { display: block; height: 100%; width: 100%; border-radius: 3px; background: var(--pgp-cyan); animation: pgp-fill 3.2s ease-in-out infinite; }
.pgp-mini--doc span:nth-child(2) i { animation-delay: .4s; } .pgp-mini--doc span:nth-child(3) i { animation-delay: .8s; } .pgp-mini--doc span:nth-child(4) i { animation-delay: 1.2s; }

/* chọn lĩnh vực */
.pgp-sec { scroll-margin-top: 70px; }
.admin-bar .pgp-sec { scroll-margin-top: 102px; }
.pgp-sec .pgp-stack { gap: 24px; }
.pgp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(155px, 100%), 1fr)); gap: 10px; }
.pgp .pgp-tile { position: relative; overflow: hidden; min-height: 112px; margin: 0; padding: 16px; border-radius: 14px; border: 1px solid var(--pgp-line); background: #ffffff; color: var(--pgp-ink); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; text-align: left; font-family: inherit; font-size: inherit; line-height: 1.3; letter-spacing: 0; text-transform: none; box-shadow: none; cursor: pointer; transition: border-color .2s ease, transform .2s ease, background-color .2s ease; }
.pgp .pgp-tile:hover { border-color: var(--pgp-accent); transform: translateY(-2px); }
.pgp .pgp-tile .pgp-ico { color: var(--pgp-accent); }
.pgp .pgp-tile.is-active { background: var(--pgp-navy); border-color: var(--pgp-navy); color: #ffffff; }
.pgp .pgp-tile.is-active .pgp-ico { color: var(--pgp-cyan); }
.pgp-tile__txt { display: flex; flex-direction: column; gap: 2px; }
.pgp-tile__txt b { font-size: 15.5px; font-weight: 600; }
.pgp-tile__txt small { font-size: 12.5px; color: var(--pgp-muted); }
.pgp-tile.is-active .pgp-tile__txt small { color: #9fb3c8; }
.pgp-tile__prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--pgp-cyan); }
.pgp-tile.is-active .pgp-tile__prog { width: 100%; }
.pgp-tile.is-active.is-run .pgp-tile__prog { animation: pgp-prog 5s linear both; }
.pgp-panel { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 120px; }
.pgp-panel[hidden] { display: none; }
.pgp-panel.is-in { animation: pgp-fadein .45s ease both; }
.pgp-panel__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pgp .pgp-panel__name { margin: 0; font-family: var(--pgp-head); font-size: 20px; font-weight: 700; color: var(--pgp-navy); }
.pgp-js .pgp-panel__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pgp .pgp-panel__line { margin: 0; flex: 1 1 320px; font-size: 16px; color: var(--pgp-text); }
.pgp-sols { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.pgp a.pgp-sol { min-width: 0; background: #ffffff; border: 1px solid var(--pgp-line); border-radius: 14px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; color: var(--pgp-ink); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; scroll-margin-top: 120px; }
.pgp a.pgp-sol:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(11,31,51,.28); border-color: var(--pgp-accent); color: var(--pgp-ink); }
.pgp a.pgp-sol > .pgp-ico { color: var(--pgp-accent); flex: none; }
.pgp a.pgp-sol:target { outline: 3px solid var(--pgp-cyan); outline-offset: 2px; }
.pgp-sol__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pgp-sol__name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--pgp-navy); }
.pgp-sol__soon { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--pgp-muted); background: #eef1f4; border-radius: 999px; padding: 1px 8px; }
.pgp-sol__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pgp-sol__chips em { font-style: normal; display: inline-flex; align-items: center; min-height: 24px; padding: 1px 9px; border-radius: 999px; background: var(--pgp-chip); color: #2c3e50; font-size: 12px; font-weight: 500; }

/* hộp liên hệ cuối trang */
.pgp-cta.pgp-dots { background-color: var(--pgp-navy); }
.pgp--ai .pgp-cta.pgp-dots { background-color: #071526; }

/* trang AI: màn hình AI Agent */
.pgp-con { margin: 0; min-width: 0; background: #0b1f33; border: 1px solid #1f3b57; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.pgp-con__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #1f3b57; font-size: 11.5px; color: #9fb3c8; }
.pgp-con__bar > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.pgp-con__body { padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; height: 500px; overflow: hidden; }
.pgp-con [hidden] { display: none !important; }
.pgp-con .is-pop { animation: pgp-pop .35s ease both; }
.pgp-con__q { align-self: flex-end; max-width: 86%; background: #1b3a57; border-radius: 14px 14px 4px 14px; padding: 10px 14px; font-size: 14.5px; line-height: 1.5; color: #ffffff; }
.pgp-con .pgp-caret { display: none; }
.pgp-con .is-typing .pgp-caret { display: inline-block; }
.pgp-con__tool { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.5; color: #c9d6e3; background: #071526; border: 1px solid #1f3b57; border-radius: 10px; padding: 8px 10px; }
.pgp-con__tool > .pgp-ico { margin-top: 3px; flex: none; }
.pgp-con__tool > span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.pgp-con__tool b { font-weight: 500; color: var(--pgp-cyan); }
.pgp-con__res { font-size: 12px; color: #9fb3c8; }
.pgp-con__spin { display: none; width: 12px; height: 12px; margin-top: 3px; flex: none; border-radius: 50%; border: 2px solid #1f3b57; border-top-color: var(--pgp-cyan); animation: pgp-spin .8s linear infinite; }
.pgp-con__tool.is-run .pgp-con__spin { display: inline-block; }
.pgp-con__tool.is-run > .pgp-ico, .pgp-con__tool.is-run .pgp-con__res { display: none; }
.pgp-con__a { display: flex; flex-direction: column; gap: 10px; background: #11293f; border: 1px solid #1f3b57; border-radius: 14px 14px 14px 4px; padding: 12px 14px; }
.pgp .pgp-con__a p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #ffffff; }
.pgp-con__chart { display: flex; flex-direction: column; gap: 6px; }
.pgp-con__bars { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 70px; padding-top: 6px; }
.pgp-con__bars i { flex: 1 1 0; border-radius: 2px; background: var(--pgp-cyan); transform-origin: bottom; }
.pgp-con__bars i.is-low { background: #f5a524; }
.pgp-con__chart.is-pop i { animation: pgp-grow .6s ease both; }
.pgp-con__ref { position: absolute; left: 0; right: 0; top: 18px; border-top: 1px dashed #9fb3c8; }
.pgp-con__chart small { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 10.5px; color: #9fb3c8; }
.pgp-con__src { font-size: 12px; color: #9fb3c8; }
.pgp-con__act { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; border: 1px dashed #f5a524; border-radius: 12px; padding: 10px 12px; }
.pgp-con__act > span:first-child { font-size: 13.5px; color: #ffe3b0; }
.pgp-con__btns { display: flex; gap: 8px; }
.pgp .pgp-con__btns button { min-height: 36px; margin: 0; padding: 0 14px; border-radius: 8px; font-family: var(--pgp-head); font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; box-shadow: none; cursor: pointer; }
.pgp .pgp-con__yes { background: #f5a524; color: #0b1f33; border: 0; }
.pgp .pgp-con__no { background: transparent; color: #ffffff; border: 1px solid #47637f; }
.pgp-con__ok { font-size: 12px; color: #3ddc97; }
.pgp-con__foot { border-top: 1px solid #1f3b57; padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: #9fb3c8; }
.pgp-con__foot span { border: 1px solid #1f3b57; border-radius: 6px; padding: 3px 8px; }

/* trang AI: dải MCP */
.pgp-mcp { background: #0b1f33; color: #ffffff; border-top: 1px solid #1f3b57; border-bottom: 1px solid #1f3b57; }
.pgp-mcp__in { padding-top: 36px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 22px; }
.pgp-mcp__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.pgp-mcp__head > div { display: flex; flex-direction: column; gap: 6px; }
.pgp .pgp-mcp__title { margin: 0; font-family: var(--pgp-head); font-size: 26px; line-height: 1.25; font-weight: 700; color: #ffffff; }
.pgp .pgp-mcp__head > p { margin: 0; font-size: 15px; color: #c9d6e3; }
.pgp-mcp__row { display: flex; align-items: center; }
.pgp-mcp__list { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pgp-mcp__list small { font-size: 11px; letter-spacing: .08em; color: #9fb3c8; }
.pgp-mcp__list span { background: #11293f; border: 1px solid #1f3b57; border-radius: 10px; padding: 10px 14px; font-size: 14.5px; font-weight: 600; color: #ffffff; }
.pgp-mcp__wire { flex: 0 0 64px; height: 2px; }
.pgp-mcp__hub { flex: 0 0 auto; width: 124px; height: 124px; border-radius: 50%; border: 2px solid var(--pgp-cyan); background: #0e2a44; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.pgp-mcp__hub b { font-size: 20px; font-weight: 600; color: var(--pgp-cyan); }
.pgp-mcp__hub small { max-width: 96px; font-size: 11.5px; line-height: 1.35; color: #c9d6e3; }
.pgp a.pgp-mcp__link { align-self: flex-start; display: inline-flex; align-items: center; min-height: 40px; font-size: 14px; font-weight: 600; color: var(--pgp-cyan); }
.pgp a.pgp-mcp__link:hover { color: #86d3f6; }

/* trang AI: bốn việc, nguyên tắc */
.pgp-tasks { background: #ffffff; }
.pgp-tasks .pgp-stack, .pgp-rules2 .pgp-stack { gap: 28px; }
.pgp-tasks__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 16px; }
.pgp-task { background: var(--pgp-ground); border: 1px solid var(--pgp-line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 14px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.pgp-task:hover { transform: translateY(-3px); border-color: var(--pgp-accent); box-shadow: 0 14px 30px -14px rgba(11,31,51,.28); }
.pgp-task .pgp-mini { height: 92px; }
.pgp .pgp-task h3, .pgp .pgp-rule2 h3 { margin: 0; font-family: var(--pgp-head); font-size: 20px; font-weight: 600; color: var(--pgp-navy); }
.pgp .pgp-task p, .pgp .pgp-rule2 p { margin: 0; font-size: 15px; color: var(--pgp-text); }
.pgp-rules2__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.pgp-rule2 { background: #ffffff; border: 1px solid var(--pgp-line); border-top: 3px solid #f5a524; border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.pgp-rule2:nth-child(2) { border-top-color: var(--pgp-accent); }
.pgp-rule2:nth-child(3) { border-top-color: #22a06b; }
.pgp .pgp-rules2__links { margin: 0; font-size: 14.5px; color: var(--pgp-text); }
.pgp .pgp-rules2__links a { color: var(--pgp-accent); text-decoration: underline; text-underline-offset: 2px; }

@keyframes pgp-led { 0% { box-shadow: 0 0 0 0 rgba(61,220,151,.55); } 70% { box-shadow: 0 0 0 7px rgba(61,220,151,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,151,0); } }
@keyframes pgp-ledw { 0% { box-shadow: 0 0 0 0 rgba(245,165,36,.7); } 70% { box-shadow: 0 0 0 8px rgba(245,165,36,0); } 100% { box-shadow: 0 0 0 0 rgba(245,165,36,0); } }
@keyframes pgp-pkx { 0% { left: -4px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 4px); opacity: 0; } }
@keyframes pgp-pkxr { 0% { left: calc(100% - 4px); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: -4px; opacity: 0; } }
@keyframes pgp-pky { 0% { top: -4px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: calc(100% - 4px); opacity: 0; } }
@keyframes pgp-pkyr { 0% { top: calc(100% - 4px); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: -4px; opacity: 0; } }
@keyframes pgp-sig { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes pgp-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pgp-ring { 0% { box-shadow: 0 0 0 0 rgba(92,194,242,.45); } 80% { box-shadow: 0 0 0 14px rgba(92,194,242,0); } 100% { box-shadow: 0 0 0 0 rgba(92,194,242,0); } }
@keyframes pgp-caret { 50% { opacity: 0; } }
@keyframes pgp-spin { to { transform: rotate(360deg); } }
@keyframes pgp-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pgp-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pgp-flash { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes pgp-fill { 0% { width: 0; } 55%, 100% { width: 100%; } }
@keyframes pgp-fc { 0%, 100% { opacity: .25; } 50% { opacity: .7; } }
@keyframes pgp-prog { from { width: 0; } to { width: 100%; } }
@keyframes pgp-fadein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pgp-swap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (min-width: 1024px) {
	.pgp-live__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr); gap: 40px; }
	.pgp-live--ai .pgp-live__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; }
	.pgp--iot .pgp-live__title { font-size: clamp(34px, 3.4vw, 48px); }
}
@media (max-width: 1023px) {
	.pgp-arch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pgp-arch__track { display: none; }
}
@media (max-width: 760px) {
	.pgp-topo__row { flex-direction: column; height: auto !important; gap: 10px; }
	.pgp-topo__wires { display: none; }
	.pgp-topo__nodes, .pgp-topo__col, .pgp-topo__col--cloud { flex: 0 0 auto; width: 100%; }
	.pgp-arch__grid { grid-template-columns: minmax(0, 1fr); }
	.pgp-mcp__row { flex-direction: column; align-items: stretch; gap: 12px; }
	.pgp-mcp__wire { display: none; }
	.pgp-mcp__hub { align-self: center; }
	.pgp-con__body { height: 520px; }
	.pgp .pgp-tile { min-height: 92px; padding: 14px; }
	.pgp--iot .pgp-section, .pgp--ai .pgp-section { padding: 52px 0 44px; }
}
@media (prefers-reduced-motion: reduce) {
	.pgp--iot *, .pgp--ai * { animation: none !important; transition: none !important; }
	.pgp--iot .pgp-pk, .pgp--ai .pgp-pk { display: none; }
}

/* =========================================================================
 * 1.5.0 — Trang chủ: một hero, chuỗi 4 bước AIoT [proto_trang_chu]
 * ====================================================================== */
.pgp--home { background: #071526; }
.pgp--home .pgp-wrap { max-width: 1080px; padding-left: 15px; padding-right: 15px; }
.pgp-home { background-color: #071526; color: #ffffff; min-height: calc(100vh - 90px); display: flex; align-items: center; }
.admin-bar .pgp-home { min-height: calc(100vh - 122px); }
.pgp-home__in { width: 100%; padding-top: 56px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 44px; }
.pgp-home__text { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; max-width: 820px; margin: 0 auto; }
.pgp .pgp-home__title { margin: 0; font-family: var(--pgp-head); font-weight: 700; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.08; letter-spacing: -.015em; color: #ffffff; }
.pgp .pgp-home__lead { margin: 0; max-width: 640px; font-size: 18px; line-height: 1.6; color: var(--pgp-soft); }
.pgp-home__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 14px; margin-top: 4px; }
.pgp a.pgp-home__link { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 8px; font-weight: 600; font-size: 16px; color: var(--pgp-cyan); }
.pgp a.pgp-home__link:hover { color: #86d3f6; }

.pgp-chain { display: flex; flex-direction: column; gap: 16px; }
.pgp-chain__grid { position: relative; display: grid; grid-template-columns: repeat(var(--pgp-n, 4), minmax(0, 1fr)); gap: 28px; }
.pgp-chain__track { position: absolute; left: 4%; right: 4%; top: 50%; height: 2px; background: #1f3b57; z-index: 0; }
.pgp-chain__track .pgp-pk { animation-duration: 4.2s; }
.pgp-chain__track .pgp-pk--slowcmd { animation-name: pgp-pkxr; animation-duration: 6s; animation-delay: -2s; }
.pgp-chain__st { position: relative; z-index: 1; min-width: 0; background: #0b1f33; border: 1px solid #1f3b57; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px; transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease; }
.pgp-chain__st.is-active { border-color: var(--pgp-cyan); box-shadow: 0 0 0 1px rgba(92,194,242,.25), 0 18px 40px -18px rgba(92,194,242,.45); transform: translateY(-4px); }
.pgp-chain__head { display: flex; align-items: center; gap: 10px; }
.pgp-chain__head b { font-size: 15.5px; font-weight: 600; line-height: 1.3; color: #ffffff; }
.pgp .pgp-chain__num { flex: none; width: 32px; height: 32px; min-height: 0; margin: 0; padding: 0; border-radius: 50%; border: 1.5px solid #47637f; background: transparent; color: #9fb3c8; font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.pgp .is-active .pgp-chain__num { border-color: var(--pgp-cyan); background: var(--pgp-cyan); color: #0b1f33; }
.pgp-chain__tag { font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: #9fb3c8; }
.pgp .pgp-chain__cap { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; min-height: 44px; text-align: center; }
.pgp-chain__n { font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 13px; font-weight: 600; color: var(--pgp-cyan); }
.pgp-chain__text { font-size: 16px; color: #e6eef6; }
.pgp-chain__text.is-swap { animation: pgp-swap .4s ease both; }
.pgp-chain__note { font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; color: #6b829a; border: 1px solid #1f3b57; border-radius: 6px; padding: 1px 6px; }

.pgp-st { height: 140px; border-radius: 10px; background: #071526; border: 1px solid #13304b; padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.pgp-st--field { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pgp-st__sensor { min-width: 0; background: #0b1f33; border: 1px solid #1f3b57; border-radius: 8px; padding: 4px 8px; display: flex; flex-direction: column; gap: 0; }
.pgp-st__top { display: flex; justify-content: space-between; align-items: center; color: var(--pgp-cyan); }
.pgp-st__top .pgp-led { width: 6px; height: 6px; }
.pgp-st__sensor small { font-size: 10.5px; line-height: 1.3; color: #9fb3c8; }
.pgp-st__sensor b { font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 12px; font-weight: 600; line-height: 1.3; color: #ffffff; white-space: nowrap; }
.pgp-st--gw { justify-content: space-between; }
.pgp-st__dev { border: 1px solid var(--pgp-cyan); background: #0e2a44; border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; }
.pgp-st__devtop { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pgp-st__devtop b { font-size: 14px; font-weight: 700; color: #ffffff; }
.pgp-st__ports { display: flex; flex-wrap: wrap; gap: 4px 10px; font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; color: #9fb3c8; }
.pgp-st__ports span { display: inline-flex; align-items: center; gap: 4px; }
.pgp-st__ports .pgp-led { width: 7px; height: 7px; }
.pgp-st__blink { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #f5a524; animation: pgp-blink .5s steps(1) infinite; }
.pgp-st__blink--b { background: #3ddc97; animation-delay: .25s; }
.pgp-st__payload { font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--pgp-cyan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgp-st__row { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.pgp-st__row small { font-size: 11px; color: #9fb3c8; }
.pgp-chain__alert { white-space: nowrap; font-size: 10.5px; font-weight: 600; color: #0b1f33; background: #f5a524; border-radius: 999px; padding: 1px 8px; opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .3s ease; }
.pgp-chain__alert.is-on { opacity: 1; transform: none; }
.pgp-st__chart { position: relative; flex: 1 1 auto; display: flex; align-items: flex-end; }
.pgp-st__thr { position: absolute; left: 0; right: 0; bottom: 26px; border-top: 1px dashed #f5a524; opacity: .7; }
.pgp-spark--chain { width: 100%; height: 100%; gap: 4px; }
.pgp-st--ai { justify-content: center; gap: 7px; }
.pgp-st--ai .pgp-bub { font-size: 11.5px; }
.pgp-st__ask { align-self: flex-start; font-size: 10.5px; font-weight: 600; color: #ffe3b0; border: 1px dashed #f5a524; border-radius: 6px; padding: 1px 7px; }
.pgp-chain__st.is-ai .pgp-caret { display: none; }
.pgp-chain__st.is-ai.is-typing .pgp-caret { display: inline-block; }

.pgp-partners { background: #ffffff; border-top: 1px solid var(--pgp-line); }
.pgp-partners__in { padding-top: 40px; padding-bottom: 44px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.pgp-partners__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 40px; }
.pgp-partner img { display: block; height: 40px; width: auto; filter: grayscale(1); opacity: .7; transition: filter .2s ease, opacity .2s ease; }
.pgp a.pgp-partner:hover img { filter: none; opacity: 1; }
.pgp-partner span { font-weight: 600; color: var(--pgp-muted); }

@keyframes pgp-blink { 50% { opacity: .15; } }
@media (max-width: 1023px) {
	.pgp-chain__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.pgp-chain__track { display: none; }
	.pgp-home { min-height: 0; }
}
@media (max-width: 600px) {
	.pgp-chain__grid { grid-template-columns: minmax(0, 1fr); }
	.pgp-home__in { padding-top: 40px; padding-bottom: 40px; gap: 32px; }
	.pgp .pgp-home__lead { font-size: 16.5px; }
	.pgp .pgp-chain__cap { justify-content: flex-start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
	.pgp--home *, .pgp--home *::after { animation: none !important; transition: none !important; }
	.pgp--home .pgp-pk { display: none; }
}

/* =========================================================================
 * 1.6.0 — Trang chủ kiểu cảnh: một tấm bệ isometric với 4 hiện trường,
 * gateway, Proto IoT Cloud và AI Agent (assets/home-scene.svg).
 * ====================================================================== */
.pgp-hs { position: relative; overflow: hidden; background-color: #071526; color: #ffffff; min-height: calc(100vh - var(--pgp-hdr, 63px)); display: flex; align-items: center; }
.admin-bar .pgp-hs { min-height: calc(100vh - var(--pgp-hdr, 63px) - 32px); }
.admin-bar .sc-svg { max-height: max(380px, calc(100vh - 282px)); }
.pgp-hs::before { content: ""; position: absolute; right: -10%; top: 50%; width: 900px; height: 900px; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(22,118,184,.28), rgba(22,118,184,0)); pointer-events: none; }
.pgp-hs__in { position: relative; width: 100%; padding-top: 40px; padding-bottom: 36px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 12px 28px; }
.pgp-hs__text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.pgp .pgp-hs__title { margin: 0; font-family: var(--pgp-head); font-weight: 700; font-size: clamp(36px, 4.2vw, 54px); line-height: 1.07; letter-spacing: -.02em; color: #ffffff; }
.pgp-hs__title em { font-style: normal; color: var(--pgp-cyan); }
.pgp .pgp-hs__lead { margin: 0; max-width: 430px; font-size: 17.5px; line-height: 1.6; color: var(--pgp-soft); }
.pgp-hs__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 4px; }
.pgp-hs__fig { position: relative; z-index: 1; min-width: 0; margin: 0 calc(-1 * clamp(0px, (100vw - 1080px) / 2 - 24px, 150px)) 0 -24px; display: flex; flex-direction: column; gap: 6px; }
.pgp-hs__foot { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pgp-hs__steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pgp .pgp-hs__step { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; padding: 0 14px 0 8px; border: 1px solid #1f3b57; border-radius: 999px; background: rgba(11,31,51,.85); color: #c9d6e3; font-family: var(--pgp-head); font-size: 13.5px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; box-shadow: none; cursor: pointer; transition: border-color .3s ease, color .3s ease; }
.pgp .pgp-hs__step:hover { border-color: #47637f; color: #ffffff; }
.pgp .pgp-hs__step.is-on { border-color: var(--pgp-cyan); color: #ffffff; }
.pgp-hs__sn { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--pgp-cyan); color: var(--pgp-cyan); font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; transition: background-color .3s ease, color .3s ease; }
.pgp-hs__step.is-on .pgp-hs__sn { background: var(--pgp-cyan); color: #0b1f33; }
.pgp-hs__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--pgp-cyan); }
.pgp-hs__step.is-on .pgp-hs__bar { animation: pgp-hs-bar var(--pgp-dur, 2.8s) linear both; }
.pgp-scene.is-hold .pgp-hs__bar { animation: none; width: 100%; }
.pgp-scene.is-paused .pgp-hs__bar { animation-play-state: paused; }
@keyframes pgp-hs-bar { from { width: 0; } to { width: 100%; } }
.pgp-hs__cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; min-height: 26px; text-align: center; }
.pgp-hs__t { font-size: 15px; color: #e6eef6; }
.pgp-hs__t.is-swap { animation: pgp-swap .4s ease both; }

/* --- cảnh SVG --- */
.sc-svg { display: block; width: 100%; height: auto; max-height: max(380px, calc(100vh - 250px)); overflow: visible; font-family: var(--pgp-head), "Space Grotesk", system-ui, sans-serif; }
.sc-svg text { font-size: 11.5px; }
.sc-svg .m { font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; }
.sc-svg path, .sc-svg rect, .sc-svg circle, .sc-svg ellipse { vector-effect: none; }
.sl-t { fill: url(#sc-top); }
.sl-l { fill: url(#sc-sideL); stroke: #1f4a6e; stroke-width: 1; }
.sl-r { fill: url(#sc-sideR); stroke: #1f4a6e; stroke-width: 1; }
.sl-grid { fill: none; stroke: #5cc2f2; stroke-opacity: .07; stroke-width: 1; }
.sl-edge { fill: none; stroke: #5cc2f2; stroke-opacity: .6; stroke-width: 1.3; }
.sl-edge2 { fill: none; stroke: #5cc2f2; stroke-opacity: .2; stroke-width: 1; }
.sl-ticks { fill: none; stroke: #5cc2f2; stroke-opacity: .35; stroke-width: 1; }
.sl-plot { fill: #5cc2f2; fill-opacity: .03; stroke: #5cc2f2; stroke-opacity: .2; stroke-width: 1; stroke-dasharray: 3 4; }

.sc-box .f-t, .sc-box .f-l, .sc-box .f-r, .sc-cyl .f-c, .sc-cyl .f-t, .saw .f-t, .saw .f-l, .tank-roof { stroke: #3f86b8; stroke-opacity: .6; stroke-width: 1; stroke-linejoin: round; transition: stroke .5s ease, stroke-opacity .5s ease; }
.f-t { fill: #15395a; }
.f-l { fill: #0f2a45; }
.f-r { fill: #0a1f35; }
.f-c { fill: url(#sc-cyl); }
.roof-f { fill: #11304d; }
.glass { fill: #5cc2f2; fill-opacity: .3; stroke: #5cc2f2; stroke-opacity: .65; stroke-width: 1; }
.win { fill: #5cc2f2; fill-opacity: .55; }
.win-r { fill-opacity: .35; }
.door { fill: #08182a; stroke: #3f86b8; stroke-opacity: .6; stroke-width: 1; }
.door-l { fill: none; stroke: #3f86b8; stroke-opacity: .5; stroke-width: 1; }
.chim-band { fill: none; stroke: #5cc2f2; stroke-opacity: .55; stroke-width: 2.2; }
.smoke circle { fill: #9fb3c8; opacity: 0; filter: url(#sc-blur); animation: sc-smoke 5s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.smoke circle:nth-child(2) { animation-delay: -1.5s; }
.smoke circle:nth-child(3) { animation-delay: -3s; }

.pv-panel { fill: url(#sc-panel); stroke: #5cc2f2; stroke-opacity: .55; stroke-width: 1; stroke-linejoin: round; }
.pv-cell { fill: none; stroke: #5cc2f2; stroke-opacity: .25; stroke-width: 1; }
.pv-sheen { fill: url(#sc-sheen); pointer-events: none; }
.pv-leg { fill: none; stroke: #3f86b8; stroke-opacity: .75; stroke-width: 1.2; }

.tw-leg { fill: none; stroke: #4f8fbf; stroke-opacity: .8; stroke-width: 1.3; }
.tank-lvl { fill: none; stroke: #5cc2f2; stroke-opacity: .7; stroke-width: 1; stroke-dasharray: 2 3; }
.pipe { fill: none; stroke: #15405f; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.pipe-flow { fill: none; stroke: #5cc2f2; stroke-opacity: .85; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 3 7; animation: sc-flow 1s linear infinite; }

.clar .rim { fill: #1a4467; stroke: #5cc2f2; stroke-opacity: .55; stroke-width: 1; }
.water { fill: url(#sc-water); }
.ripple { fill: none; stroke: #8fd6f8; stroke-opacity: .28; stroke-width: 1; }
.bridge { fill: #c9d6e3; fill-opacity: .85; }
.bridge-t { fill: #5cc2f2; }
.col .f-t { fill: #c9d6e3; stroke: none; }
.col .f-c { stroke: none; }
.basin-rim { fill: #15395a; stroke: #3f86b8; stroke-opacity: .6; stroke-width: 1; }
.bubbles circle { fill: #bfe8ff; opacity: 0; animation: sc-bub 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }

.gw-pad .f-t { fill: #0d2a45; stroke: #5cc2f2; stroke-opacity: .7; }
.gw-ring { fill: #5cc2f2; fill-opacity: .06; stroke: #5cc2f2; stroke-opacity: .35; stroke-width: 1; }
.gw-ring2 { fill: none; stroke: #5cc2f2; stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: sc-hub 3s ease-out infinite; }
.gw-port { fill: #071526; stroke: #5cc2f2; stroke-opacity: .6; stroke-width: .8; }
.gw-box .f-t { fill: #1a4467; }
.gw-box .f-l { fill: #133555; }
.gw-box .f-r { fill: #0d2741; }
.gw-vent { fill: none; stroke: #5cc2f2; stroke-opacity: .35; stroke-width: 1; }
.gw-ant { fill: none; stroke: #c9d6e3; stroke-width: 1.6; stroke-linecap: round; }
.gw-tip { fill: #5cc2f2; }
.gw-waves circle { fill: none; stroke: #5cc2f2; stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.led-g { fill: #3ddc97; }
.led-tx { fill: #f5a524; animation: sc-blink .6s steps(1) infinite; }
.led-rx { fill: #3ddc97; animation: sc-blink .6s steps(1) infinite .3s; }

.tr { fill: none; stroke: #5cc2f2; stroke-opacity: .32; stroke-width: 1.3; stroke-linejoin: round; transition: stroke-opacity .5s ease; }
.tr-via { fill: #0a1e31; stroke: #5cc2f2; stroke-opacity: .6; stroke-width: 1; }
.tr-pad { fill: #5cc2f2; fill-opacity: .8; }
.pk { fill: #8fe0ff; }
.pk-fast, .pk-up { fill: #bfeeff; filter: url(#sc-glow); visibility: hidden; }
.pk-cmd { fill: #f5a524; filter: url(#sc-glow); visibility: hidden; }

.sens .sens-dot { fill: #3ddc97; stroke: #071526; stroke-width: 1.5; }
.sens .ping { fill: none; stroke: #3ddc97; stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: sc-ping 2.6s ease-out infinite; }
.sens-solar .ping { animation-delay: -.6s; }
.sens-fac .ping { animation-delay: -1.3s; }
.sens-waste .ping { animation-delay: -1.9s; }

.beam { fill: none; stroke: url(#sc-beam); stroke-width: 1.6; stroke-dasharray: 4 5; animation: sc-flow-up .8s linear infinite; opacity: .55; transition: opacity .5s ease; }
.beam-glow { fill: #5cc2f2; opacity: 0; filter: url(#sc-soft); transition: opacity .5s ease; }

.plate .f-t { fill: #123a5e; stroke: #5cc2f2; stroke-opacity: .5; }
.plate .f-l { fill: #0d2b48; stroke: #5cc2f2; stroke-opacity: .5; }
.plate .f-r { fill: #0a2239; stroke: #5cc2f2; stroke-opacity: .5; }
.plate-2 .f-t { fill: #164571; }
.plate-edge { fill: none; stroke: #5cc2f2; stroke-width: 1.4; stroke-opacity: .7; transition: stroke-opacity .5s ease; }
.cl-col { fill: none; stroke: #5cc2f2; stroke-opacity: .4; stroke-width: 1; stroke-dasharray: 2 3; }
.plate-grid { fill: none; stroke: #5cc2f2; stroke-opacity: .13; stroke-width: 1; }
.bar .f-t { fill: #7fd0f5; stroke: none; }
.bar .f-l { fill: #3aa6de; stroke: none; }
.bar .f-r { fill: #1f6fa3; stroke: none; }
.bar { transform-box: fill-box; transform-origin: 50% 100%; }
.bar-alarm .f-t, .bar-alarm .f-l, .bar-alarm .f-r { transition: fill .4s ease; }
.cl-thr { fill: none; stroke: #f5a524; stroke-opacity: .75; stroke-width: 1.2; stroke-dasharray: 3 3; }

.sc-tag rect { fill: #0b1f33; stroke: #2b5a80; stroke-width: 1; transition: stroke .4s ease, fill .4s ease; }
.sc-tag text { fill: #e6eef6; font-size: 10.5px; font-weight: 500; }
.vt-lead { fill: none; stroke: #5cc2f2; stroke-opacity: .45; stroke-width: 1; stroke-dasharray: 2 2; }
.vt-alarm { opacity: 0; transition: opacity .4s ease; }
.vt-alarm rect { fill: #2a1d08; stroke: #f5a524; }
.vt-alarm text { fill: #f5a524; }
.vt-n { transition: opacity .4s ease; }
.cl-alert { opacity: 0; transform: translateY(4px); transition: opacity .4s ease, transform .4s ease; }
.cl-alert rect { fill: #2a1d08; stroke: #f5a524; }
.cl-alert text { fill: #ffd28a; font-size: 11px; font-weight: 600; }

.ai-link { fill: none; stroke: #5cc2f2; stroke-opacity: .5; stroke-width: 1.2; stroke-dasharray: 3 4; animation: sc-flow 1.2s linear infinite; }
.orb-halo { fill: #5cc2f2; opacity: .1; transform-box: fill-box; transform-origin: center; transition: opacity .5s ease; }
.orb-ring { fill: none; stroke: #5cc2f2; stroke-opacity: .65; stroke-width: 1.2; stroke-dasharray: 10 6; animation: sc-flow 2.4s linear infinite; }
.orb-core { fill: url(#sc-orb); }
.orb-star { fill: #ffffff; }
.ai-chat { opacity: .5; transition: opacity .5s ease; }
.ai-q rect { fill: #1d5f90; }
.ai-q text { fill: #ffffff; font-size: 11.5px; }
.ai-a rect { fill: #0b1f33; stroke: #2b5a80; stroke-width: 1; }
.ans { fill: #e6eef6; font-size: 11.5px; }
.caret { fill: #5cc2f2; opacity: 0; }
.ai-ask rect { fill: rgba(245,165,36,.1); stroke: #f5a524; stroke-width: 1; stroke-dasharray: 3 2; }
.ai-ask text { fill: #ffd28a; font-size: 10.5px; font-weight: 600; text-anchor: middle; }
.ai-ask { opacity: 0; transition: opacity .4s ease; }

.sc-float { animation: sc-float 6s ease-in-out infinite; }
.stp { cursor: pointer; outline: none; }
.stp-h { fill: #5cc2f2; opacity: 0; transition: opacity .4s ease; }
.stp-c { fill: #0b1f33; stroke: #5cc2f2; stroke-width: 1.3; transition: fill .4s ease; }
.stp-n { fill: #5cc2f2; font-size: 9.5px; font-weight: 600; transition: fill .4s ease; pointer-events: none; }
.stp:hover .stp-h, .stp:focus-visible .stp-h { opacity: .18; }
.stp.is-on .stp-h { opacity: .22; }
.stp.is-on .stp-c { fill: #5cc2f2; }
.stp.is-on .stp-n { fill: #0b1f33; }

/* --- 4 bước: 0 hiện trường, 1 biên và kết nối, 2 nền tảng dữ liệu, 3 AI Agent --- */
.pgp-scene[data-step="0"] .sc-site .f-t,
.pgp-scene[data-step="0"] .sc-site .f-l,
.pgp-scene[data-step="0"] .sc-site .f-r,
.pgp-scene[data-step="0"] .sc-site .f-c { stroke: #5cc2f2; stroke-opacity: .95; }
.pgp-scene[data-step="0"] .vt-n rect { stroke: #5cc2f2; fill: #0e2a44; }
.pgp-scene[data-step="0"] .sens .ping { animation-duration: 1.3s; }
.pgp-scene[data-step="1"] .tr { stroke-opacity: .9; }
.pgp-scene[data-step="1"] .pk-fast { visibility: visible; }
.pgp-scene[data-step="1"] .sc-gw .f-t,
.pgp-scene[data-step="1"] .sc-gw .f-l,
.pgp-scene[data-step="1"] .sc-gw .f-r { stroke: #5cc2f2; stroke-opacity: 1; }
.pgp-scene[data-step="1"] .gw-waves circle,
.pgp-scene[data-step="2"] .gw-waves circle { animation: sc-wave 1.5s ease-out infinite; }
.pgp-scene .gw-waves circle:nth-child(2) { animation-delay: .5s; }
.pgp-scene .gw-waves circle:nth-child(3) { animation-delay: 1s; }
.pgp-scene[data-step="2"] .pk-up { visibility: visible; }
.pgp-scene[data-step="2"] .beam { opacity: 1; }
.pgp-scene[data-step="2"] .beam-glow { opacity: .35; }
.pgp-scene[data-step="2"] .plate-edge { stroke-opacity: 1; filter: url(#sc-glow); }
.pgp-scene[data-step="2"] .bar { animation: sc-grow .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 70ms); }
.pgp-scene[data-step="2"] .bar-alarm .f-t, .pgp-scene[data-step="3"] .bar-alarm .f-t { fill: #ffd28a; }
.pgp-scene[data-step="2"] .bar-alarm .f-l, .pgp-scene[data-step="3"] .bar-alarm .f-l { fill: #f5a524; }
.pgp-scene[data-step="2"] .bar-alarm .f-r, .pgp-scene[data-step="3"] .bar-alarm .f-r { fill: #c47d0e; }
.pgp-scene[data-step="2"] .cl-alert, .pgp-scene[data-step="3"] .cl-alert { opacity: 1; transform: none; }
.pgp-scene[data-step="2"] .vt-pump .vt-n, .pgp-scene[data-step="3"] .vt-pump .vt-n { opacity: 0; }
.pgp-scene[data-step="2"] .vt-pump .vt-alarm, .pgp-scene[data-step="3"] .vt-pump .vt-alarm { opacity: 1; }
.pgp-scene[data-step="2"] .sens-pump .sens-dot, .pgp-scene[data-step="3"] .sens-pump .sens-dot { fill: #f5a524; }
.pgp-scene[data-step="2"] .sens-pump .ping, .pgp-scene[data-step="3"] .sens-pump .ping { stroke: #f5a524; }
.pgp-scene[data-step="3"] .ai-chat { opacity: 1; }
.pgp-scene[data-step="3"] .ai-ask { opacity: 1; }
.pgp-scene[data-step="3"] .orb-halo { opacity: .28; animation: sc-halo 1.6s ease-in-out infinite; }
.pgp-scene[data-step="3"] .pk-cmd { visibility: visible; }
.pgp-scene.is-typing .caret { opacity: 1; animation: sc-blink .8s steps(1) infinite; }
.pgp-scene:not([data-step]) .ai-chat, .pgp-scene:not([data-step]) .ai-ask { opacity: 1; }
.pgp-scene.is-paused *, .pgp-scene.is-paused *::before { animation-play-state: paused !important; }

@keyframes sc-flow { to { stroke-dashoffset: -20; } }
@keyframes sc-flow-up { to { stroke-dashoffset: 18; } }
@keyframes sc-blink { 50% { opacity: .15; } }
@keyframes sc-ping { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes sc-wave { 0% { opacity: .8; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes sc-smoke { 0% { opacity: 0; transform: translateY(0) scale(.4); } 20% { opacity: .22; } 100% { opacity: 0; transform: translate(10px, -50px) scale(2); } }
@keyframes sc-bub { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-7px); } }
@keyframes sc-grow { from { transform: scaleY(.15); } to { transform: scaleY(1); } }
@keyframes sc-halo { 50% { transform: scale(1.25); } }
@keyframes sc-hub { 0% { opacity: .7; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes sc-float { 50% { transform: translateY(-4px); } }

@media (max-width: 1023px) {
	.pgp-hs { min-height: 0; }
	.pgp-hs__in { grid-template-columns: minmax(0, 1fr); padding-top: 44px; gap: 8px; }
	.pgp-hs__text { align-items: center; text-align: center; max-width: 640px; margin: 0 auto; }
	.pgp .pgp-hs__lead { max-width: 560px; }
	.pgp-hs__cta { justify-content: center; }
	.pgp-hs__fig { margin: 0 -8px; }
	.pgp-hs::before { right: auto; left: 50%; top: 62%; transform: translate(-50%, -50%); }
}
@media (max-width: 600px) {
	.pgp-hs__in { padding-top: 36px; padding-bottom: 28px; }
	.pgp .pgp-hs__lead { font-size: 16.5px; }
	.pgp-hs__fig { margin: 0 -14px; }
	.pgp-hs__foot { padding: 0 14px; }
	.pgp-hs__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
	.pgp .pgp-hs__step { font-size: 13px; padding-right: 10px; }
	.pgp-hs__t { font-size: 14.5px; }
}