/* Portal: trang giới thiệu XAgents + đăng nhập (portal.js). Dùng chung màu của app (sáng / tối). */
body.portal-on { overflow: hidden; }
.portal { position: fixed; inset: 0; z-index: 200; overflow-y: auto; overflow-x: hidden; background: var(--bg); color: var(--ink); scroll-behavior: smooth; }
.portal a { color: var(--accent); text-decoration: none; }
.portal a:hover { text-decoration: underline; }
.portal .btn.big { padding: 11px 20px; font-size: 15px; border-radius: 10px; }

.pt-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 24px; padding: 14px max(16px, calc((100% - 1160px) / 2));
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.pt-brand { display: flex; align-items: center; gap: 8px; color: var(--ink) !important; text-decoration: none !important; }
.pt-brand b { font: 700 19px var(--display); letter-spacing: .06em; }
.pt-brand span { font: 500 13px var(--display); letter-spacing: .2em; color: var(--muted); }
.pt-nav { display: flex; gap: 22px; margin-left: auto; }
.pt-nav a { color: var(--muted); font-size: 14.5px; }
.pt-nav a:hover { color: var(--ink); text-decoration: none; }

.pt-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 400px); gap: 48px; align-items: center; padding: 64px max(16px, calc((100% - 1160px) / 2)) 72px; position: relative; }
.pt-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(700px 380px at 12% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
              radial-gradient(600px 360px at 88% 80%, color-mix(in srgb, var(--brand2) 12%, transparent), transparent 70%); }
