.tracking {padding: 56px 0 40px; background: #fff;}
.tracking .section-head {border-top: 0; padding-top: 0;}
.track-tabs {display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px;}
.track-tabs::-webkit-scrollbar {display: none;}
.track-card {background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 14px;}
.track-tabs {margin-bottom: 14px;}
.track-tab {flex: 1 0 220px; display: flex; align-items: center; gap: 10px; padding: 6px; padding-right: 12px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; text-align: left; transition: border-color .3s, box-shadow .3s, transform .3s var(--ease);}
.track-tab img {width: 64px; height: 42px; border-radius: 8px; object-fit: cover;}
.track-tab strong {display: block; font-family: var(--font-head); font-size: 12.5px; font-weight: 600; color: var(--navy-700); text-transform: uppercase; line-height: 1.2;}
.track-tab small {font-size: 11.5px; color: var(--muted);}
.track-tab:hover {transform: translateY(-2px); box-shadow: var(--shadow-sm);}
.track-tab[aria-selected="true"] {border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(30,155,240,.15);}
.track-body {display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px;}
.track-map {position: relative; border-radius: 14px; overflow: hidden; background: #cfe2f3; min-height: 340px;}
.track-map.is-full {position: fixed; inset: 16px; z-index: 300; box-shadow: 0 0 0 100vmax rgba(6,22,51,.6);}
.track-map__stage {position: absolute; inset: 0; cursor: grab; touch-action: none;}
.track-map__stage.is-dragging {cursor: grabbing;}
.track-map__svg {width: 100%; height: 100%; transform-origin: center; transform: translate(var(--mx, 0px), var(--my, 0px)) scale(var(--mz, 1)); transition: transform .4s var(--ease);}
.track-map__stage.is-dragging .track-map__svg {transition: none;}
.m-sea {fill: #cfe2f3;}
.m-land {fill: #eef3f8; stroke: #b9cde2; stroke-width: 1;}
.m-grid path {stroke: rgba(255,255,255,.55); stroke-width: 1; fill: none;}
.m-depth path {stroke: #b5d0ea; stroke-width: 1; fill: none; stroke-dasharray: 3 4;}
.m-route {fill: none; stroke: #5d7ea8; stroke-width: 1.4; stroke-dasharray: 6 5; opacity: .6;}
.m-ports circle {fill: #fff; stroke: var(--navy-600); stroke-width: 2; transition: fill .3s, r .3s;}
.m-ports text {font: 600 11px var(--font-body); fill: var(--navy-600);}
.m-ports .is-hl circle {fill: var(--blue-500); stroke: #fff;}
.m-ports .is-hl text {fill: var(--blue-600);}
.m-sea-label {font: 600 10px var(--font-head); letter-spacing: .3em; fill: rgba(11, 37, 84, .35);}
.m-compass circle {fill: rgba(255,255,255,.7); stroke: var(--navy-600);}
.m-compass path {fill: var(--navy-600);}
.m-compass text {font: 700 10px var(--font-head); fill: var(--navy-600);}
.track-map__ctrl {position: absolute; z-index: 2; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 6px;}
.track-map__ctrl button {width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: #fff; color: var(--navy-700); box-shadow: var(--shadow-sm); transition: background .25s, color .25s;}
.track-map__ctrl button:hover {background: var(--blue-500); color: #fff;}
.track-map__badge {position: absolute; left: 12px; bottom: 12px; z-index: 2; font-size: 11.5px; font-weight: 600; color: var(--navy-700); background: rgba(255,255,255,.9); padding: 5px 10px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);}
.track-info {border-radius: 14px; border: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 14px; background: linear-gradient(180deg, #fff, #f7fbff);}
.track-info.is-swap > * {animation: fadeUp .5s var(--ease) both;}
.track-info__head {display: flex; align-items: center; gap: 10px;}
.track-info__flag {width: 26px; height: 18px; border-radius: 3px; background: linear-gradient(135deg, var(--navy-700), var(--blue-500)); display: grid; place-items: center; color: #fff; flex: none;}
.track-info h3 {font-size: 17px; font-weight: 600; text-transform: uppercase;}
.track-info__imo {font-size: 13px; color: var(--muted);}
.track-info__status {display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--navy-600);}
.track-info__status i {width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(243, 154, 52, .2);}
.track-info__grid {display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);}
.track-info__grid div {padding: 12px 8px;}
.track-info__grid div + div {border-left: 1px solid var(--line);}
.track-info__grid dt {font-size: 11px; color: var(--muted);}
.track-info__grid dd {margin: 2px 0 0; font-family: var(--font-head); font-size: 13.5px; font-weight: 600; color: var(--ink);}
.track-info__note {font-size: 12.5px; color: var(--muted); line-height: 1.5;}
.track-info .btn {width: 100%; margin-top: auto;}
.track-info__flag svg {width: 100%; height: 100%; display: block; border-radius: 3px;}
.track-body {grid-template-columns: 1.6fr 1fr;}
.track-map--live {position: relative; border-radius: 14px; overflow: hidden; background: #cfe2f3;}
.track-map--live iframe {position: absolute; inset: 0; width: 100%; height: 100%; border: 0;}
.track-map--live .track-map__badge {pointer-events: none;}
.track-map__empty {position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; color: var(--navy-600); padding: 20px;}
.track-info__flag {width: 30px; height: 20px; border-radius: 3px; overflow: hidden; background: none; box-shadow: 0 2px 6px rgba(0,0,0,.15);}
.track-info__flag img {width: 100%; height: 100%; object-fit: cover; display: block;}
.track-info__img {width: 100%; height: 130px; object-fit: cover; border-radius: 12px;}
.track-map__wait {position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 24px; color: var(--navy-600); font-size: 14px;}
.track-map__wait a {color: var(--blue-600); font-weight: 600; text-decoration: underline;}
.track-map--live iframe {z-index: 1; background: transparent;}
.track-info__status i {animation: pulseRing 1.8s ease-out infinite;}
@media (max-width: 1024px) {
.track-body {grid-template-columns: 1fr;}
.track-map {min-height: 360px;}
}
@media (max-width: 767px) {
.track-tab {flex: 0 0 236px;}
.track-map {min-height: 280px;}
}
@media (max-width: 1100px) {
.track-body {grid-template-columns: 1fr;}
}
.elementor-widget-sonay-tracking {width: 100%;}
.track-tab .ic {margin-left: auto; color: var(--muted); width: 16px; height: 16px; transition: transform .3s var(--ease);}
.track-tab:hover .ic {transform: translateX(3px); color: var(--blue-500);}
.track-tab[aria-selected="true"] .ic {color: var(--blue-500);}
.track-map__ctrl .ic {width: 16px; height: 16px;}
.track-info__flag .ic {width: 12px; height: 12px;}
.track-map__empty .ic {width: 40px; height: 40px; color: var(--blue-500);}
.track-map__wait .ic {width: 38px; height: 38px; color: var(--blue-500); animation: spinSlow 6s linear infinite;}
.track-gal {position: relative; height: 150px; border-radius: 12px; overflow: hidden; background: #e8f1fb;}
.track-gal img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease), transform 1.2s var(--ease);}
.track-gal img.is-contain {object-fit: contain; background: #fff;}
.track-gal img.is-on {opacity: 1; transform: none;}
.track-gal__nav {position: absolute; top: 50%; z-index: 1; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; display: grid; place-items: center; background: rgba(11,37,84,.65); color: #fff; backdrop-filter: blur(6px); transition: background .3s, transform .3s var(--ease);}
.track-gal__nav:hover {background: var(--blue-500); transform: scale(1.08);}
.track-gal__nav .ic {width: 16px; height: 16px;}
.track-gal__nav--prev {left: 8px;}
.track-gal__nav--next {right: 8px;}
.track-gal__dots {position: absolute; z-index: 1; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 5px;}
.track-gal__dots i {width: 6px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.6); transition: width .3s, background .3s;}
.track-gal__dots i.is-on {width: 16px; background: #fff;}
.track-info__grid {grid-template-columns: repeat(4, 1fr); border-bottom: 0; gap: 8px; padding-top: 12px;}
.track-info__grid div {padding: 10px 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-align: center;}
.track-info__grid div + div {border-left: 1px solid var(--line);}
.track-info__grid div.is-wide {grid-column: 1 / -1; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #f2f8ff;}
.track-info__grid div.is-wide dd {margin: 0; text-align: right;}
.track-info__grid dd {font-size: 13px; overflow-wrap: anywhere;}
@media (max-width: 420px) {
.track-info__grid {grid-template-columns: repeat(2, 1fr);}
}