import os with open('src/main/resources/static/css/custom.css', 'r') as f: css = f.read() old_css_block = """/* CSS cho Tab Đa năng */ .custom-tab-btn { padding: 10px 20px; border: 1px solid #ccc; background-color: #f8f9fa; color: black; cursor: pointer; transition: all 0.2s ease-in-out; } .custom-tab-btn:hover { background-color: #e9ecef; } .custom-tab-btn.active { background-color: var(--color-old-brick); color: white; border-color: var(--color-old-brick); }""" # Actually, the user manually changed it to `var(--color-old-brick);` as we see in the diff! # So I should find the block starting with `/* CSS cho Tab Đa năng */` and ending at the end of file. # Let's just find the index of `/* CSS cho Tab Đa năng */` and cut everything from there to the end. idx = css.find('/* CSS cho Tab Đa năng */') if idx != -1: css = css[:idx] new_css = """ /* CSS cho Tab Đa năng - Giao diện Mới (Segmented Control) */ .custom-tabs-nav-container { display: flex; justify-content: center; margin-bottom: 2rem; width: 100%; } .tabs-container { background-color: #0d71ba; /* primary-600 */ border-radius: 8px; /* rounded-lg */ padding: 4px; /* p-1 */ display: flex; gap: 4px; /* gap-x-1 */ width: 100%; max-width: fit-content; } @media (max-width: 768px) { .tabs-container { flex-direction: column; width: 100%; max-width: 100%; } } .custom-tab-btn { padding: 8px 16px; /* px-4 py-2 */ border: none; background-color: transparent; color: white; cursor: pointer; border-radius: 6px; /* rounded-md */ transition: all 0.2s ease-in-out; font-weight: 600; font-size: 16px; flex: 1; text-align: center; min-width: 120px; } .custom-tab-btn:hover { color: rgba(255, 255, 255, 0.8); background-color: transparent; } .custom-tab-btn.active { background-color: white !important; color: #0d71ba !important; /* text-primary-600 */ box-shadow: 0 1px 3px rgba(0,0,0,0.1); } """ with open('src/main/resources/static/css/custom.css', 'w') as f: f.write(css + new_css) print("Updated custom.css")