body { font-family: 'Khmer OS Battambang', sans-serif; background-color: #f0f2f5; margin: 0; padding: 20px; }
.wrap { max-width: 1400px; margin: 0 auto; }
.action-bar { background: #fff; padding: 20px; border-radius: 8px; display: flex; gap: 10px; margin-bottom: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); position: sticky; top: 10px; z-index: 1000; }
#review-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 25px; }
.review-card { background: #fff; padding: 15px; border-radius: 8px; border: 1px solid #ddd; position: relative; display: flex; flex-direction: column; }

.scale-wrapper { width: 423px; height: 355px; position: relative; overflow: hidden; border: 1px solid #ccc; background: #fff; margin: 0 auto; }

.poster-box { 
    width: 940px; height: 788px; background: white; position: absolute; top: 0; left: 0; 
    transform: scale(0.45); transform-origin: top left; 
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.title-container { position: absolute; top: 15px; width: 880px; left: 30px; height: 60px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.title-top { white-space: nowrap; font-size: 34px; font-weight: bold; text-align: center; color: #000; width: 100%; }

.img-center { position: absolute; top: 43%; left: 50%; transform: translate(-50%, -50%); width: 700px; height: 380px; display: flex; justify-content: center; align-items: center; }

/* កែចំណុចនេះដើម្បីកុំអោយរូបតឿពេល Download */
.img-center img { max-width: 100%; max-height: 100%; width: auto; height: auto; }

.price-promo-section { position: absolute; bottom: 50px; width: 900px; left: 20px; text-align: center; padding-right: 140px; box-sizing: border-box; line-height: 1.1; z-index: 5; }
.price-row { font-size: 24px; font-weight: bold; margin-bottom: 2px; }
.price-label { color: #d63638; }
.price-qty { color: #27ae60; }
.price-final { color: #6a1b9a; font-size: 28px; }
.promo-badge { position: absolute; bottom: 50px; right: 20px; width: 80px; height: 80px; background: #90d473; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #1a5d1a; font-weight: bold; transform: rotate(15deg); z-index: 10; }
.promo-badge span { font-size: 14px; line-height: 1.1; }

.price-region-section { position: absolute; bottom: 50px; width: 100%; text-align: center; line-height: 1.1; z-index: 5; }
.price-strike { font-size: 24px; font-weight: bold; color: #888; text-decoration: line-through; margin-bottom: 2px; } 
.price-base-repeated { font-size: 24px; font-weight: bold; color: #0056b3; margin-bottom: 2px; } 
.price-region-qty { font-size: 28px; font-weight: bold; color: #27ae60; margin-bottom: 2px; } 
.price-region-final { font-size: 34px; font-weight: bold; color: #d63638; } 

.price-region-sale-section { position: absolute; bottom: 60px; width: 100%; text-align: center; line-height: 1.2; z-index: 5; }
.price-strike-sale { font-size: 28px; font-weight: bold; color: #888; text-decoration: line-through; margin-bottom: 5px; }
.price-sale-final { font-size: 42px; font-weight: bold; color: #d63638; }

.region-group-container { position: absolute; bottom: 15px; right: 20px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 5px; z-index: 10; max-width: 600px; text-align: right;}
.region-name { font-size: 16px; font-weight: bold; color: #555; background: none; padding: 0; box-shadow: none; width: auto; } 

.price-normal { position: absolute; bottom: 60px; width: 100%; text-align: center; font-size: 38px; color: #d63638; font-weight: bold; }
.date-left { position: absolute; bottom: 15px; left: 20px; font-size: 16px; font-weight: bold; color: #777; z-index: 1; }

.btn-action { color: white; border: none; padding: 12px 20px; border-radius: 6px; cursor: pointer; font-weight: bold; }
.btn-excel { background: #27ae60; }
.btn-download-all { background: #d63638; }
.btn-manual { background: #2271b1; font-size: 11px; padding: 5px 10px; border-radius: 4px; border: none; color: white; cursor: pointer; }
.btn-upload-new { background: #f39c12; font-size: 11px; padding: 5px 10px; border-radius: 4px; border: none; color: white; cursor: pointer; } 
.btn-download-single { background: #4a90e2; font-size: 12px; padding: 6px 12px; border-radius: 4px; border: none; color: white; cursor: pointer; font-weight: bold; flex: 1; margin-right: 5px; }
.btn-delete { background: #e74c3c; font-size: 12px; padding: 6px 12px; border-radius: 4px; border: none; color: white; cursor: pointer; font-weight: bold; }
.card-actions { display: flex; margin-top: 15px; justify-content: space-between; }
.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); }
.modal-content { background: #fff; margin: 2% auto; padding: 20px; width: 80%; max-width: 800px; border-radius: 8px; }
#mkphoto-loading { display: none; text-align: center; font-weight: bold; color: #fff; background: #d4a017; padding: 15px; border-radius: 8px; margin-bottom: 20px; font-size: 16px; }

/* ========================================= */
/* មុខងារថ្មី៖ គូសខ្នាត (Dimensions Overlay) */
/* ========================================= */
.dim-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 15; }

.dim-line { 
    position: absolute; display: none; align-items: center; justify-content: center; 
    border-bottom: 4px dashed #d63638; transform-origin: left center; 
    pointer-events: auto; cursor: grab; z-index: 15; height: 0;
}
.dim-line:active { cursor: grabbing; }

.dim-line::before { 
    content: ''; position: absolute; left: -2px; top: -6px; 
    border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 12px solid #d63638; 
}
.dim-line::after { 
    content: ''; position: absolute; right: -2px; top: -6px; 
    border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid #d63638; 
}

.dim-text { 
    background: rgba(255,255,255,0.95); 
    padding: 2px 10px; font-weight: bold; color: #d63638; font-size: 32px; border-radius: 4px; white-space: nowrap; 
    position: absolute; left: 50%; top: 2px; 
    transform: translate(-50%, -50%); 
    cursor: pointer; z-index: 2;
}

.dim-resize-handle { 
    position: absolute; right: -15px; top: -13px; width: 30px; height: 30px; 
    background: rgba(41, 128, 185, 0.7); border: 2px solid #fff; border-radius: 50%; 
    cursor: crosshair; z-index: 16; display: none; box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.dim-line:hover .dim-resize-handle, .dim-line:active .dim-resize-handle { display: block; }

.dim-input { flex: 1; padding: 6px; border: 1px solid #ccc; border-radius: 4px; font-size: 11px; text-align: center; outline: none; }
.dim-input:focus { border-color: #4a90e2; }