:root{
  --ms-main-gray: #ccc
}
body{
    font-family: "Roboto";
    color: rgb(92, 88, 88);
}

label{
    color: rgb(92, 88, 88);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="date"],
textarea,
select {
  background-color: #f0f0f0; 
  border: 0.25px solid var(--ms-main-gray);    
  border-radius: 30px;          
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  transition: border-color 0.2s ease;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 12l-6-6h12l-6 6z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 20px center; /* Đặt vị trí mũi tên cách mép phải 12px */
  background-size: 12px;
}


input[type="file"]
{
    width: 30%;

}

button[type="submit"] {
    background-color: #666;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 15px 20px;
    font-size: 14px;
    float: right;
    cursor: pointer;
    transition: background-color 0.3s ease;
    max-width: 250px;
    align-self: flex-end;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #0073aa;    
  outline: none;
  background-color: #fff;    
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
}


/* Form notice */
.form-message {
    padding: 12px 20px;
    height: fit-content;
    border-radius: 6px;
    margin-bottom: 16px;
    font-weight: bold;
}

.form-message.success {
    background-color: #dff0d8;
    border: 1px solid #3c763d;
    color: #3c763d;
}
.form-message.error {
    background-color: #f2dede;
    border: 1px solid #a94442;
    color: #a94442;
}

/* Album form Style */
.album-form-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Bên trái: chiếm 30% */
.album-form-left {
    flex: 0 0 calc(30% - 10px);
    max-width: calc(30% - 10px);
    padding: 10px;
    box-sizing: border-box;
    border-right: 1px solid #ddd;
    text-align: center;
}

/* Bên phải: chiếm 70% */
.album-form-right {
    flex: 0 0 calc(70% - 10px);
    max-width: calc(70% - 10px);
    padding: 10px;
    box-sizing: border-box;
}

.custom-file-upload {
    width: 100px;
    height: 100px;
    background-color: #333;
    border-radius: 20px;
    position: relative;
    margin: 0 auto;
    cursor: pointer;
}

.custom-file-upload .dashicons {
    font-size: 3em;
    color: white;
    position: absolute;
    top: 37%;
    left: 37%;
    transform: translate(-50%, -50%);
}
.custom-file-upload p {
    font-size: 0.8em;
    color: white;
    position: absolute;
    width: 100%;
    bottom: 10px;        /* hoặc bottom: 0 nếu muốn sát đáy */
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    text-align: center;
}

.album-meta-group {
    margin-bottom: 20px;
}
.form-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
}
.form-field-row {
    display: flex;
    gap: 20px;
}

.field-40 {
    flex: 0 0 40%;
}

.field-60 {
    flex: 0 0 60%;
}

.full-width {
    width: 100%;
}


/* Responsive cho điện thoại (màn nhỏ) */
@media (max-width: 768px) {
    .album-form-grid {
        flex-direction: column;
    }

    .album-form-left,
    .album-form-right {
        flex: 0 0 100%;
        max-width: 100%;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }
}