/*
 * BrokerCheck — trang con (danh sách, review, bài viết, trang tĩnh, liên hệ).
 * Cùng ngôn ngữ thiết kế Vantage: bo góc 8–13px, bóng mềm, nút bo tròn, tiêu đề đậm có chữ nhấn.
 * Trang review sàn: cách tổ chức thông tin tham khảo WikiFX (docs/handoff/frontend-ref-wikifx.md).
 */
.layout-2col{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start;}
.layout-2col>aside{position:sticky;top:calc(var(--header-h) + 20px);display:grid;gap:20px;}
.layout-2col.toc-left{grid-template-columns:260px minmax(0,1fr) 300px;}
@media (max-width:1200px){.layout-2col.toc-left{grid-template-columns:minmax(0,1fr) 300px;}.layout-2col.toc-left>.toc-col{display:none;}}
@media (max-width:1024px){.layout-2col,.layout-2col.toc-left{grid-template-columns:minmax(0,1fr);}.layout-2col>aside{position:static;}}

/* ---------- Thanh công cụ danh sách ---------- */
.list-tools{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px;}
.filter-tabs{display:flex;gap:8px;flex-wrap:wrap;}
.filter-tabs button{padding:9px 16px;border-radius:50px;background:#fff;border:1px solid var(--v-grey-light1);font-size:var(--fs-14);font-weight:500;color:var(--v-black);transition:.2s;}
.filter-tabs button:hover{border-color:var(--c-primary-soft);}
.filter-tabs button.active,.filter-tabs button[aria-pressed="true"]{background:var(--c-primary);border-color:var(--c-primary);color:#fff;}
.search-field{position:relative;min-width:280px;}
.search-field input{width:100%;height:46px;border-radius:50px;border:1px solid var(--v-grey-light1);padding:0 46px 0 20px;background:#fff;color:var(--v-black);}
.search-field input:focus{border-color:var(--c-primary);}
.search-field .ico{position:absolute;right:16px;top:11px;color:#7d818a;pointer-events:none;}
.sort-field{display:flex;align-items:center;gap:8px;font-size:var(--fs-14);color:var(--v-black);}
.sort-field select{height:42px;border-radius:50px;border:1px solid var(--v-grey-light1);padding:0 36px 0 16px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23555' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;color:var(--v-black);}
.load-more{text-align:center;margin-top:32px;}
@media (max-width:640px){.search-field{min-width:0;width:100%;}}

/* ---------- Bảng so sánh /san-uy-tin/ ---------- */
.compare-wrap{position:relative;border-radius:13px;box-shadow:0 15px 30px #0000001A;background:#fff;overflow:hidden;}
.compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.compare-table{width:100%;min-width:980px;font-size:var(--fs-14);color:var(--v-black);}
.compare-table thead th{background:var(--v-grey);color:#fff;font-weight:500;padding:14px 14px;text-align:left;white-space:nowrap;}
.compare-table thead th button{color:inherit;font-weight:inherit;display:inline-flex;gap:6px;align-items:center;}
.compare-table thead th button::after{content:"↕";opacity:.6;font-size:12px;}
.compare-table td{padding:14px;border-bottom:1px solid var(--v-grey-light4);vertical-align:middle;}
.compare-table tbody tr:hover{background:var(--v-grey-light2);}
.compare-table .sticky-col{position:sticky;left:0;background:#fff;z-index:2;min-width:210px;box-shadow:6px 0 10px -8px rgba(0,0,0,.2);}
.compare-table thead .sticky-col{background:var(--v-grey);}
.compare-table tbody tr:hover .sticky-col{background:var(--v-grey-light2);}
.compare-table .bname{display:flex;gap:10px;align-items:center;font-weight:600;font-size:15px;}
.compare-table .bname img{width:36px;height:36px;border-radius:8px;border:1px solid var(--v-grey-light1);object-fit:contain;}
.compare-table .bname a:hover{color:var(--c-accent-ink);text-decoration:underline;}
.compare-table .rank{color:var(--v-grey);font-weight:600;width:28px;display:inline-block;}
.compare-hint{display:none;font-size:13px;color:var(--v-grey);margin:10px 0 0;}
@media (max-width:1024px){.compare-hint{display:block;}}
.table-note{font-size:13px;color:#4a4f5c;margin-top:14px;}

/* ---------- Trang review sàn (bố cục tham khảo WikiFX) ---------- */
.review-top{background:linear-gradient(180deg,var(--v-grey-light3),#fff);padding:28px 0 8px;}
.review-hero{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) minmax(0,360px);gap:28px;background:#fff;border:1px solid var(--c-accent-soft);border-radius:13px;padding:24px;box-shadow:0 15px 40px rgba(16,24,40,.06);}
.rh-left{display:grid;gap:14px;align-content:start;min-width:0;}
.rh-left>*{min-width:0;}
.rh-logo{position:relative;border:1px solid var(--v-grey-light1);border-radius:10px;background:#fff;display:flex;flex-direction:column;align-items:center;min-height:140px;padding:0 18px 18px;overflow:hidden;}
.rh-logo img{max-height:110px;max-width:100%;width:auto;height:auto;object-fit:contain;margin:auto 0;}
/* Huy hiệu là hàng riêng ở góc trên (không đè logo), giữ kiểu thẻ góc của WikiFX/Vantage */
.rh-logo .badge{position:static;align-self:flex-start;margin:-1px 0 12px -19px;border-radius:10px 0 10px 0;max-width:calc(100% + 20px);white-space:normal;line-height:1.25;flex:0 0 auto;}
.rh-score{border-radius:10px;background:var(--c-primary-050);border:1px solid var(--c-primary-light);text-align:center;padding:14px 10px;}
.rh-score span{display:block;font-size:13px;color:#4a4f5c;}
.rh-score b{font-size:44px;line-height:1.1;color:var(--c-primary);font-weight:700;}
.rh-score b small{font-size:15px;color:var(--v-grey);font-weight:500;}
.rh-main{min-width:0;}
.rh-main h1{font-size:var(--fs-36);margin:0 0 8px;line-height:1.2;overflow-wrap:anywhere;}
.rh-meta{display:flex;flex-wrap:wrap;gap:6px 16px;color:#3d4250;font-size:var(--fs-14);margin-bottom:12px;}
.rh-meta span{display:inline-flex;align-items:center;gap:6px;}
.rh-meta .ico{width:16px;height:16px;color:var(--v-grey);}
.rh-verdict{font-size:var(--fs-16);color:var(--v-black);line-height:1.55;margin:14px 0 16px;padding-left:14px;border-left:3px solid var(--c-accent);}
.rh-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.rh-actions .green-button,.rh-actions .ghost-button{display:inline-flex;gap:8px;align-items:center;}
.rh-actions .ico{width:18px;height:18px;}
.rh-updated{font-size:13px;color:var(--v-grey);margin-top:12px;}
.rh-rating{border-left:1px solid var(--v-grey-light1);padding-left:24px;}
.rh-rating h2{font-size:var(--fs-16);font-weight:600;margin:0 0 6px;color:#3d4250;}
.radar{width:100%;max-width:330px;height:auto;display:block;margin:0 auto;overflow:visible;}
.radar .grid{fill:none;stroke:var(--v-grey-light1);}
.radar .axis{stroke:var(--v-grey-light1);}
.radar .area{fill:rgba(var(--c-accent-rgb),.22);stroke:var(--c-accent);stroke-width:2;}
.radar .dot{fill:var(--c-accent);}
.radar .lbl{font-size:10.5px;fill:#3d4250;font-family:var(--font);}
.radar .lbl tspan.v{font-weight:700;fill:var(--c-primary);font-size:12px;}
.radar .center{font-size:26px;font-weight:700;fill:var(--c-primary);font-family:var(--font);}
@media (max-width:1240px){.review-hero{grid-template-columns:minmax(0,200px) minmax(0,1fr);}.rh-score b{font-size:38px;}.rh-rating{grid-column:1/-1;border-left:0;border-top:1px solid var(--v-grey-light1);padding:18px 0 0;}}
@media (max-width:640px){
    .review-hero{grid-template-columns:minmax(0,1fr);padding:16px;gap:16px;}
    .rh-left{grid-template-columns:1fr 1fr;}
    .rh-logo{aspect-ratio:auto;min-height:110px;}
    .rh-score b{font-size:36px;}
    .rh-main h1{font-size:24px;}
}

.review-nav{position:sticky;top:var(--header-h);z-index:50;background:#fff;border-bottom:1px solid var(--v-grey-light1);margin-top:24px;}
.review-nav ul{display:flex;gap:28px;overflow-x:auto;scrollbar-width:none;}
.review-nav ul::-webkit-scrollbar{display:none;}
.review-nav a{display:block;padding:16px 0 13px;font-weight:600;font-size:var(--fs-16);color:#3d4250;white-space:nowrap;border-bottom:3px solid transparent;}
.review-nav a:hover{color:var(--c-primary);}
.review-nav a.active{color:var(--c-accent-ink);border-color:var(--c-accent);}
@media (max-width:640px){.review-nav ul{gap:20px;}.review-nav a{font-size:14px;}}

.rv-section{padding:36px 0 8px;scroll-margin-top:calc(var(--header-h) + 60px);}
.rv-section>h2{font-size:var(--fs-30);margin:0 0 18px;line-height:1.2;}
.rv-section>h2 small{font-size:var(--fs-16);color:var(--v-grey);font-weight:500;margin-left:6px;}
.rv-lead{font-size:var(--fs-18);line-height:1.6;color:var(--v-black);}

.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin:0;background:#fff;border-radius:12px;box-shadow:0 0 0 1px var(--v-grey-light1);padding:8px 24px;}
.info-grid>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:13px 0;border-bottom:1px solid var(--v-grey-light2);}
.info-grid dt{color:#5c5f66;font-size:var(--fs-14);}
.info-grid dd{margin:0;color:var(--v-black);font-weight:600;font-size:var(--fs-14);line-height:1.5;word-break:break-word;}
.info-grid dd a{color:var(--c-accent-ink);text-decoration:underline;}
.info-grid dd .chip,.lic-card .chip{white-space:normal;}
@media (max-width:768px){.info-grid{grid-template-columns:1fr;padding:4px 16px;}.info-grid>div{grid-template-columns:110px minmax(0,1fr);}}

.lev-scale{margin-top:20px;background:#fff;border-radius:12px;box-shadow:0 0 0 1px var(--v-grey-light1);padding:18px 24px;}
.lev-scale h3{font-size:var(--fs-16);margin:0 0 12px;}
.lev-scale .bar{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}
.lev-scale .bar span{height:10px;border-radius:3px;background:var(--v-grey-light1);position:relative;}
.lev-scale .bar span.on{background:linear-gradient(90deg,var(--c-trusted),var(--c-caution));}
.lev-scale .bar span:nth-child(3).on{background:var(--c-caution);}
.lev-scale .bar span:nth-child(4).on{background:var(--c-warning);}
.lev-scale .bar span.cur::after{content:"";position:absolute;left:50%;top:-9px;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--v-black);}
.lev-scale .labels{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;font-size:12px;color:#4a4f5c;margin-top:6px;text-align:center;}
.lev-scale .labels .cur{color:var(--v-black);font-weight:700;}
.lev-scale p{font-size:12px;color:#5c5f66;margin:10px 0 0;}

.lic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.lic-card{background:#fff;border-radius:12px;box-shadow:0 0 0 1px var(--v-grey-light1);padding:18px 20px;display:flex;flex-direction:column;gap:10px;}
.lic-card.tier-1{box-shadow:0 0 0 1px var(--c-primary-light),inset 4px 0 0 var(--c-primary);}
.lic-card.tier-2{box-shadow:0 0 0 1px var(--c-accent-soft),inset 4px 0 0 var(--c-accent);}
.lic-card.tier-3{box-shadow:0 0 0 1px var(--c-caution-bg),inset 4px 0 0 var(--c-caution);}
.lic-head{display:flex;gap:12px;align-items:center;}
.lic-head .seal{width:46px;height:46px;border-radius:50%;background:var(--c-primary-050);color:var(--c-primary);display:grid;place-items:center;flex:0 0 auto;}
.lic-head b{font-size:20px;color:var(--v-black-light);line-height:1.1;display:block;}
.lic-head small{color:#4a4f5c;font-size:13px;}
.lic-card dl{display:grid;grid-template-columns:110px 1fr;gap:6px 10px;font-size:var(--fs-14);margin:0;}
.lic-card dt{color:#5c5f66;}
.lic-card dd{margin:0;color:var(--v-black);font-weight:600;word-break:break-word;}
.lic-card .note{font-size:13px;color:#3d4250;margin:0;line-height:1.5;}
.lic-card .lic-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.lic-tier-note{font-size:var(--fs-14);color:#4a4f5c;margin-top:14px;}
.lic-tier-note a{color:var(--c-accent-ink);text-decoration:underline;}
@media (max-width:768px){.lic-grid{grid-template-columns:1fr;}}

.acc-tabs{background:#fff;border-radius:12px;box-shadow:0 0 0 1px var(--v-grey-light1);padding:20px 24px;}
.acc-tabs [role=tablist]{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:18px;}
.acc-tabs [role=tablist]::-webkit-scrollbar{display:none;}
.acc-tabs [role=tab]{padding:8px 16px;border-radius:6px;background:var(--v-grey-light2);font-size:var(--fs-14);font-weight:600;color:var(--v-black);white-space:nowrap;}
.acc-tabs [role=tab][aria-selected=true]{background:var(--c-primary);color:#fff;}
.acc-tabs [role=tabpanel] .info-grid{box-shadow:none;padding:0;}

.proscons{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}
.proscons .panel+.panel{margin-top:0;}
.proscons .panel h3{font-size:var(--fs-18);display:flex;gap:10px;align-items:center;margin:0 0 12px;}
.proscons li{display:flex;gap:10px;padding:8px 0;color:var(--v-black);line-height:1.5;font-size:var(--fs-16);border-bottom:1px dashed var(--v-grey-light1);}
.proscons li:last-child{border-bottom:0;}
.proscons .pros .ico{color:var(--c-trusted);}
.proscons .cons .ico{color:var(--c-warning);}
.proscons li .ico{width:20px;height:20px;margin-top:2px;}
@media (max-width:768px){.proscons{grid-template-columns:1fr;}}

.summary-card .sc-head{display:flex;gap:14px;align-items:center;margin-bottom:14px;}
.summary-card .sc-head img{width:52px;height:52px;border-radius:10px;border:1px solid var(--v-grey-light1);object-fit:contain;}
.summary-card .sc-head b{display:block;color:var(--v-black-light);font-size:18px;}
.summary-card dl{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;font-size:var(--fs-14);margin:14px 0 18px;}
.summary-card dt{color:#5c5f66;}
.summary-card dd{margin:0;text-align:right;color:var(--v-black);font-weight:600;}
.summary-card .orange-button,.summary-card .ghost-button{width:100%;margin-top:8px;text-align:center;}

/* ---------- Bài viết ---------- */
.article-head .inner{padding-top:48px;padding-bottom:48px;}
.article-hero-img{border-radius:13px;overflow:hidden;margin-bottom:28px;box-shadow:0 15px 30px #0000001A;}
.article-hero-img img{width:100%;height:auto;display:block;}
.article-hero-img figcaption{font-size:13px;color:var(--v-grey);padding:8px 12px;background:var(--v-grey-light3);}
.article-lede{font-size:var(--fs-20);line-height:1.55;color:var(--v-black);font-weight:500;margin-bottom:24px;}
.article-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px;}
.rb-box{display:flex;gap:16px;align-items:center;margin:28px 0;padding:18px;border-radius:12px;background:var(--c-primary-050);border:1px solid var(--c-primary-light);}
.rb-box img{width:56px;height:56px;border-radius:10px;border:1px solid var(--v-grey-light1);background:#fff;object-fit:contain;}
.rb-box div{flex:1;}
.rb-box b{display:block;color:var(--v-black-light);}
.rb-box p{margin:0;font-size:var(--fs-14);color:#3d4250;}
.article-inline-ad{margin:28px 0;}

/* ---------- Hướng dẫn mở tài khoản ---------- */
.guide-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.guide-list a{display:flex;gap:14px;align-items:center;background:#fff;border-radius:12px;padding:18px;box-shadow:0 6px 24px rgba(16,24,40,.07);transition:.3s;}
.guide-list a:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(16,24,40,.12);}
.guide-list img{width:52px;height:52px;border-radius:10px;border:1px solid var(--v-grey-light1);object-fit:contain;}
.guide-list b{display:block;color:var(--v-black-light);}
.guide-list small{color:var(--c-accent-ink);font-weight:600;}
@media (max-width:1024px){.guide-list{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.guide-list{grid-template-columns:1fr;}}
.guide-warning{display:flex;gap:12px;padding:16px 18px;border-radius:12px;background:var(--c-caution-bg);color:#5a3a06;margin-bottom:24px;font-size:var(--fs-14);line-height:1.55;}
.guide-warning .ico{color:var(--c-caution);}

/* ---------- Liên hệ ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:32px;align-items:start;}
.contact-form .field{margin-bottom:18px;}
.contact-form label{display:block;font-weight:600;color:var(--v-black);margin-bottom:8px;font-size:var(--fs-14);}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid transparent;background:#F5F5F5;border-radius:10px;padding:12px 14px;color:var(--v-black);font-size:16px;}
.contact-form select{background:#F5F5F5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23555' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;}
.contact-form textarea{min-height:160px;resize:vertical;}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--c-primary);background:#fff;}
.contact-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.contact-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.contact-form .privacy{font-size:13px;color:#4a4f5c;margin:6px 0 18px;}
.contact-form .privacy a{text-decoration:underline;}
.form-msg{margin-top:16px;padding:12px 14px;border-radius:10px;font-size:var(--fs-14);font-weight:500;}
.form-msg.ok{background:var(--c-trusted-bg);color:var(--c-trusted);}
.form-msg.err{background:var(--c-warning-bg);color:var(--c-warning);}
.contact-info li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--v-grey-light1);color:var(--v-black);}
.contact-info li .ico{color:var(--c-accent-ink);margin-top:1px;}
.contact-info small{display:block;color:var(--v-grey);font-size:12px;}
.contact-info a{color:var(--c-primary);font-weight:600;word-break:break-word;}
@media (max-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr);}.contact-form .row2{grid-template-columns:1fr;}}

/* ---------- 404 ---------- */
.notfound{text-align:center;padding:96px 0;}
.notfound .code{font-size:120px;font-weight:800;line-height:1;background:linear-gradient(90deg,var(--c-primary),var(--c-accent));-webkit-background-clip:text;background-clip:text;color:transparent;}
.notfound h1{font-size:var(--fs-36);margin:10px 0 12px;}
.notfound p{max-width:560px;margin:0 auto 24px;color:#3d4250;}
.notfound .search-field{max-width:420px;margin:0 auto 24px;}