.legacy-modern { background:var(--paper,#fafbf9);color:var(--ink);line-height:1.65 }
.legacy-modern > header nav a { color:#fff }
.legacy-modern > header nav a:hover { color:#ef7569 }
.legacy-modern > main > .breadcrumb { background:transparent;margin:0 auto }
.legacy-intro { padding-top:34px;padding-bottom:24px }
.legacy-intro h1 { font-size:clamp(30px,4vw,48px);letter-spacing:-.035em;max-width:1000px }
.legacy-modern .blog_area { padding:12px 0 48px }
.legacy-modern .blog_area > .container { max-width:1220px;width:calc(100% - 96px);padding:0 }
.legacy-modern .blog_area > .container > .row { display:block;margin:0 }
.legacy-modern .blog_area > .container > .row > [class^="col-"] { max-width:none;width:100%;padding:0 }
.legacy-modern .blog_left_sidebar { border:1px solid var(--line);border-radius:7px;background:#fff;padding:clamp(15px,3vw,35px);overflow-x:auto }
.legacy-modern .blog_item { display:block;margin:0 }
.legacy-modern .blog_details { padding:0;color:var(--ink) }
.legacy-modern .blog_details h2 { margin:0 0 16px;font-size:23px }
.legacy-modern .mainmenubtn { background:#edf2f4;color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:11px 15px;white-space:normal;text-align:left }
.legacy-modern .mainmenubtn h3,.legacy-modern .mainmenubtn h4 { font-size:16px;margin:0;color:inherit }
.legacy-modern .dropdown-child { background:#152b40;z-index:5;max-width:90vw }
.legacy-modern .dropdown-child a { white-space:normal;color:white }
.legacy-modern .section-top-border { padding:20px 0;border-color:var(--line) }
.legacy-modern .progress-table-wrap { overflow:visible }
.legacy-modern .progress-table { min-width:0;padding:0;background:none }
.legacy-modern .table-row { display:flex;align-items:center;gap:16px;padding:12px 16px;margin:10px 0;background:#f5f7f8;border:1px solid var(--line);border-radius:5px }
.legacy-modern .table-row .serial { flex:0 0 32px;width:32px;padding:0;color:var(--muted) }
.legacy-modern .table-row .country { width:auto;flex:1;min-width:0;display:flow-root }
.legacy-modern .table-row img { margin:0 16px 0 0;max-width:35%;height:auto;border-radius:4px }
.legacy-modern .blog_left_sidebar iframe { width:min(100%,800px);height:auto;aspect-ratio:16/9;border-radius:5px }
.legacy-modern .blog_left_sidebar img { max-width:100%;height:auto }
.legacy-modern .blog_right_sidebar { width:100%;padding:0;margin-top:20px;background:none;border:0 }
.legacy-sidebar { padding:16px 20px;background:#fff;border:1px solid var(--line);border-radius:5px }
.legacy-sidebar summary { cursor:pointer;font-weight:600 }
.legacy-logos { display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px }
.legacy-logos a { min-height:104px;display:grid;place-items:center;padding:12px;border:1px solid var(--line);border-radius:5px }
.legacy-logos img { width:100%;max-width:145px;height:70px!important;object-fit:contain }
.legacy-order .blog_left_sidebar table { width:100%;max-width:100% }
.legacy-order .blog_left_sidebar td { padding:6px;overflow-wrap:anywhere }
.legacy-order .blog_left_sidebar td[bgcolor] { background:#eef2f4;border-left:3px solid var(--red);font-weight:700 }
.legacy-order .blog_left_sidebar input,.legacy-order .blog_left_sidebar select,.legacy-order .blog_left_sidebar textarea { max-width:100% }
.legacy-order .blog_left_sidebar .form-control { border-color:#becbd2;border-radius:5px }
.legacy-order .blog_left_sidebar input[type="submit"] { background:#b83a31;color:#fff;border-color:#b83a31 }
@media(max-width:1000px){.legacy-modern .blog_area > .container{width:calc(100% - 48px)}}
@media(max-width:700px){.legacy-modern .blog_area > .container{width:calc(100% - 36px)}.legacy-intro{padding-top:22px}.legacy-modern .table-row{padding:12px;gap:9px}.legacy-modern .table-row .serial{flex-basis:23px;width:23px}.legacy-order .blog_left_sidebar{font-size:13px}}

/* Let detail previews extend over their surrounding rows. */
.legacy-modern .blog_left_sidebar:has([id="zoom"] > img) { overflow: visible; }
.legacy-modern .table-row:has([id="zoom"] > img:hover) { position: relative; z-index: 6; }
.legacy-modern [id="zoom"] > img { transform-origin: left center; }
.legacy-modern [id="zoom"] > img:hover { position: relative; z-index: 1; }
@media (max-width: 1000px) {
  .legacy-modern [id="zoom"] > img:hover { transform: scale(4); }
}
@media (max-width: 700px) {
  .legacy-modern [id="zoom"] > img:hover { transform: scale(2.5); }
}