.pt-kicker { display: inline-block; padding: 5px 12px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font: 700 12px var(--body); letter-spacing: .08em; text-transform: uppercase; }
.pt-hero h1 { font: 700 clamp(32px, 4.6vw, 52px)/1.12 var(--display); margin: 18px 0 16px; letter-spacing: -.01em; }
.pt-hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--accent), var(--brand2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pt-lead { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 60ch; margin: 0 0 26px; }
.pt-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.pt-points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 8px; color: var(--muted); font-size: 14.5px; }
.pt-points li::before { content: "✓"; color: var(--ok, #2f9e44); font-weight: 700; margin-right: 10px; }

.pt-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 24px; box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .35); }
.pt-card h2 { font: 700 21px var(--display); margin: 4px 0 6px; }
.pt-hint { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
.pt-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 10px; background: var(--bg); margin-bottom: 16px; }
.pt-tabs button { border: 0; background: none; border-radius: 7px; padding: 8px; font: 600 13.5px var(--body); color: var(--muted); cursor: pointer; }
.pt-tabs button[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.pt-form { display: grid; gap: 12px; }
.pt-form label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted); }
.pt-form input { width: 100%; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 9px; padding: 10px 12px; font: 400 15px var(--body); }
.pt-form input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 0; border-color: var(--accent); }
.pt-form .btn.big { width: 100%; margin-top: 2px; }
.pt-msg { margin: 0; font-size: 13.5px; color: var(--bad, #e03131); }
.pt-msg.ok { color: var(--ok, #2f9e44); }
.pt-msg:empty { display: none; }
.pt-alt { margin: 14px 0 0; text-align: center; font-size: 13.5px; color: var(--muted); }
.pt-pin { text-align: center; font: 700 28px var(--mono) !important; letter-spacing: .5em; padding: 12px !important; }
.pt-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pt-pad button { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 10px; padding: 12px 0; font: 600 18px var(--body); cursor: pointer; }
.pt-pad button:hover { border-color: var(--accent); }
.pt-pad button:active { background: color-mix(in srgb, var(--accent) 15%, var(--bg)); }
.pt-demo { margin-bottom: 14px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); font-size: 13px; line-height: 1.6; }
.pt-demo code { font-family: var(--mono); background: var(--bg); padding: 1px 6px; border-radius: 5px; }
.pt-token { margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.pt-token summary { cursor: pointer; }
.pt-token .row { display: flex; gap: 8px; margin-top: 8px; }
.pt-token input { flex: 1; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 8px; padding: 8px 10px; }

.pt-sec { padding: 64px max(16px, calc((100% - 1160px) / 2)); border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.pt-sec h2 { font: 700 clamp(24px, 3vw, 34px) var(--display); margin: 0 0 8px; }
.pt-sub { color: var(--muted); font-size: 16px; margin: 0 0 30px; max-width: 70ch; line-height: 1.55; }
.pt-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.pt-team article { display: flex; gap: 14px; padding: 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--pc); }
.pt-ava { width: 46px; height: 46px; border-radius: 13px; flex: none; display: grid; place-items: center; font-size: 20px; color: #fff; background: var(--pc); }
.pt-team b { font: 700 17px var(--display); }
.pt-dept { margin-left: 8px; font-size: 12.5px; color: var(--muted); }
.pt-team p { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.pt-flow { list-style: none; padding: 0; margin: 0 0 32px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.pt-flow li { position: relative; padding: 14px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 10px; }
.pt-flow li span { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--pc); color: #fff; font-size: 12px; }
.pt-flow li:not(:last-child)::after { content: "→"; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; z-index: 1; }
.pt-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pt-grid3 > div { padding: 20px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.pt-grid3 h3 { margin: 0 0 6px; font: 700 17px var(--display); }
.pt-grid3 p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 14.5px; }
.pt-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pt-plan { padding: 22px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.pt-plan.hot { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.pt-plan b { font: 700 20px var(--display); }
.pt-plan p { color: var(--muted); line-height: 1.55; margin: 8px 0 0; font-size: 14.5px; }
.pt-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 28px max(16px, calc((100% - 1160px) / 2)) 40px; color: var(--muted); font-size: 13.5px; border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  .pt-hero { grid-template-columns: 1fr; gap: 32px; padding-top: 36px; }
  .pt-card { order: -1; }
  .pt-nav { display: none; }
  .pt-top .btn { margin-left: auto; }
  .pt-flow, .pt-grid3, .pt-plans { grid-template-columns: 1fr 1fr; }
  .pt-flow li::after { display: none; }
}
@media (max-width: 560px) { .pt-flow, .pt-grid3, .pt-plans { grid-template-columns: 1fr; } .pt-team { grid-template-columns: 1fr; } .pt-hero h1 { font-size: 30px; } }
.portal .btn { height: auto; display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; }

/* ---------- Portal bản đầy đủ: ảnh sản phẩm thật, nỗi đau, máy tính chi phí, phòng ban, lịch 24/7, so sánh */
.pt-num { display: inline-block; font: 700 12px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.pt-alt-bg { background: color-mix(in srgb, var(--panel) 55%, var(--bg)); }
.pt-frame { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .45); }
.pt-frame img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.pt-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: color-mix(in srgb, var(--line) 45%, var(--panel)); font-size: 12px; color: var(--muted); }
.pt-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff6b6b; }
.pt-bar i:nth-child(2) { background: #fcc419; }
.pt-bar i:nth-child(3) { background: #51cf66; }
.pt-bar span { margin-left: 10px; }
.pt-showcase { position: relative; width: min(1100px, calc(100% - 32px)); margin: -24px auto 24px; }
.pt-float { position: absolute; display: grid; gap: 2px; padding: 10px 14px 10px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--pc); box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .45); font-size: 13px; animation: ptf 6s ease-in-out infinite; }
.pt-float b { font-size: 13px; }
.pt-float span { color: var(--muted); }
.pt-float.f1 { left: -28px; top: 18%; }
.pt-float.f2 { right: -28px; top: 38%; animation-delay: 1.5s; }
.pt-float.f3 { left: 6%; bottom: 8%; animation-delay: 3s; }
@keyframes ptf { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .pt-float { animation: none; } }
.pt-cap { text-align: center; color: var(--muted); font-size: 12.5px; margin: 10px 0 0; }
.pt-pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pt-pains article { padding: 20px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--bad, #e03131); }
.pt-pains span { font-size: 26px; }
.pt-pains h3 { margin: 8px 0 6px; font: 700 17px var(--display); }
.pt-pains p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.pt-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; align-items: start; }
.pt-calc-in { display: grid; gap: 12px; padding: 20px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.pt-calc-in label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted); }
.pt-calc-in input { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 9px; padding: 9px 12px; font: 600 16px var(--body); }
.pt-calc-out { padding: 24px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.pt-bars { display: grid; gap: 16px; }
.pt-bars div { display: grid; grid-template-columns: 110px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.pt-bars span { grid-row: 1 / 3; font-weight: 600; }
.pt-bars i { display: block; height: 30px; width: var(--w); min-width: 4px; border-radius: 0 8px 8px 0; background: var(--pc); transition: width .35s; }
.pt-bars b { font: 700 18px var(--display); margin-top: 4px; }
.pt-save { margin: 20px 0 6px; font-size: 17px; }
.pt-save b { color: var(--ok, #2f9e44); }
.pt-note { margin: 0; color: var(--muted); font-size: 12.5px; }
.pt-deptabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 18px; }
.pt-deptabs button { display: grid; gap: 2px; justify-items: start; text-align: left; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 600 14px var(--body); cursor: pointer; border-top: 3px solid transparent; }
.pt-deptabs button span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--pc); color: #fff; font-size: 12px; margin-bottom: 4px; }
.pt-deptabs button small { color: var(--muted); font-weight: 400; font-size: 12px; }
.pt-deptabs button[aria-selected="true"] { border-top-color: var(--pc); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .4); background: color-mix(in srgb, var(--pc) 8%, var(--panel)); }
.pt-dept { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.pt-dept-txt { padding: 6px 0; }
.pt-who { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.pt-who span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--pc); color: #fff; }
.pt-dept-txt h3 { margin: 18px 0 8px; font: 700 14px var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pt-dept-txt ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pt-dept-txt li { padding-left: 28px; position: relative; line-height: 1.5; }
.pt-dept-txt li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--pc); color: #fff; font-size: 11px; display: grid; place-items: center; }
.pt-drop { margin: 0; color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bad, #e03131) 70%, transparent); }
.pt-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 26px; }
.pt-timeline div { padding: 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--pc); }
.pt-timeline b { font: 700 18px var(--display); display: block; }
.pt-timeline span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.pt-timeline p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; }
.pt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pt-table { overflow-x: auto; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); }
.pt-table table { width: 100%; border-collapse: collapse; min-width: 720px; }
.pt-table th, .pt-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14.5px; vertical-align: top; }
.pt-table th { font: 700 13px var(--body); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.pt-table td:first-child { font-weight: 600; white-space: nowrap; }
.pt-table td:not(:first-child):not(.hl) { color: var(--muted); }
.pt-table .hl { background: color-mix(in srgb, var(--accent) 9%, transparent); font-weight: 600; color: var(--ink); }
.pt-table th.hl { color: var(--accent); }
.pt-tag { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 99px; background: var(--accent); color: var(--accent-ink, #fff); font-size: 11.5px; font-weight: 700; }
.pt-plan b { display: block; }
.pt-final { margin-top: 40px; padding: 36px; border-radius: 18px; text-align: center; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--panel)), color-mix(in srgb, var(--brand2) 12%, var(--panel))); border: 1px solid var(--line); }
.pt-final h2 { margin: 0 0 16px; }
.pt-zoom { position: fixed; inset: 0; z-index: 210; background: rgba(0, 0, 0, .82); display: grid; place-items: center; padding: 24px; cursor: zoom-out; }
.pt-zoom[hidden] { display: none; }
.pt-zoom img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
@media (max-width: 1100px) { .pt-nav { gap: 14px; } .pt-nav a { font-size: 13.5px; } }
@media (max-width: 900px) {
  .pt-pains, .pt-timeline { grid-template-columns: 1fr 1fr; }
  .pt-calc, .pt-dept, .pt-two { grid-template-columns: 1fr; }
  .pt-deptabs { grid-template-columns: repeat(3, 1fr); }
  .pt-float { display: none; }
  .pt-showcase { margin-top: 0; }
}
@media (max-width: 560px) { .pt-pains, .pt-timeline { grid-template-columns: 1fr; } .pt-deptabs { grid-template-columns: 1fr 1fr; } }

/* Linh vật kiến trên trang giới thiệu */
.pt-float { grid-template-columns: 34px auto; column-gap: 10px; align-items: center; }
.pt-float img { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
.pt-story { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.pt-story-img img { width: 100%; border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45); display: block; }
.pt-ants { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.pt-ants figure { margin: 0; text-align: center; }
.pt-ants img { width: 100%; aspect-ratio: 1; object-fit: contain; transition: transform .2s; }
.pt-ants figure:hover img { transform: translateY(-6px); }
.pt-ants figcaption { display: grid; font-size: 12px; color: var(--muted); line-height: 1.3; }
.pt-ants figcaption b { color: var(--ink); font-size: 13.5px; }
.pt-deptabs button img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; margin-bottom: 6px; }
.pt-who img { width: 96px; height: 96px; object-fit: contain; }
.pt-night { margin: 0 0 24px; position: relative; border-radius: 16px; overflow: hidden; }
.pt-night img { display: block; width: 100%; max-height: 360px; object-fit: cover; }
.pt-night figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 22px; color: #fff; font-weight: 600; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); }
.pt-approve { float: right; width: 150px; margin: -20px 0 0 16px; }
.pt-final img { width: min(560px, 100%); border-radius: 14px; margin: 0 auto 18px; display: block; }
@media (max-width: 900px) { .pt-story { grid-template-columns: 1fr; } .pt-ants { grid-template-columns: repeat(3, 1fr); } .pt-approve { display: none; } }

/* Hub: đăng ký dùng thử, địa chỉ cửa hàng */
.pt-form select { width: 100%; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 9px; padding: 10px 12px; font: 400 15px var(--body); }
.pt-slug { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--bg); }
.pt-slug input { border: 0 !important; border-radius: 0 !important; flex: 1; min-width: 0; }
.pt-slug b { display: grid; place-items: center; padding: 0 12px; background: color-mix(in srgb, var(--line) 50%, transparent); color: var(--muted); font: 600 14px var(--body); white-space: nowrap; }
.pt-slug-msg { font-size: 12.5px; font-weight: 500; min-height: 1em; }
.pt-slug-msg.ok { color: var(--ok, #2f9e44); } .pt-slug-msg.bad { color: var(--bad, #e03131); }
.pt-cta-c { justify-content: center; }
/* Gói sử dụng: chức năng từng gói */
.pt-plans { align-items: stretch; }
.pt-plan { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.pt-plan.hot { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--panel)), var(--panel) 60%); box-shadow: 0 0 0 1px var(--accent) inset, 0 24px 50px -28px color-mix(in srgb, var(--accent) 60%, transparent); }
.pt-plan .pt-tag { position: absolute; top: -12px; left: 20px; }
.pt-plan-h { display: flex; align-items: center; gap: 12px; }
.pt-plan-h img { width: 64px; height: 64px; object-fit: contain; flex: none; }
.pt-plan-h small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.pt-plus { margin: 0 !important; font-size: 13px !important; font-weight: 600; color: var(--accent) !important; }
.pt-plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pt-plan li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.45; }
.pt-plan li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.pt-plan li b { font: 600 14.5px var(--body); display: block; }
.pt-plan li span { display: block; color: var(--muted); font-size: 13px; }
.pt-all { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 18px; padding: 14px 18px; border-radius: 12px; background: var(--panel); border: 1px dashed var(--line); font-size: 13.5px; color: var(--muted); }
.pt-all b { color: var(--ink); }

/* ---------- Trang giới thiệu bản mới: header, hero có ảnh sản phẩm, điểm nổi bật; trang đăng nhập riêng ---------- */
.pt-actions { display: flex; align-items: center; gap: 6px; margin-left: 8px; }
.pt-link { border: 0; background: none; color: var(--ink); font: 600 14.5px var(--body); padding: 9px 14px; border-radius: 10px; cursor: pointer; }
.pt-link:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 10px; padding: 9px 18px; cursor: pointer; text-decoration: none !important;
  font: 600 14.5px var(--body); color: #fff; background: linear-gradient(100deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--brand2))); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--accent) 80%, transparent); transition: transform .15s, filter .15s; }
.pt-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.portal a.pt-btn { color: #fff; }
#pt-industries .pt-pains article, #pt-workflow .pt-pains article { border-top-color: var(--accent); }
/* Ngành mở rộng trên ngôn ngữ thiết kế Portal gốc. */
.pt-industries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pt-industry { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: 0 12px 28px -24px rgba(0,0,0,.4); }
.pt-industry.wide { grid-column: span 2; display: grid; grid-template-columns: 1.1fr 1fr; }
.pt-industry.selected { border-color: var(--accent); }
.pt-industry-art { position: relative; display: grid; place-items: center; min-height: 200px; overflow: hidden; background: radial-gradient(ellipse at 70% 25%, color-mix(in srgb, var(--industry-tone) 24%, var(--panel)), color-mix(in srgb, var(--industry-tone) 6%, var(--bg))); }
.pt-industry-art img { display: block; width: 100%; height: 200px; object-fit: contain; padding: 16px; transition: transform .25s; }
.pt-industry-art.scenic img { height: 100%; min-height: 200px; padding: 0; object-fit: cover; }
.pt-industry-art.scenic { height: 200px; }
.pt-industry-art.scenic img { position: absolute; inset: 0; }
.pt-industry.wide .pt-industry-art { height: auto; min-height: 280px; }
.pt-industry-number { position: absolute; top: 14px; left: 14px; padding: 5px 9px; border-radius: 8px; background: var(--panel); color: var(--muted); font-size: 11px; font-weight: 700; }
.pt-industry:hover .pt-industry-art img { transform: scale(1.035); }
.pt-industry-body { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 24px; }
.pt-industry-body h3 { margin: 0; font: 700 19px/1.4 var(--display); }
.pt-industry-body p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.pt-industry-links { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: auto; padding-top: 8px; font-size: 13px; }
.pt-industry-links a:first-child { font-weight: 700; }
.pt-industry-selected { margin-bottom: 24px; padding: 24px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 14px; background: var(--panel); }
.pt-industry-selected p { color: var(--muted); }
.pt-pilot-section { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: center; gap: 36px; background: radial-gradient(ellipse at 80% 45%, color-mix(in srgb, var(--accent) 10%, var(--bg)), var(--bg)); }
.pt-pilot-section > img { display: block; width: 100%; height: auto; }
.pt-pilot-copy .pt-cap { text-align: left; margin-top: 18px; }
#pt-faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
#pt-faq summary { cursor: pointer; font-weight: 600; }
#pt-faq details p { color: var(--muted); line-height: 1.7; }
@media (max-width: 900px) { .pt-industries { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pt-industry.wide { grid-column: span 2; } .pt-pilot-section { grid-template-columns: minmax(0,1fr) 180px; } }
@media (max-width: 560px) { .pt-industries { grid-template-columns: 1fr; } .pt-industry.wide { grid-column: auto; display: block; } .pt-industry-art.scenic img { height: 200px; } .pt-pilot-section { grid-template-columns: 1fr; } .pt-pilot-section > img { width: 140px; grid-row: 1; justify-self: center; } }
@media (prefers-reduced-motion: reduce) { .pt-industry-art img { transition: none; } .pt-industry:hover .pt-industry-art img { transform: none; } }
.pt-btn.ghost { background: var(--panel); color: var(--ink) !important; border-color: var(--line); box-shadow: none; }
.pt-btn.ghost:hover { border-color: var(--accent); }
.pt-btn.big { padding: 13px 24px; font-size: 15.5px; border-radius: 12px; }
.pt-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); padding-top: 56px; padding-bottom: 48px; }
.pt-hero-vis { position: relative; padding: 18px 0 8px 18px; }
.pt-hero-vis .pt-float.f1 { left: auto; right: -16px; top: 0; }
.pt-hero-vis .pt-float.f2 { right: auto; left: -24px; top: 44%; }
.pt-hero-vis .pt-float.f3 { left: auto; right: 22px; bottom: 44px; }
.pt-peek { position: absolute; left: -50px; bottom: 4px; width: 100px; filter: drop-shadow(0 12px 18px rgba(0,0,0,.3)); }
.pt-hero-vis .pt-cap { text-align: right; }
.pt-trust { display: flex; align-items: center; gap: 12px; margin-top: 26px; color: var(--muted); font-size: 14px; }
.pt-trust b { color: var(--ink); }
.pt-faces { display: flex; }
.pt-faces img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--bg); background: var(--panel); margin-left: -8px; object-fit: cover; }
.pt-faces img:first-child { margin-left: 0; }
.pt-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 8px max(16px, calc((100% - 1160px) / 2)) 64px; }
.pt-why-c { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); color: var(--ink) !important; text-decoration: none !important; overflow: hidden; transition: transform .15s, border-color .15s; }
.pt-why-c:hover { transform: translateY(-3px); border-color: var(--accent); }
.pt-why-c img { position: absolute; right: 16px; top: 16px; width: 92px; height: 92px; object-fit: contain; }
.pt-why-c b { font: 700 30px/1.1 var(--display); background: linear-gradient(90deg, var(--accent), var(--brand2)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 96px; min-height: 82px; display: flex; align-items: flex-end; }
.pt-why-c h3 { margin: 6px 0 0; font: 700 17px var(--display); }
.pt-why-c p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; flex: 1; }
.pt-why-c span { margin-top: 6px; color: var(--accent); font-weight: 600; font-size: 13.5px; }
.pt-toast { position: fixed; top: 84px; left: 50%; transform: translateX(-50%); z-index: 260; padding: 10px 18px; border-radius: 10px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 14px; box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); }
/* Trang đăng nhập / đăng ký */
.pt-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 100%; }
.pt-auth-side { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 32px 40px; color: #eef2ff; background: radial-gradient(600px 400px at 20% 10%, rgba(126,162,255,.35), transparent 70%), radial-gradient(500px 400px at 90% 90%, rgba(255,138,61,.28), transparent 70%), linear-gradient(160deg, #1b2a52, #12182a); }
.pt-brand.light, .pt-brand.light span { color: #fff !important; }
.pt-brand.light span { opacity: .7; }
.pt-auth-side h2 { font: 700 clamp(24px, 2.6vw, 34px)/1.2 var(--display); margin: 0 0 18px; max-width: 18ch; }
.pt-auth-side ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 15.5px; }
.pt-auth-side li::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px; border-radius: 50%; background: rgba(255,255,255,.16); font-size: 12px; font-weight: 700; }
.pt-auth-side > img { width: 100%; max-width: 520px; border-radius: 16px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.pt-auth-side small { opacity: .65; }
.pt-auth-main { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; padding: 32px 16px; position: relative; }
.pt-auth-main .pt-card { width: min(440px, 100%); }
.pt-back { position: absolute; top: 24px; left: 28px; color: var(--muted) !important; font-weight: 600; font-size: 14px; }
.pt-auth-help { color: var(--muted); font-size: 13.5px; margin: 0; }
@media (max-width: 1100px) { .pt-why { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .pt-hero { grid-template-columns: 1fr; }
  .pt-hero-vis { padding-left: 0; } .pt-peek { display: none; }
  .pt-actions { margin-left: auto; } .pt-top .pt-link { display: none; }
  .pt-auth { grid-template-columns: 1fr; } .pt-auth-side > img, .pt-auth-side small, .pt-auth-side ul { display: none; }
  .pt-auth-side { padding: 20px 16px; } .pt-auth-side h2 { margin: 0; font-size: 20px; }
  .pt-back { position: static; align-self: flex-start; }
}
@media (max-width: 560px) { .pt-why { grid-template-columns: 1fr; } .pt-top .pt-btn { padding: 8px 12px; font-size: 13.5px; } }

/* Ưu đãi ra mắt: dải trên cùng + mục riêng */
.pt-promo-bar { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 8px 16px; font-size: 14px; color: #fff; text-align: center;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 85%, #000), color-mix(in srgb, var(--brand2) 85%, #000)); }
.pt-promo-bar a { color: #fff !important; font-weight: 700; text-decoration: underline !important; text-underline-offset: 3px; white-space: nowrap; }
.pt-gift { font-size: 16px; }
.pt-promo { padding: 0 max(16px, calc((100% - 1160px) / 2)) 64px; }
.pt-promo-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 36px; border-radius: 24px; position: relative; overflow: hidden;
  background: radial-gradient(500px 300px at 95% 10%, color-mix(in srgb, var(--brand2) 22%, transparent), transparent 70%), linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--panel)), var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.pt-promo-tag { display: inline-block; padding: 5px 12px; border-radius: 99px; background: var(--brand2); color: #fff; font: 700 12px var(--body); letter-spacing: .06em; text-transform: uppercase; }
.pt-promo h2 { font: 700 clamp(26px, 3.2vw, 38px)/1.15 var(--display); margin: 14px 0 16px; }
.pt-promo h2 em { font-style: normal; background: linear-gradient(90deg, var(--accent), var(--brand2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pt-promo ul { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.pt-promo li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.5; }
.pt-promo li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--accent); }
.pt-slots { margin: 0 0 22px; }
.pt-slots div { height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--line) 80%, transparent); overflow: hidden; }
.pt-slots i { display: block; height: 100%; width: var(--w); min-width: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--brand2)); }
.pt-slots span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.pt-promo-img img { width: 100%; border-radius: 18px; display: block; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
@media (max-width: 900px) { .pt-promo-in { grid-template-columns: 1fr; padding: 24px; } .pt-promo-img { order: -1; } }
.pt-promo-img { position: relative; }
.pt-count { position: absolute; left: -18px; bottom: -18px; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 20px 40px -18px rgba(0,0,0,.5); }
.pt-count-n { font: 700 46px/1 var(--display); background: linear-gradient(90deg, var(--accent), var(--brand2)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; min-width: 1.3em; text-align: center; }
.pt-count small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.pt-count small b { color: var(--ink); }
@media (max-width: 900px) { .pt-count { left: 10px; bottom: 10px; } }

/* Hợp tác / CTV */
.pt-partners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pt-partners article { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.pt-partners img { width: 72px; height: 72px; object-fit: contain; }
.pt-partners h3 { margin: 4px 0 0; font: 700 18px var(--display); }
.pt-partners p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; flex: 1; }
.pt-partners .pt-btn { align-self: flex-start; margin-top: 6px; }
@media (max-width: 900px) { .pt-partners { grid-template-columns: 1fr; } }
/* Chọn ngành tại menu, luôn hiển thị trên máy tính và điện thoại. */
.portal .pt-top { gap:18px; padding-inline:max(20px, calc((100% - 1320px) / 2)); }
.portal .pt-top .pt-brand { flex:none; }
.portal .pt-industry-picker { display:grid; gap:3px; width:280px; min-width:0; flex:none; color:var(--muted); font-size:10px; letter-spacing:.06em; }
.portal .pt-industry-picker select { width:100%; padding:7px 26px 7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); font:600 12px var(--body); cursor:pointer; }
.portal .pt-industry-picker select:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.portal .pt-nav { gap:18px; white-space:nowrap; }
.portal .pt-nav a { font-size:13px; }
.portal .pt-actions { flex:none; margin-left:auto; }
.pt-faq { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr); gap:70px; align-items:start; }
.pt-faq-intro h2 { font-size:clamp(26px,3vw,36px); margin-bottom:18px; }
.pt-faq-intro p { color:var(--muted); line-height:1.75; margin-bottom:24px; max-width:32ch; }
.pt-faq-list { display:grid; gap:12px; min-width:0; }
#pt-faq details { border:1px solid var(--line); border-radius:14px; padding:0; background:var(--panel); overflow:hidden; }
#pt-faq details[open] { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); box-shadow:0 12px 28px -24px var(--accent); }
#pt-faq summary { list-style:none; display:flex; justify-content:space-between; gap:20px; align-items:center; padding:20px 24px; color:var(--ink); font-size:15px; line-height:1.5; }
#pt-faq summary::-webkit-details-marker { display:none; }
#pt-faq summary::after { content:'+'; flex:none; font-size:22px; font-weight:400; color:var(--accent); }
#pt-faq details[open] summary::after { content:'−'; }
#pt-faq details p { margin:0; padding:0 24px 22px; font-size:14px; }
.pt-footer { padding:52px max(20px, calc((100% - 1160px) / 2)) 90px; border-top:1px solid var(--line); background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 5%,var(--panel)),var(--panel) 65%); }
.pt-footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding-bottom:42px; }
.pt-footer-brand p { font-size:14px; line-height:1.8; color:var(--muted); margin:18px 0; }
.pt-footer-company { font:600 12px var(--body); letter-spacing:.12em; color:var(--muted); }
.pt-footer nav { display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.pt-footer h3 { margin:5px 0 8px; font:700 14px var(--display); color:var(--ink); }
.portal .pt-footer nav a { color:var(--muted); font-size:13px; line-height:1.5; }
.portal .pt-footer nav a:hover { color:var(--accent); }
.pt-footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px 24px; padding-top:24px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
@media (max-width:1250px) { .portal .pt-nav { display:none; } .portal .pt-industry-picker { margin-left:auto; width:280px; } .portal .pt-actions { margin-left:0; } }
@media (max-width:900px) { .pt-faq { grid-template-columns:1fr; gap:28px; } .pt-faq-intro p { max-width:unset; } .pt-footer-grid { grid-template-columns:1.2fr 1fr; gap:36px; } }
@media (max-width:600px) {
  .portal .pt-top { flex-wrap:wrap; gap:12px; padding:12px 16px; }
  .portal .pt-top .pt-brand span { display:none; }
  .portal .pt-industry-picker { order:3; width:100%; margin:0; display:flex; align-items:center; gap:12px; }
  .portal .pt-industry-picker > span { white-space:nowrap; font-size:11px; }
  .portal .pt-industry-picker select { flex:1; min-width:0; font-size:12px; }
  .portal .pt-actions { margin-left:auto; }
  .portal .pt-top .pt-link { display:none; }
  .pt-footer-grid { grid-template-columns:1fr 1fr; gap:30px 20px; }
  .pt-footer-brand { grid-column:1 / -1; }
  .pt-footer-bottom { display:grid; grid-template-columns:1fr; padding-right:100px; line-height:1.7; }
  #pt-faq summary { padding:18px; } #pt-faq details p { padding:0 18px 20px; }
}

/* Menu giải pháp dạng dropdown, cùng hàng với menu chính. */
.portal .pt-industry-menu { position:relative; flex:none; margin-left:16px; }
.pt-industry-menu summary { display:flex; align-items:center; gap:8px; padding:12px 0; list-style:none; cursor:pointer; color:var(--ink); font:600 14px var(--body); }
.pt-industry-menu summary::-webkit-details-marker { display:none; }
.pt-industry-menu summary svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; transition:transform .2s; }
.pt-industry-menu[open] summary { color:var(--accent); }
.pt-industry-menu[open] summary svg { transform:rotate(180deg); }
.pt-industry-options { position:absolute; top:100%; left:-24px; width:370px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 130px); overflow-y:auto; padding:12px; border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:0 24px 60px -20px rgba(0,0,0,.3); }
.portal .pt-industry-options a { display:grid; gap:5px; padding:15px 16px; border-radius:10px; color:var(--ink); text-decoration:none; line-height:1.4; }
.pt-industry-options b { font-size:14px; }
.pt-industry-options small { font-size:12px; color:var(--muted); }
.portal .pt-industry-options a:hover, .portal .pt-industry-options a:focus-visible { background:color-mix(in srgb,var(--accent) 9%,var(--panel)); }
.portal .pt-industry-options a[aria-current=page] b { color:var(--accent); }
@media (max-width:600px) { .portal .pt-industry-menu { order:3; margin-left:0; } .pt-industry-options { left:0; } .portal .pt-top { gap:8px 12px; } .portal .pt-top .pt-brand b { font-size:17px; } }

