/* หน้าแบบทดสอบวัดพื้นฐาน /test/ — แปลงจากแคนวาส (บอร์ด Test) */
.tx-in{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:150px 24px 136px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:56px;align-items:center}
.tx-facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.tx-facts span{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:7px 14px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);font-size:14px}
.tx-facts svg{color:#FFE055}
.tx-proof{display:flex;align-items:center;gap:14px;margin-top:32px;font-size:15px;line-height:1.45}
.tx-proof b{display:block;font-weight:600}
.tx-proof small{display:block;font-size:14px;color:rgba(255,255,255,.85)}
.tx-proof .tx-mini{flex:none;width:56px;height:56px;border-radius:18px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);display:inline-flex;align-items:center;justify-content:center;color:#FFE055}
.tx-pick{position:relative;background:#FFFFFF;color:#1F1E1D;border-radius:32px;padding:30px 28px 24px;box-shadow:0 30px 70px rgba(122,30,6,.28);text-align:left}
.tx-peek{position:absolute;right:34px;top:-72px;width:120px;height:auto;pointer-events:none}
.tx-pick h2{margin:0;font-size:24px;font-weight:600;line-height:1.3}
.tx-pick .tx-hint{margin:4px 0 0;font-size:15px;color:#716C69}
.tx-lab{display:flex;align-items:center;gap:10px;margin:22px 0 12px;font-size:16px;font-weight:600}
.tx-lab .n{flex:none;width:26px;height:26px;border-radius:50%;background:#FFF3ED;color:#C4180A;font-size:14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.tx-lab .n.done{background:#1F9D63;color:#FFFFFF}
.tx-subj{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tx-s{font-family:inherit;display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 12px;border-radius:18px;border:1px solid #E7E6E6;background:#FFFFFF;color:#1F1E1D;cursor:pointer;text-align:left}
.tx-s:hover{border-color:#1F1E1D}
.tx-s .ic{flex:none;width:34px;height:34px;border-radius:12px;background:#FFF3ED;color:#C4180A;display:inline-flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;line-height:1}
.tx-s b{display:block;font-size:15px;font-weight:600;line-height:1.25}
.tx-s small{display:block;font-size:13px;color:#716C69;line-height:1.3}
.tx-s.on{background:#1F1E1D;border-color:#1F1E1D;color:#FFFFFF}
.tx-s.on .ic{background:#FC4013;color:#FFFFFF}
.tx-s.on small{color:rgba(255,255,255,.75)}
.tx-g{display:grid;grid-template-columns:52px repeat(6,minmax(0,1fr));gap:6px;align-items:center}
.tx-g + .tx-g{margin-top:6px}
.tx-g .k{font-size:13px;color:#716C69}
.tx-gb{font-family:inherit;min-height:44px;padding:0;border-radius:14px;border:1px solid #E7E6E6;background:#FFFFFF;color:#3B3836;font-size:15px;cursor:pointer}
.tx-gb:hover{border-color:#1F1E1D;color:#1F1E1D}
.tx-gb.on{background:#1F1E1D;border-color:#1F1E1D;color:#FFFFFF;font-weight:600}
.tx-s:focus-visible,.tx-gb:focus-visible{outline:2px solid #FC4013;outline-offset:3px}
.tx-note{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;padding:10px 14px;border-radius:14px;background:#FFF8E1;color:#7A4B00;font-size:14px;line-height:1.5}
.tx-note svg{flex:none;margin-top:2px}
.tx-go{width:100%;margin-top:20px;min-height:56px!important;font-size:17px}
.tx-go.off{background:#F1ECE8;color:#8A8582;box-shadow:none;cursor:not-allowed}
.tx-foot{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 0 0;font-size:13px;color:#716C69;text-align:center}

.tx-sheet{position:relative;z-index:3;margin-top:-44px;background:#FFFFFF;border-radius:44px 44px 0 0;padding:104px 16px 0}
.tx-res{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:72px;align-items:center}
.tx-res-txt .h2{text-align:left;font-size:44px}
.tx-res-txt > p{margin:16px 0 0;font-size:17px;color:#524E4C;line-height:1.6;max-width:520px}
.tx-gets{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-direction:column;gap:18px}
.tx-gets li{display:flex;gap:16px;align-items:flex-start}
.tx-gets .gi{flex:none;width:48px;height:48px;border-radius:16px;background:#FFF3ED;color:#FC4013;display:inline-flex;align-items:center;justify-content:center}
.tx-gets b{display:block;font-size:18px;font-weight:600}
.tx-gets span span{display:block;margin-top:2px;font-size:16px;color:#524E4C;line-height:1.55}
.tx-res-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* การ์ดตัวอย่างผล (ล้อหน้าผลจริง) */
.tx-card{position:relative;border-radius:32px;background:#F6F5F5;padding:16px;box-shadow:0 30px 60px rgba(31,30,29,.12);text-align:left}
.tx-tag{position:absolute;top:-14px;left:28px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:#1F1E1D;color:#FFFFFF;font-size:13px;font-weight:600}
.tx-ch{border-radius:22px;background:#121110;color:#FFFFFF;padding:22px 22px 18px}
.tx-ch-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:rgba(255,255,255,.7)}
.tx-ch h3{margin:8px 0 14px;font-size:24px;font-weight:600}
.tx-rung{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.06);font-size:14px}
.tx-rung + .tx-rung{margin-top:6px}
.tx-rung .k{flex:none;width:36px;font-weight:600}
.tx-rung .v{flex:1;min-width:0;color:rgba(255,255,255,.78)}
.tx-rung.tx-now{background:rgba(252,64,19,.22);border:1px solid rgba(252,64,19,.6)}
.tx-rung .row{display:flex;justify-content:space-between;gap:8px;color:#FFFFFF}
.tx-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.16);margin-top:6px;overflow:hidden}
.tx-bar i{display:block;height:100%;border-radius:99px;background:#FC4013}
.tx-rung .ok{flex:none;width:22px;height:22px;border-radius:50%;background:#1F9D63;color:#FFFFFF;display:inline-flex;align-items:center;justify-content:center}
.tx-cb{background:#FFFFFF;border-radius:22px;padding:18px 20px;margin-top:10px}
.tx-score{display:flex;align-items:center;gap:16px}
.tx-score b{display:block;font-size:17px;font-weight:600}
.tx-score small{display:block;font-size:14px;color:#716C69}
.tx-pill{display:inline-flex;align-items:center;border-radius:999px;padding:3px 10px;font-size:13px;font-weight:600;margin-top:4px}
.tx-pill.w{background:#FFF4CC;color:#7A4B00}
.tx-tp{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.tx-tp div{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px}
.tx-tp .lv{flex:none;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:600}
.lv.g{background:#DDF4E8;color:#136B42}.lv.y{background:#FFF4CC;color:#7A4B00}.lv.r{background:#FFE3D6;color:#9C1510}
.tx-mis{margin-top:14px;padding:12px 14px;border-radius:14px;background:#FFF6F1;font-size:14px;line-height:1.55;color:#3B3836}
.tx-mis b{display:block;color:#9C1510;font-size:13px;margin-bottom:2px}

.tx-steps{max-width:1180px;margin:56px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;text-align:left}
.tx-step{border-radius:32px;background:#FFF6F1;padding:28px 28px 30px}
.tx-step .n{width:44px;height:44px;border-radius:50%;background:#FC4013;color:#FFFFFF;font-weight:700;font-size:18px;display:inline-flex;align-items:center;justify-content:center}
.tx-step h3{margin:18px 0 0;font-size:21px;font-weight:600;line-height:1.35}
.tx-step p{margin:8px 0 0;font-size:16px;color:#524E4C;line-height:1.6}
.tx-step ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.tx-step li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:#3B3836;line-height:1.5}

.tx-subs{max-width:1180px;margin:56px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;text-align:left}
.tx-sc{display:flex;flex-direction:column;border-radius:28px;border:1px solid #E7E6E6;background:#FFFFFF;padding:24px;color:#1F1E1D;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.tx-sc:hover{border-color:#1F1E1D;color:#1F1E1D;box-shadow:0 16px 36px rgba(31,30,29,.08)}
.tx-sc:focus-visible{outline:2px solid #FC4013;outline-offset:3px}
.tx-sc .ic{width:48px;height:48px;border-radius:16px;background:#FFF3ED;color:#C4180A;display:inline-flex;align-items:center;justify-content:center;font-size:22px;font-weight:700}
.tx-sc h3{margin:16px 0 0;font-size:21px;font-weight:600}
.tx-sc p{margin:6px 0 0;font-size:15px;color:#524E4C;line-height:1.55;flex:1}
.tx-sc .lv{display:inline-block;margin-top:6px;font-size:14px;color:#716C69}
.tx-sc .go{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-weight:600;color:#C4180A;font-size:15px}

@media (max-width:1100px){
  .tx-in{padding-top:124px;gap:32px;grid-template-columns:minmax(0,1fr) minmax(0,480px)}
  .tx-res{gap:40px}
}
@media (max-width:960px){
  .tx-in{grid-template-columns:minmax(0,1fr);max-width:640px}
  .tx-res{grid-template-columns:minmax(0,1fr);max-width:620px}
  .tx-res .tx-card{order:2}
  .tx-steps,.tx-subs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:860px){
  .tx-in{padding:104px 16px 88px;gap:72px}
  .tx-facts span{font-size:13px;padding:6px 12px}
  .tx-proof{display:none}
  .tx-pick{padding:24px 16px 18px;border-radius:28px}
  .tx-peek{width:96px;top:-58px;right:22px}
  .tx-pick h2{font-size:21px}
  .tx-s{flex-direction:column;align-items:flex-start;gap:6px;min-height:0;padding:10px}
  .tx-s small{display:none}
  .tx-g{grid-template-columns:repeat(6,minmax(0,1fr))}
  .tx-g .k{grid-column:1/-1;margin-top:2px}
  .tx-sheet{margin-top:-32px;border-radius:32px 32px 0 0;padding-top:72px}
  .hs .tx-res .h2{font-size:31px}
  .tx-gets b{font-size:17px}
  .tx-gets span span{font-size:15px}
  .tx-res-btns .btn{flex:1 1 100%}
  .tx-card{padding:10px;border-radius:26px}
  .tx-steps{grid-template-columns:minmax(0,1fr);margin-top:36px;gap:12px}
  .tx-step{padding:22px 22px 24px;border-radius:26px}
  .tx-subs{grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:36px;gap:10px}
  .tx-sc{padding:16px;border-radius:22px}
  .tx-sc .ic{width:40px;height:40px;border-radius:13px;font-size:18px}
  .tx-sc h3{font-size:17px;margin-top:12px}
  .tx-sc p{display:none}
  .tx-sc .go{margin-top:10px;font-size:14px}
}
.tx-mbar b{display:block;font-size:15px;font-weight:600}
.tx-mbar small{display:block;font-size:13px;color:#716C69}
.tx-pick{scroll-margin-top:96px}