/*
Theme Name: Order Tracking Portal
Theme URI: https://example.com/
Author: OpenAI
Description: Giao diện cổng khách hàng theo dõi đơn hàng, sử dụng cùng plugin Order Tracking.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: order-tracking-theme
*/
:root{--ot-navy:#172d46;--ot-blue:#2463a6;--ot-bg:#f4f7fb;--ot-text:#243447;--ot-muted:#6b7785;--ot-border:#e2e8f0;--ot-green:#16865b}
*{box-sizing:border-box}
body{margin:0;background:var(--ot-bg);color:var(--ot-text);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--ot-blue);text-decoration:none}a:hover{text-decoration:underline}
.ot-site-header{background:var(--ot-navy);color:#fff;padding:18px 24px}
.ot-header-inner{max-width:1120px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px}
.ot-brand{color:#fff;font-weight:750;font-size:20px;letter-spacing:.2px}
.ot-nav{display:flex;gap:20px;flex-wrap:wrap}.ot-nav a{color:#e5edf6;font-size:14px}
.ot-wrap{width:min(100% - 32px,1000px);margin:42px auto 64px;min-height:55vh}
.ot-hero{background:linear-gradient(120deg,#172d46,#244f78);color:white;border-radius:18px;padding:34px;margin-bottom:24px}
.ot-hero h1{margin:0 0 8px;font-size:clamp(26px,4vw,38px);line-height:1.2;color:#fff}
.ot-hero p{margin:0;color:#dce8f4}
.ot-panel,.ot-card{background:#fff;border:1px solid var(--ot-border);border-radius:15px;padding:24px;box-shadow:0 4px 18px rgba(24,48,75,.04);margin-bottom:18px}
.ot-panel h2,.ot-card h2{margin:0 0 14px;font-size:20px}
.ot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:20px}
.ot-stat{background:#fff;border:1px solid var(--ot-border);border-radius:14px;padding:20px}
.ot-stat strong{display:block;font-size:30px;line-height:1.2;color:var(--ot-navy)}
.ot-stat span{font-size:13px;color:var(--ot-muted)}
.ot-table{width:100%;border-collapse:collapse}
.ot-table th,.ot-table td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--ot-border);vertical-align:top}
.ot-table th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ot-muted)}
.ot-status{display:inline-block;border-radius:999px;padding:4px 10px;background:#eaf2fb;color:#245b91;font-size:12px;font-weight:700}
.ot-status.is-delivered{background:#e7f6ef;color:#13764f}
.ot-status.is-cancelled{background:#fff0f0;color:#a43d3d}
.ot-button,button.ot-button{display:inline-block;border:0;border-radius:9px;background:var(--ot-blue);color:#fff;padding:11px 17px;font-weight:650;cursor:pointer}
.ot-button:hover{background:#194e86;color:#fff;text-decoration:none}
.ot-form label{display:block;font-weight:650;margin:12px 0 5px}
.ot-form input{width:100%;padding:12px;border:1px solid #cbd5e1;border-radius:8px;font:inherit}
.ot-form input:focus{outline:2px solid #b9d5f2;border-color:#568cc3}
.ot-error{padding:12px 14px;background:#fff0f0;color:#9b2929;border-radius:8px;margin:12px 0}
.ot-success{padding:12px 14px;background:#eaf7ef;color:#176c46;border-radius:8px;margin:12px 0}
.ot-timeline{list-style:none;padding:0;margin:18px 0}
.ot-timeline li{position:relative;padding:0 0 24px 34px;border-left:2px solid #dbe5ef;margin-left:9px}
.ot-timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.ot-timeline li:before{content:"";position:absolute;left:-8px;top:3px;width:14px;height:14px;border-radius:50%;background:#2d79b9;border:2px solid white;box-shadow:0 0 0 1px #2d79b9}
.ot-timeline time{display:block;color:var(--ot-muted);font-size:12px;margin-bottom:3px}
.ot-timeline strong{display:block}
.ot-muted{color:var(--ot-muted);font-size:14px}
.ot-footer{background:#fff;border-top:1px solid var(--ot-border);padding:22px;text-align:center;color:var(--ot-muted);font-size:13px}
.ot-empty{padding:28px;text-align:center;color:var(--ot-muted);background:#fff;border:1px dashed #cbd5e1;border-radius:14px}
.ot-content{background:#fff;border:1px solid var(--ot-border);border-radius:15px;padding:26px}
@media(max-width:650px){.ot-site-header{padding:15px}.ot-header-inner{align-items:flex-start;flex-direction:column}.ot-wrap{margin:24px auto 42px}.ot-hero{padding:25px}.ot-grid{grid-template-columns:1fr}.ot-panel,.ot-card{padding:18px}.ot-table{font-size:13px}.ot-table th,.ot-table td{padding:10px 6px}.ot-hide-mobile{display:none}}