/* Không để margin của details[open] dùng chung làm đổi chiều cao header. */
.pt-industry-menu > summary, .pt-industry-menu[open] > summary { margin:0; height:44px; padding:0; }

/* Footer gọn với minh họa đội AI và tài chính, không phủ các liên kết. */
.pt-footer { position:relative; isolation:isolate; overflow:hidden; padding-top:34px; padding-bottom:28px; background:radial-gradient(ellipse at 90% 60%,color-mix(in srgb,var(--accent) 12%,var(--panel)),var(--panel) 70%); }
.pt-footer-grid { position:relative; gap:32px; padding-bottom:24px; }
.pt-footer-bottom { position:relative; padding-top:18px; padding-right:72px; }
.pt-footer-art { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.pt-footer-art img { position:absolute; bottom:12px; width:170px; opacity:.09; }
.pt-footer-art img:nth-child(1) { left:0; }
.pt-footer-art img:nth-child(2) { left:17%; }
.pt-footer-art img:nth-child(3) { left:34%; }
.pt-footer-art img:nth-child(4) { left:51%; }
.pt-footer-art img:nth-child(5) { left:68%; }
.pt-footer-art img:nth-child(6) { right:0; }
.pt-footer-art span { position:absolute; right:8%; bottom:16px; font:600 11px var(--body); letter-spacing:.08em; color:var(--muted); opacity:.6; }
.pt-money-field { position:relative; display:block; }
.pt-money-field input { width:100%; padding-right:34px; }
.pt-money-field > b { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--muted); font-weight:500; }
@media(max-width:600px) { .pt-footer-grid { gap:24px 18px; } .pt-footer-art img { width:120px; } .pt-footer-art img:nth-child(1) { left:-15px; bottom:65%; } .pt-footer-art img:nth-child(2) { left:calc(50% - 60px); bottom:65%; } .pt-footer-art img:nth-child(3) { left:auto; right:-15px; bottom:65%; } .pt-footer-art img:nth-child(4) { left:-15px; bottom:12px; } .pt-footer-art img:nth-child(5) { left:calc(50% - 60px); bottom:12px; } .pt-footer-art img:nth-child(6) { right:-15px; bottom:12px; } .pt-footer-art span { display:none; } }

.pt-industry-menu summary > span { display:block; max-width:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pt-industry-menu summary svg { flex:none; }
@media(max-width:600px) { .pt-industry-menu summary > span { max-width:calc(100vw - 64px); } }

.portal .pt-nav a { font-size:16px; }
.pt-industry-menu summary { font-size:16px; }

@media(min-width:901px) { .pt-footer-grid { grid-template-columns:1.3fr .9fr 1.25fr 1fr .9fr; gap:26px; } }
.portal .pt-footer nav a[aria-current=page] { color:var(--accent); }

/* Thu gọn đăng nhập theo chiều cao màn hình, giữ form truy cập được khi zoom/bàn phím. */
.pt-auth-side { gap:16px; padding:24px 36px; }
.pt-auth-side > img { width:auto; max-width:100%; max-height:30dvh; object-fit:contain; align-self:center; }
.pt-auth-side h2 { font-size:clamp(24px,2.3vw,30px); margin-bottom:14px; }
.pt-auth-side ul { gap:8px; font-size:14px; }
.pt-auth-main { gap:12px; padding:56px 24px 24px; }
@media(min-width:901px) and (max-height:760px) {
  .pt-auth-side { padding:20px 30px; gap:12px; }
  .pt-auth-side > img { max-height:24dvh; }
  .pt-auth-side h2 { font-size:26px; }
  .pt-auth-main { padding:48px 24px 20px; }
  .pt-auth-main .pt-card { padding:20px; }
  .pt-auth-main .pt-form { gap:10px; }
}
@media(max-width:900px) {
  .pt-auth-side { padding:16px; gap:10px; }
  .pt-auth-side h2 { font-size:20px; margin:0; }
  .pt-auth-main { padding:16px; gap:12px; }
}

.pt-footer-flow { position:relative; list-style:none; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 16px; padding:16px 0; margin:0; border-top:1px solid var(--line); }
.pt-footer-flow li { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink); }
.pt-footer-flow li + li::before { content:'→'; color:var(--muted); margin-right:6px; }
.pt-footer-flow b { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:color-mix(in srgb,var(--accent) 12%,var(--panel)); color:var(--accent); font-size:11px; }
@media(max-width:600px) { .pt-footer-flow { justify-content:flex-start; gap:12px 8px; } .pt-footer-flow li { font-size:12px; } }

@media(max-width:900px) { .pt-auth { grid-template-rows:auto 1fr; } .pt-auth-side { justify-content:flex-start; } }

/* Minh họa theo bước: chữ ngắn, linh vật và thứ tự đọc rõ trên mọi màn hình. */
.pt-visual-steps { list-style:none; padding:0; margin:28px 0 0; display:grid; gap:24px; }
.pt-start-steps { grid-template-columns:repeat(3,minmax(0,1fr)); }
.pt-business-steps { grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.pt-visual-steps li { position:relative; min-width:0; text-align:center; padding:24px 16px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 5%,var(--panel)),var(--panel)); }
.pt-visual-steps img { display:block; width:100%; max-width:160px; height:150px; margin:0 auto 12px; object-fit:contain; }
.pt-business-steps img { max-width:120px; height:115px; }
.pt-visual-steps h3 { margin:0; font:700 17px/1.4 var(--display); }
.pt-business-steps h3 { font-size:14px; }
.pt-visual-steps p { margin:8px 0 0; color:var(--muted); font-size:14px; line-height:1.5; }
.pt-step-number { position:absolute; top:12px; left:12px; font:600 12px var(--body); color:var(--accent); }
.pt-visual-steps li:not(:last-child)::after { content:'→'; position:absolute; z-index:1; right:-19px; top:50%; color:var(--accent); font-size:20px; }
.pt-business-steps li:not(:last-child)::after { right:-14px; font-size:16px; }
@media(max-width:1100px) { .pt-business-steps { grid-template-columns:repeat(3,minmax(0,1fr)); } .pt-business-steps li:nth-child(3)::after { content:none; } }
@media(max-width:600px) { .pt-start-steps,.pt-business-steps { grid-template-columns:1fr; gap:20px; } .pt-visual-steps li { padding:20px 18px; } .pt-visual-steps img { height:110px; } .pt-visual-steps li:not(:last-child)::after { content:'↓'; right:calc(50% - 8px); top:auto; bottom:-22px; font-size:18px; } }

/* Minh họa lấp khoảng trống cột FAQ, không cản nội dung hoặc nút. */
.pt-faq-art { display:grid; place-items:center; width:min(100%,320px); margin:28px auto 0; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%); }
.pt-faq-art img { display:block; width:100%; height:auto; object-fit:contain; filter:drop-shadow(0 18px 20px color-mix(in srgb,var(--accent) 15%,transparent)); }
@media(max-width:900px) { .pt-faq-art { width:180px; margin:20px auto 0; } }

.portal p { text-wrap:pretty; }
.portal :is(h1,h2,h3), .pt-why-c > b { text-wrap:balance; }

/* V-41: đăng nhập trong một khung thống nhất, ảnh đi cùng nội dung thương hiệu. */
.pt-auth { width:min(1200px,calc(100% - 64px)); min-height:0; margin:auto; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border:1px solid var(--line); border-radius:24px; box-shadow:0 28px 70px -35px rgba(15,23,42,.4); overflow:clip; }
#portal:has(.pt-auth) { display:flex; min-height:100dvh; padding:32px 0; background:radial-gradient(ellipse at 10% 10%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 55%),var(--bg); }
.pt-auth-side { padding:32px; gap:24px; }
.pt-auth-story { display:grid; gap:16px; }
.pt-auth-eyebrow { font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--muted); }
.pt-auth-side .pt-auth-eyebrow { color:#b8c9f2; }
.pt-auth-side h2 { font-size:clamp(26px,2.6vw,36px); max-width:20ch; margin:0; text-wrap:balance; }
.pt-auth-side ul { grid-template-columns:1fr 1fr; gap:12px 16px; font-size:13px; }
.pt-auth-side li { display:flex; align-items:flex-start; }
.pt-auth-side li::before { flex:none; width:18px; height:18px; margin-right:8px; }
.pt-auth-art { width:100%; height:clamp(160px,26dvh,260px); object-fit:cover; object-position:center 45%; border-radius:14px; display:block; }
.pt-auth-side small { font-size:11px; }
.pt-auth-main { padding:70px 36px 30px; gap:20px; background:var(--panel); }
.pt-auth-main .pt-back { position:absolute; top:24px; left:36px; font-size:13px; }
.pt-auth-main .pt-card { padding:0; border:0; box-shadow:none; width:100%; max-width:400px; background:transparent; }
.pt-auth-main .pt-tabs { margin-bottom:26px; }
.pt-auth-main .pt-card h2 { font-size:28px; margin:8px 0; }
.pt-auth-main .pt-hint { margin:0 0 22px; font-size:14px; }
.pt-auth-main .pt-form { gap:16px; }
.pt-auth-main .pt-form input { background:var(--bg); min-height:48px; border-radius:10px; }
.pt-auth-main .pt-form .btn.big { min-height:48px; border-radius:10px; }
.pt-auth-main .pt-token { padding-top:14px; border-top:1px solid var(--line); margin-top:22px; }
.pt-auth-help { text-align:center; font-size:12px; }
@media(min-width:901px) and (max-height:760px) { #portal:has(.pt-auth) { padding:16px 0; } .pt-auth-side { padding:24px;gap:16px; } .pt-auth-story { gap:12px; } .pt-auth-side h2 { font-size:28px; } .pt-auth-art { height:170px; } .pt-auth-main { padding:58px 28px 24px;gap:14px; } .pt-auth-main .pt-tabs { margin-bottom:18px; } .pt-auth-main .pt-hint { margin-bottom:16px; } .pt-auth-main .pt-form { gap:10px; } .pt-auth-main .pt-form input { min-height:42px; } .pt-auth-main .pt-token { margin-top:16px;padding-top:10px; } }
@media(max-width:900px) { #portal:has(.pt-auth) { padding:20px 0; } .pt-auth { width:min(560px,calc(100% - 32px)); grid-template-columns:1fr; } .pt-auth-side { padding:24px; } .pt-auth-story { gap:10px; } .pt-auth-side h2 { font-size:24px; } .pt-auth-art,.pt-auth-side ul,.pt-auth-side small,.pt-auth-side .pt-auth-eyebrow { display:none; } .pt-auth-main { padding:54px 24px 24px; } .pt-auth-main .pt-back { left:24px;top:18px; } .pt-auth-main .pt-card h2 { font-size:25px; } }
@media(max-width:420px) { #portal:has(.pt-auth) { padding:12px 0; } .pt-auth { width:calc(100% - 24px);border-radius:18px; } .pt-auth-side { padding:18px;gap:12px; } .pt-auth-side h2 { font-size:21px; } .pt-auth-main { padding:48px 18px 20px;gap:16px; } .pt-auth-main .pt-back { left:18px; } .pt-auth-main .pt-tabs { margin-bottom:18px; } .pt-auth-main .pt-form { gap:12px; } }